Lead Capture Tools

Jelmert
Participant

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

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?

 

0 Upvotes
5 Replies 5
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

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

Anton Bujanowski Signature
Jelmert
Participant

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

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>

0 Upvotes
Jelmert
Participant

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

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

Schermafbeelding 2022-11-22 om 13.57.48.png

 

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.

0 Upvotes
kvonloesecke
Community Manager
Community Manager

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

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


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !
0 Upvotes
Jelmert
Participant

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

Hey @kvonloesecke 

 

Yes I am 🙂 And im talking about this messsage:

Schermafbeelding 2022-11-22 om 13.33.34.png

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