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 Shopify as the content management system and web storefront. If you're looking for instructions for a different platform, please refer to the other articles in our Help documentation's Integrations section.

Getting the code snippets

Widgets

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 Rules 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?

Note, that the two snippets of code serve different purposes.

The first snippet, Trustmary tag, is a global script which enables the loading of 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 and with less interference to other components of a site. For the installation process, check out this guide.

The second snippet is the embed code itself. This snippet loads a widget into where it is placed on the site.

Surveys

For surveys, the embed code can be found in the Collect tab of the survey in question. Once there, scroll down to the end of the page and you will see a section titled Embed to Website. Click Copy under the code snippet and you're ready to move to the next stage.

Embedding the code in Shopify

Start by opening up the admin page of Shopify and navigate to Themes under Online Store on the left. Once there, click on the Customize button on your selected theme to start editing your site.

In the editing view, you can see an overview of your website's structure on the left. In the overview, look for an Add section button with a plus sign next to it. From the menu that pops up, select Custom content.

Add a block to the custom content section you created by clicking Add block with the plus sign next to it and select Custom HTML in the menu that pops up.

Click the newly created element to get into its settings. Once in the settings, paste the embed code that you copied earlier into the text box. You can also set the width of the element under the text box to have the embed fit your website prefectly. When the code is in its place, click Save in the top right corner.

After the page is saved, you can see the embed on the page preview. The embed should look something like the one in the image below. If the embed moves normally and responds to clicks, you're all set!

If the embed is non-responsive, not visible or not moving, please check that the embed code matches the one diplayed in Trustmary and that JavaScript is enabled on your browser.

Did this answer your question?