Note: This guide applies to the Starter, Business & Scale plans.
Introduction
In this article we will be taking a look at on how to embed Trustmary's testimonials and surveys to a website when using HubSpot CMS as the content management system. If you're looking for instructions on the same subject but for a different platform, please refer to the other articles in our Help documentation's Integrations section.
Getting the code snippets
Start by navigating to the Widgets section in Trustmary. In there, select a widget or create a new one.
Once in the widget editor, select the Add to website tab at the top of the screen. Here you'll find the code snippets needed to embed the widgets.
What to do with the snippets?
The two snippets of code serve different purposes.
The first snippet, Trustmary tag, is a global script which loads the widgets. This script needs to be installed once, either with Google Tag Manager or inside the head tag of a website. We recommend installing the script with Tag Manager, as scripts installed like this are activated more reliably. For instructions on installing the script to Tag Manager, check out this guide.
The second snippet is the embed code itself. This piece of code loads a
the widget into where it is placed on the site.
Embedding widgets in HubSpot CMS
Optional: Add the header script manually
If you already installed Trustmary tag with Google Tag Manager, you don't need to worry about this step.
If you'd like to install the script (or Tag Manager itself, for that matter) directly to HubSpot, you can follow HubSpot's instructions.
Embedding the widget
Start by navigating to Website under Marketing. From there, select a page into which you want to embed your code. The page can be edited by clicking the Edit button or the title.
In the editor, look for an element in the pane on the left called Rich Text. This is a general purpose text element that also understands code. Go ahead and drag the element from the pane into its place on the page.
After the element is dropped into its place and is active on the editor, look for a drop-down menu called Advanced in the top right corner. From there, click on Source code to jump into the code view.
Here you'll find a text box with the title Edit source code. This is where you can paste the embed code you copied before. After the code is pasted, click Save Changes to save the changes.
You're almost there! Now the only step left is to check the embed works as intended. This can be done by clicking the Preview button in the top right in the editor.