Upgrade Button Issues

I have changed the Studio upgrade message and URL to “external”. This is a great feature but useless in the end due to one issue. In the Studio you have an “Upgrade” button that is on the Home page as well as every Pickaxe in the studio that is accessible.

Unfortunately this button takes you to the Internal pricing page which I do not want to use. Is there a way to change this buttons forwarding url? Can I just get rid of the button?

3 Likes

@ecomprocess this must be a bug!

@danny_support can you please check?

2 Likes

Sounds like a bug to me too

2 Likes

I did up a video on the issue. I hope it is a bug, because I have people signing up daily for my tool and no way to upgrade them at this time. @danny_support

As you can see, when I run out of credits the upgrade button does go to the correct URL. The Upgrade buttons at the top do not change though and still go to the studio pricing page.

1 Like

Any update on this @danny_support @nathaniel @nathanielmhld ? I cross referenced with my other studio’s and they all have the same issue.

1 Like

@danny_support @nathanielmhld Just checking in again. Is this issue a known bug or is it how the software is supposed to behave? Does anyone else have this issue?

Hi, thank you for reaching out! I believe the “Upgrade Message” refers to the message your AI tool sends when users reach their usage limit. It doesn’t extend to the upgrade CTA in the Studio’s header, but I’ll mention this to our team.

For now, you can use this workaround:

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Your custom upgrade URL
  const customUrl = "https://your-custom-upgrade-link.com";

  // Wait for the button to appear (handles client-side rendering)
  const observer = new MutationObserver(() => {
    const upgradeBtn = Array.from(document.querySelectorAll("button"))
      .find(btn => btn.textContent.trim().toLowerCase() === "upgrade");
    if (upgradeBtn && !upgradeBtn._customRedirect) {
      upgradeBtn.addEventListener("click", function(e) {
        e.preventDefault();
        window.location.href = customUrl;
      });
      upgradeBtn._customRedirect = true;
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
});
</script>

Just go to the Settings tab of your Studio, scroll down to the Website code injection section, and paste the code above into the Header. Please note that if any changes are made to the DOM in future updates, this code might stop working and could need some adjustments.

Our team is always working hard to add new features and customization options, so your feedback is much appreciated!

So that didn’t work for me, but ironically I used Promptables PATCH which is part of the suite of tools in promptables and it fixed it!!! I love that tool. Saved my ass a few times. Here is the fix it suggested.

document.addEventListener("DOMContentLoaded", function() {
  // Your custom upgrade URL
  const customUrl = "https://promptables.pro/upgrade";
  
  // Function to find and modify the upgrade button
  function findAndModifyUpgradeButton() {
    // Try multiple selectors to find the button
    const possibleSelectors = [
      "button:contains('Upgrade')",
      "button:contains('upgrade')",
      "a:contains('Upgrade')",
      "a:contains('upgrade')",
      "[role='button']:contains('Upgrade')",
      "[role='button']:contains('upgrade')"
    ];
    
    // Custom contains selector implementation
    const allElements = document.querySelectorAll('button, a, [role="button"]');
    let upgradeBtn = null;
    
    allElements.forEach(el => {
      if (el.textContent && el.textContent.trim().toLowerCase().includes('upgrade') && !el._customRedirect) {
        upgradeBtn = el;
      }
    });
    
    // Also try to look in shadow DOM roots if available
    if (!upgradeBtn) {
      document.querySelectorAll('*').forEach(el => {
        if (el.shadowRoot) {
          const shadowButtons = el.shadowRoot.querySelectorAll('button, a, [role="button"]');
          shadowButtons.forEach(btn => {
            if (btn.textContent && btn.textContent.trim().toLowerCase().includes('upgrade') && !btn._customRedirect) {
              upgradeBtn = btn;
            }
          });
        }
      });
    }
    
    // If button found, modify it
    if (upgradeBtn && !upgradeBtn._customRedirect) {
      console.log("Upgrade button found and modified");
      upgradeBtn.addEventListener("click", function(e) {
        e.preventDefault();
        e.stopPropagation();
        window.location.href = customUrl;
      }, true); // Use capturing to ensure our handler runs first
      upgradeBtn._customRedirect = true;
    }
  }
  
  // Run immediately in case button already exists
  findAndModifyUpgradeButton();
  
  // Set up a more robust observer
  const observer = new MutationObserver(() => {
    findAndModifyUpgradeButton();
  });
  
  // Observe the entire document for changes
  observer.observe(document.body, { 
    childList: true, 
    subtree: true,
    attributes: true,
    characterData: true
  });
  
  // Also run periodically as a fallback
  setInterval(findAndModifyUpgradeButton, 2000);
});