Note: This guide applies to the Business, Automate, and Pro plans. For Solo and Starter, check out their dedicated article.


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

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

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

Embedding the code in BigCommerce

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.

For the manual installation of the script, find Script Manager under Storefront in the menu bar. In Script Manager, select Create a Script.

Give the script a name to tell it apart from others. Then select the following settings:

  • Location on page – Head

  • Select pages where script will be added – All pages

  • Script category – Essential

  • Script type – Script

    • When you select this one, a text box appears. Paste your Trustmary Tag into the text box.

After the settings are ok, hit Save at the bottom.

Embedding to front page and similar pages

Now that you have your embed code, open up your site by clicking View Store from the BigCommerce dashboard.

From the website's preview, click on Design this page in Page Builder in the top right corner. This opens up the editing mode, in which you can add elements to the site.

Once in the page builder, locate the HTML element in the toolbar on the left and simply drag and drop the element into its place (the highlighted spots in the preview).

The HTML element's settings automatically open in the toolbar on the left. This is when you will need the embed code that was copied from Trustmary: paste it into the text box and click Save HTML on the bottom of the toolbar.

The HTML element is now complete. Now, just click Publish or Save on the top right corner of the screen, and the changes will be applied to your site.

After saving, you can instantly see you embed in the preview. Here you can verify it looks allright and responds normally to clicks.

And that's about it, you've succesfully embedded testimonials onto your site!

Order confirmation ("thank you") page

With the order confirmation page the embedding process gets a bit more technical. The page is not accessible directly through the Page Builder, but through the HTML files of the currently selected theme.

First, to backup all changes and ensure your website keeps running, BigCommerce requires you to make a copy of your current theme files. To do this, navigate to My Themes under the Storefront menu. Here the first thing you see is your current theme. Click on the drop-down menu labeled Advanced, and select Make a Copy from the list.

Your copied theme appears in the My Themes section below the previous one. Now, go ahead and click the three dots on the right side of the theme, and select Edit Theme Files.

Now this part might look intimidating, but it isn't really easy to break something here. So don't worry too much!

Start by finding the templates folder in the navigation pane on the left. From there, continue to pages and scroll down to find the order-confirmation.html file. Click it open, paste your code in somewhere between the header and footer sections. In this case the code was pasted below checkout.order_confirmation_content, to have the embed appear below everything else.

After the code is in, go ahead and click Save file in the bottom right.

Congratulations, the embed is now in its place and visible to all your customers!

Did this answer your question?