Dynamic CTA button with popup

[Alberto_Gori]

I need to open a HS popup using a CTA button in an external website. The instructions say to add class hs-cta-trigger-button hs-cta-trigger-button-... to the button. 

And it works if the button is already in the page before the hubspot script is loaded, but it doesn't if the button is dynamically added to the page. 

How to programmatically attach a popup to a dynamically created button?

[Alberto_Gori]

Unfortunately this is not a widget, it's a CTA popup: https://developers.hubspot.com/docs/reference/api/marketing/calls-to-action-sdk

I don't have any object HubSpotConversations. The documentation does mention an object HubSpotCallsToActions but it doesn't appear to have any method to open a popup.

[sylvain_tirreau · Accepted solution]

Hi,

Try this.

window.addEventListener('load', () => {
  if (window.HubSpotCallsToActions) {
    console.log('The api is already initialized');
  } else {
    window.hsCallsToActionsReady = [
      () => {
        console.log('Now the api is ready');
      },
    ];
  }
});

And if you see text in console, try to put in each condition this : "window.HubSpotCallsToActions.refresh();".

Anything works better?

[ZOnlycat]

You’re right—the HubSpot popup trigger (hs-cta-trigger-button) works only when the button is present before the script loads. However, for dynamically added buttons, you need to manually reinitialize the event listener.

Solution: Attach Event Listener After Button Is Added

Since your button is dynamically created, you need to use event delegation or manually re-trigger HubSpot’s script. Try this approach:

// Function to rebind the HubSpot CTA trigger

function rebindHubSpotCTA() {

    setTimeout(() => {

        const buttons = document.querySelectorAll('.hs-cta-trigger-button');

        buttons.forEach(button => {

            button.addEventListener('click', function() {

                // Trigger the HubSpot popup manually

                window.HubSpotConversations.widget.open();

            });

        });

    }, 500); // Delay to ensure the button is in the DOM

}

// Example: Dynamically creating a button

const newButton = document.createElement('button');

newButton.className = 'hs-cta-trigger-button';

newButton.textContent = 'Open Popup';

document.body.appendChild(newButton);

// Call the function to rebind

rebindHubSpotCTA();

Why This Works?

Ensures the button exists before attaching the event listener.

Uses a delay to allow HubSpot scripts to load properly.

Manually binds the click event to trigger the popup.

If you're using jQuery, you can also try:

$(document).on('click', '.hs-cta-trigger-button', function() {

    window.HubSpotConversations.widget.open();

});

[Alberto_Gori]

Unfortunately this is not a widget, it's a CTA popup: https://developers.hubspot.com/docs/reference/api/marketing/calls-to-action-sdk

I don't have any object HubSpotConversations. The documentation does mention an object HubSpotCallsToActions but it doesn't appear to have any method to open a popup.

[BérangèreL]

Hi @Alberto_Gori, thank you for getting back to us!

And thanks @ZOnlycat for the help and suggestions!

I'd love to put you in touch with some additional Top Experts to see if they have any insights to share regarding CTAs in this particular case: Hi @TomM2, @trevordjones and @danmoyle do you have ideas to help @Alberto_Gori, please?

Have a great day and thanks so much!

Best,
Bérangère

[danmoyle]

Apreciate the tag @BérangèreL - unfortunately I'm out of my expertise on this specific question from @Alberto_Gori. I've used the pop up tool with the HubSpot tracking code on my external site, and the settings for when it shows or doesn't - not code like this. Hopefully another community member can help! 

[BérangèreL]

Hi @Alberto_Gori, I hope that you are well!

I'll see if other Community Members can share their experience here: Hi @Jnix284, @sylvain_tirreau and @Teun do you have tips/insights to share with @Alberto_Gori, please?

Thanks @danmoyle for your reply!

And @Alberto_Gori, if you are still looking to open the dynamically created CTA in a popup and you cannot, for new feature suggestions, I'd also recommend first to search and check if this idea is already present on our Ideas Forum here. If you find a similar idea, give it an upvote and share your unique use case in the comments.

If the idea doesn't exist already, please consider posting and creating a new Idea on our Ideas Forum here.

Thank you for being part of the discussion!

Have a great day!

Best,
Bérangère