Note: If you are a developer and want to use CSS to edit your embed, you can do this from the CSS section, and you don't necessarily have to use the other options listed here.


Introduction

Customizing the embed is done completely in Trustmary, so after you have published the code your website, all changes will be automatically applied to your embed.

To get started with your embed:

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

  2. Select the embed you want to edit

  3. Click on the Edit tab

Customization options & editor

The editing tab is where all the changes to the embed can be made. You can find links to all sections in the top of the page or you can navigate to the specific sections by scrolling the page.

Next we'll go through the sections in order.

1. Data

In the Data section you can edit:

  • Order of reviews: Oldest/Most recent/Random

    • This will affect which review will show up first in the embed

  • Comment types: Text/video

    • If you have gathered both video and text reviews you can choose to show all of them, or just one or the other

  • Items

    • Maximum amount of reviews displayed in the widget

  • Surveys

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

  • Show with tags

    • Filter which reviews to show based on tags (tags can be managed in the Reviews section from the navigation bar on the left)

2. Layout

In the Layout section you can edit:

  • View

    • Carousel view or list view. Whether the widget shows reviews as a carousel ("rotating" through the reviews) or as a plain list.

  • Padding

    • Padding around the widget.

  • Background color

    • Background color of the 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

    • Determines for how many seconds is a card shown on the embed.

  • Show dots

    • Displays dots under the reviews so the reviews are easier to navigate.

  • Dot color

    • Defines the color of the dots

  • Show arrows

    • If you want to show navigation arrows on the left and right of the reviews

  • Arrow background color

    • The background color behind arrows

  • Arrow icon color

    • Icon color for the small icon inside the arrow button

  • Center cards

    • Shows the set amount of cards in the center of the embed, with some of the adjacent cards showing from the sides

  • Show cards

    • Determine how many cards do you want to display simultaneously

  • 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

    • Set how many columns there are in the widget

  • Responsive list

    • If the widget is responsive or looks the same in desktop and 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

    • The font you want the text to use

  • 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 around the review cards

  • Card Shadow

    • Determine if individual review cards have shadows and how strong they are

6. Quote

In the quote section you can edit:

  • Quotation marks

    • If the review card shows quotation marks ion it

  • Quotation mark color

    • Which color the quotation marks inside the review card are

  • Quotation mark size

    • Size of the quotation markis on the review card

  • Quotation mark opacity

    • Opacity of the quotation marks

  • Truncate text quote

    • The maximum length after which the text review will shortened

  • Padding

    • Padding of the review card

  • Quote minimum height

    • Minimum height for individual cards

  • Align

    • Alignment of the review text

  • Text size

    • Size of the review text

  • Background color

    • Background color for the individual review cards (overlaps with 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

  • Text color

    • Color of video text

  • Icon color

    • Color of the play icon

  • Circle color

    • Color of the circle around the play icon

  • Circle opacity

    • Opacity of the circle around the play icon

8. Person

In the person section you can edit:

  • Person align

    • Alignment of the persons picture inside the review

  • Top border color

    • Color for the line between the review text/video section and the section with the person's name and other info

  • Person padding

    • Padding for the section that has a name in it

  • Show person's picture

    • Visibility of the picture of the reviewer

  • Use default picture

    • Set a default picture in case there is no personal picture or it is off

  • Default picture URL

    • Use the system default or link an image to show as the default picture

  • Pull picture over quote

    • If you want the picture to be pulled on top of the border between the review and info sections

  • Round picture

    • Set the picture to be round or square

  • Picture size

    • Picture size in pixels

  • Picture shadow

    • Show a shadow behind the picture and determine its strength

  • Person fields

    • Determine which fields you want to show in the review

  • Text size

    • The 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

    • Color of the title text

  • Font weight

    • Title text's font weight

  • Text size

    • Text size of the title text

10. CSS

In the CSS section you can implement custom styles for your embedding. Type or paste your CSS code into the Styles at start of file and Styles at end of file boxes. The changes are saved automatically.

Did this answer your question?