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?

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