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.

[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!