12 Sep 2018

How to integrate HubSpot CRM with your website

Your website is often the first impression a person will have of your company. If they want to engage more deeply with you, you need to provide a way for them to do that. But if that information is being collected in a separate system rather than your CRM, you might never see it. Having all customer information collected in a single place is a key benefit of HubSpot CRM.

So if you’ve just invested in HubSpot CRM, you’ll want to ensure it’s integrated with your website so that you can start capturing website visitors and all those valuable analytics.

To integrate HubSpot CRM with your website you'll first need to install the HubSpot tracking code on your non-HubSpot pages.

Please note: The HubSpot tracking code is installed automatically on all of your HubSpot-hosted pages. But if you're not hosting your full site with HubSpot, you'll need to install the tracking code manually on your website. Read on to find out how.

How to install the HubSpot tracking code

First you’ll need to navigate to the tracking code in your HubSpot account:

  • In your HubSpot account, click the settings icon settings in the main navigation bar
  • Select Reports & Analytics Tracking from the left sidebar menu
  • Click Copy below the Embed code field
It will look something like this:

HubSpot-tracking-code

Next, you’ll need to paste the code into every page of your site. The code should be pasted immediately before the </body> tag in the HTML code for each page of your site.

Unsure how to do this? Get in touch >

Because every website/CMS is structured differently, the steps you need to take to access your HTML code will vary slightly. So be sure to consult your IT department or get in touch to find out more.

Once you’ve installed the tracking code on your website, anytime a visitor submits their information via a HubSpot form, it’ll go directly into your CRM, right alongside all your other contacts.

Joining up your HubSpot CRM and website will help you take advantage of all the readily available data, helping you monitor:

  • How well your website is generating traffic and leads
  • What you can do to improve your website traffic
  • Sophisticated lead intelligence that enables you to turn more website leads into customers

If you need any more information on anything discussed above, Request a free CRM audit today. We’ll be happy to answer any questions you might have, as well as identify any areas you can improve on to get more value out of your CRM.

HubSpot CRM sales consultation

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.


Button
We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:
<a class="gate-trigger-button" href="#" id="How to integrate HubSpot CRM with your website - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>


Survey
Instead of using a button, you can ask people a what their intent of being on the blog is. Here's an example.
<h3 style="text-align:center;">Ready to read the post?</h3>
<p style="text-align:center;">Great, just let us know why you're here today</p>
<ul id="survey">
<li><a href="#" id="How to integrate HubSpot CRM with your website">Answer One</a></li>
<li><a href="#" id="How to integrate HubSpot CRM with your website">Answer Two</a></li>
<li><a href="#" id="How to integrate HubSpot CRM with your website">Answer Three</a></li>
<li><a href="#" id="How to integrate HubSpot CRM with your website">Answer Four</a></li>
<li><a href="#" id="How to integrate HubSpot CRM with your website">Answer Five</a></li>
<li><a href="#" id="How to integrate HubSpot CRM with your website">Other</a></li>
</ul>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>
</ul>


Form
We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g. https://app.hubspot.com/forms/145288/ee2dd282-1afb-4040-b67a-6ea2fe6e32cc/edit:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('How to integrate HubSpot CRM with your website');
}
});
</script>


CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:
<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - How to integrate HubSpot CRM with your website"><img alt="Title of the CTA" src="https://cdn2.hubspot.net/hubfs/145288/hub_generated/resized/21421668-c868-457c-8f68-142438f1e246.png" title="Title of the CTA"></a>
</div>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('How to integrate HubSpot CRM with your website');
}
});
</script>
</div>

This is the rest of the blog

When the page loads, or when it is being edited, this content will appear. When the page is loaded on the blog, the content will be hidden by the script until such times the trigger button is clicked or the trigger form is completed.

If you're not using this section then you should delete the text in here.

Topics: Sales, Hubspot

Blog Comments