HubSpot

HubSpot offers a full platform of marketing, sales, customer service, and CRM software — plus the methodology, resources, and support — to help businesses grow better. Get started with free tools, and upgrade as you grow.

Table of Contents

Embedding CTA buttons in a Single Page App with support for I18N and font icons

You can create and embed CTA buttons following this guide easily for static sites like Wordpress, but not for a SPA like AngularJS. Things to note:

Load the main script just once

Include <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script> only once in the HTML body.

Use hidden feature: onCTAReady

If you prettify https://js.hscta.net/cta/current.js you will find that on rendition of the actual CTA button it will invoke a callback onCTAReady.

Change parts in the embed code:

<script type="text/javascript">hbspt.cta.load('your-hs-id', 'your-cta-id');</script>

to:

<script type="text/javascript">
hbspt.cta.load('your-hs-id', 'your-cta-id', {
  onCTAReady: function onCTAReady() {
    var ctaBtnId = 'your-cta-id';
    // this el is generated by hubspot sdk
    var anchorEl = angular.element('#hs-cta-' + ctaBtnId + ' a');

    if (anchorEl.length) {
      // use your preferred I18n library
      anchorEl.html(I18n.gettext('Your CTA'));
      anchorEl.attr('title', I18n.gettext('Your CTA title'));
      // add icon if you wish
      anchorEl.prepend('<i class="fa fa-home"></i>');
    }
  }
});
</script>