How to use the Button trigger code snippet as a 'external url'

[Jelmert]

Hi,

I have created a popup form with the new popup cta builder in hubspot. Now it says to use a button module from hubspot and pick the cta. This all works. But the button module from hubspot does not have the styling options i want. 

So i want to use another button module, but this module only has the option to link to content, file or url. Now it says this on the hubspot page:

"Use this code snippet as the href on a button on your external website to trigger your CTA." But my question is, how do I do this? 😅

this is the snippet: javascript:postMessage({ type: 'HS_DISPLAY_CALL_TO_ACTION', id: 92185297035 });

should i use <a href?

[Jperrier12]

I found a way to do it with a custom html embed module on external site builder (webflow). First, create a new CTA using the new CTA builder (toggle away from legacy CTA). I chose the webinar pop up registration template as it has a background and a form. Choose a form and pulblish it.

Next, create another CTA button in the new CTA builder, I chose the sign up now template. Choose link to CTA, then choose the pop up CTA you just published above. See pic below: 

Lastly, go to the CTA button you created and click edit and then click embed in the upper right. Copy the embed code and paste it in a custom html embed module on your page builder. Make sure you have the hubspot tracking code installed on the external website, otherwise the pop up won't work.

[kvlschaefer]

Hi @Jperrier12,

Thank you for sharing your custom module solution with the Community! 

Best,

Kristen

[KRichter5]

I have a WordPress site (external site) with a pre-existing button that currently links to nothing. I've created a pop up CTA that I would like to apply to this button; however, I'm not sure how to apply the snippet HubSpot provided for external URLS.

Does anyone know how to do this?

[Eric_Kornacki]

I am also trying to navigate the same issue - adding a "button trigger code snippet" to my external website, which is built/hosted on WordPress.

[Anton]

Hi @Jelmert, 

personally I always create a custom module with a modal-box or similar since this gives you near endless possibilities of functionality. 

So basically you can grab one of the free available code-snippets(i.e bootstrap modals) from the web and modify it for HubSpot.

It could look something like this:

{# Button trigger modal #}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-{{name|md5}}">
{{ module.button_label }}
</button>

{# Modal box #}
<div class="modal fade" id="modal-{{name|md5}}" tabindex="-1" aria-labelledby="{{ module.modal_label}}" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
      {% form
form_to_use="{{ module.form.form_id }}"
response_response_type="{{ module.form.response_type }}"
response_message="{{ module.form.message }}"
response_redirect_id="{{ module.form.redirect_id }}"
response_redirect_url="{{module.form.redirect_url}}"
gotowebinar_webinar_key="{{ module.form.gotowebinar_webinar_key }}"
%}
      </div>
     </div>
  </div>
</div>

If you want to use a default button you'd have to use the "external URL" option and set it to an ID like "#modal-box", add a javascript/jQuery which will trigger the modal box opening when a button with this URL is clicked...

Basically the same result as a custom module.

best, 

Anton

[Jelmert]

Hi @Anton 

The CTA button trigger cta has now been changed to use a class instead of the java code snippet.

The class code snippet is: hs-cta-trigger-button hs-cta-trigger-button-92185297035

How would i go about to add this to a html text link for example? Would it be something like this: <a href="#" class="hs-cta-trigger-button hs-cta-trigger-button-92185297035">click me</a>

[Jelmert]

@AntonThank you for your reply.

My knowledge of any code is very minimal haha. So this is a bit overwhelming for me.

Can I add the modal-box code in the html header or wont that work?

Im trying to get the same result when using the hubspot button but with an html text link or a button from a theme linking to an exernal url. 

When I add the code snippet as a URL im getting this error message so i know im doing somehting wrong.

I think im totally overlooking something haha. sorry for my lack of knowlegde about code. We can not really adjust any code on the website only add code in the html header and footer section.

[kvlschaefer]

Hi @Jelmert,

Thanks for reaching out! 

To confirm you are using the create call to action button feature, correct? 

I would like to invite our subject matter experts to see if they have advice.

Hi @LMeert, @Anton, @Teun - Do you have any tips for @Jelmert?

Thank you! ⭐ 

Best,

Kristen

[Jelmert]

Hey @kvlschaefer 

Yes I am 🙂 And im talking about this messsage:

Because as i said i want to use another button module or just a html link text instead of the common button module.