All Collections
Embeds (legacy)
Embed reviews on your site (legacy)
Embed reviews on your site (legacy)
Creating, publishing and editing an embedding of reviews
Santeri avatar
Written by Santeri
Updated over a week ago

In this article we will take a look at Trustmary's embed tool. With this you can embed reviews that you have gotten via Facebook, Google or Trustmary to your website. Displaying testimonials from satisfied customers can in turn can drive up sales.

This article is divided into three parts:

  1. Creating the embed in Trustmary

  2. Publishing that embed to your website

  3. Editing embed

Creating the embed in Trustmary

  1. Navigate to Embeds section from the navigation bar on the left

  2. Click New embed code to create new embed

  3. From the next view you can choose basic settings for the embed including:

    • Customer/employee reviews

    • Filtering reviews by surveys

    • Template you want to choose or copying an existing embed

    • Carousel/list view

    • Max amount of reviews

    • Embed name

    • Embed title

    All of these excluding the template or copying existing embed can be changed later.

  4. Move forward by clicking "Create an embedding", from the bottom of the page.

  5. Now you will see a screen which has the embed code based on the settings you have chosen. If you are happy with the functionality and design of the embed, you can just copy the code by clicking "Copy embed code" and move on to the next section.

Publishing embed to your website

Publishing an embed on your website is basically just copying the code as instructed above and pasting it to the website code to the part of the site you want to show it on. How this is done depends on your CMS, but below is one example of a WordPress site.

First of all the embed-code should be something like this:

<script>(function (w,d,s,o,f,js,fjs) { if(d.getElementById(o)) return; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'trustmary-embed', 'https://embed.trustmary.com/embed.js')); </script> <a href="https://www.trustmary.com/review/x-MD3ww3s" data-trustmary-embed="xxxxxxxxx">Trustmary Reviews</a><br>

After you have the code copied from your Trustmary account you can navigate to your website and login with admin details and copy the code to the section you want to add it. Below are the exact steps for most WordPress sites:

  1. Navigate to www.yourwebsite.com/wp-admin (replace "yourwebsite.com" with the actual website of yours)

  2. Login to the admin dashboard

  3. Navigate to "Pages" or "posts" from the left navigation (depending on where you want to embed the code)

  4. Choose the page or post from the list that you want to use the embed on and click "edit"

  5. Choose "text" from the top right corner of the wysiwyg editor (seen on the right corner from the picture below

  6. Scroll down to the section you want to embed the reviews to and paste the code.

  7. Click update/publish from the right bar

The instructions above only apply to a very basic WordPress setup. A website built with different visual builders or themes might have relatively big differences to this in the steps 5 and 6.

Customizing the embed

Customizing the embed is done completely in Trustmary so after you have published the code your website, you dont have to touch anything in the website to make changes to the embed. To edit the embed:

  1. Start by navigating to "Embeds" from the left navigation

  2. Choose the embed you want to edit

  3. Click "edit" tab

Now you are in the editing tab where all the changes to the embed can be made. You can find links to all relevant sections in the top of the page as seen below or you can navigate to the specific sections by scrolling the page.

Note: We'll go through what can be edited section by section, but first, if you are an advanced developer, you can also edit the design from the CSS section. So if you want to just edit the designs with CSS, you can jump straight to that section.

The "Carousel" will change to "List" if you change the view of the widget to list. So, if you have chosen list view, don't be confused that there is a minor difference in the sections.

1. Data

In the data section you can edit:

  • Order of reviews: Oldest/Most recent/random - This will affect which review will show first in the embed

  • Comment types: Text/video - If you have gathered video and text review you can choose to show just video reviews or just text reviews from here

  • Items - Maximum amount of reviews in the widget

  • Surveys - Filter what reviews to show based on from which surveys the reviews have been gathered from

  • Show with tags - Filter what reviews to show based on tags (tags can be managed in the "reviews" section from the left navigation)

2. Layout

In the Layout section you can edit:

  • View: Carousel view/list view. Whether the widget shows reviews as a carousel or as a list

  • Padding: Padding of the whole widget

  • Background color: Background color of the whole widget

  • Content width: Maximum width of the content inside the widget

3. Carousel

In the carousel section you can edit:

  • Animation: Slide/fade, changes the way cards move in the carousel

  • Autoplay (whether or not cards change automatically)

  • Autoplay speed: How many seconds does a card stays still

  • Show dots: If you want it to show "dots" under the review, which will allow the customer to navigate reviews and see how many there is in total

  • Dot color: defines the color of the dots

  • Show arrows: If you want to show arrows left and right of the review

  • Arrow background color: Background color behind arrows

  • Arrow icon color: Icon color for the small icon inside the arrow button

  • Center cards: //Instructions coming later//

  • Show cards: //Instructions coming later//

  • Responsive carousel: Whether or not you want the carousel to scale according to the room it has on the webpage

4. List

In the list section you can edit:

  • Columns: how many columns there is in the widget

  • Responsive list: if the widget is responsive or looks the same in desktop in mobile

5. Card

In the card section you can edit how the reviews show up inside the widget. You can edit:

  • Card maximum width: Max width for individual reviews

  • Font family: Font you want the text to be on

  • Border color: Color of the review cards borders

  • Background color: Background color for the individual review cards

  • Text color: Text color for the name of the person who gave the review

  • Border radius: The size of the border

  • Padding: Padding of the review card

  • Card Shadow: No shadow/light/medium/strong to define if individual reviews show shadows

6. Quote

In the quote section you can edit:

  • Quotation marks: If the review card shows " in it

  • Quotation mark color: Which color are the quotation marks inside the review card

  • Quotation mark size: size of the " in the review card

  • Quotation mark opacity: opacity of the "

  • Truncate text quote: You can define maximum length after which it will just end with ...

  • Padding: Padding of the review card

  • Quote minimum height: Minimum height for the individual card

  • Align: Alignment of the review text

  • Text size: Size of the review text

  • Background color: Background color for the individual review card (overlaps with 5. card section's similar option)

  • Text color: Color of the review text

7. Video comment

In the video comment section you can edit:

  • Video minimum height: Minimum height of the video widget

  • Background color: Filter color on top of the video thumbnail

  • Opacity: opacity of the filter color defined above

  • Text color: Color of video text

  • Icon color: Color of the play icon

  • Circle color: color of the circle around play icon

  • Circle opacity: opacity of that circle around the play icon

8. Person

In the person section you can edit:

  • Person align: Alignment of the person picture inside the review

  • Top border color: color for the line between the review text/video section and the section which has a person's name and other info

  • Person padding: Padding for the section that has a person's name in it

  • Show person's picture: If you want to show the picture of the reviewer

  • Use default picture: If you want to use a default picture in case there is no personal picture or it is off

  • Default picture URL: use system default or insert image to show as default picture

  • Pull picture over quote: If you want the picture to be pulled on top of the border between review and person info sections

  • Round picture: If you want the persons picture to be round or square

  • Picture size: picture size in pixels

  • Picture shadow: no shadow/light/medium/strong for showing shadow behind the picture

  • Person fields: What fields you want to show in the review

  • Text size: Size of the text in the personal info section

  • Background color: Background color in the personal info section

  • Text color: Color of the text in the personal info section

  • Text color name: Color of the name in the personal info section

9. Title

In the title section you can edit:

  • Title text: Title text/headline that shows on top of the widget

  • Align: Alignment of the title text

  • Font family: Font family for the title text

  • Text color: Text color of the title text

  • Font weight: Font weight of the title text

  • Text size: Text size of the title text

10. CSS

At the CSS section you can make all custom changes you want with CSS.

Did this answer your question?