1. eTrusted Help Centre
  2. Marketing
  3. Widgets

How do I integrate Product Review Widgets on my website?

The Integration of a Product Review Widget works like any other Widget. There is just one big difference: You need to provide product identifiers.

Also, if you would like to know how the widgets appear on your website, please have a look at this article: How do widgets look on my website?

What are product identifiers?

Product identifiers are a series of numerical or alphanumerical digits that identify a specific product. 

eTrusted Product Review Widgets support the most commonly used ones:

  • SKU (Stock Keeping Unit): SKUs are unique IDs assigned by the merchant.
  • GTIN (Global Trading Item Number): GTINs uniquely and globally identify your products based on international standards. Examples include ISBN or EAN.
  • MPN (Manufacturer Part Number): MPNs uniquely and globally identify products. The product’s manufacturer assigns them.

Can I use more than one product identifier?

Yes, you can. And for products with different variants, you even have to.

For example: Let’s say you sell T-Shirts in different sizes. Provide for each size (e.g. S, M, L)  a product identifier. You can do this by adding one product identifiers after the other and dividing them by comma. 

Please make sure to provide at least one product identifier. If you don’t choose one, your widget will not be displayed.

How do I add a Product Review Widget to my website?

One question first: Have you integrated your Trusted Shops products into your website using a plugin? With many of our plugins, you can integrate widgets in just a few clicks, even if you don't have much technical knowledge. So, it's a good idea to first check whether your plugin supports widget integration:
 
  1. Open your Trusted Shops plugin.
  2. Check that your plugin has the "Widgets" tab.
Do you have the "Widgets" tab in your plugin? Then follow these instructions: Display Service and Product Reviews in your shop
Don't have the "Widgets" tab in your plugin? Then continue with the instructions here.

Step 1: Generating a widget code

All available Product Review widgets can be found in the Widget Library.

  1. Log in to the eTrusted Control Centre.
  2. Click on the star ("Reviews) (01_16x16.png) in the main navigation menu. Then click on "Marketing" (02_16x16.png).
  3. Open the "Widgets" tab (03_16x16.png).
    01_EN.png

  4. Select a Product Review widget. Then click the "Create" button for the widget you want. The configuration mode for the widget will then open.
    02_EN.png

  5. Select the colour scheme in which the widget should be displayed:
    - Select "Light" if the widget should always be displayed in the standard colour scheme.
    - Select "Dark" if the widget should always be displayed in dark mode.
    - Select "OS default" if you want your customers’ dark mode settings to determine whether or not the widget is displayed in dark mode.
    03_EN.png
  6. Would you like to use a different colour for your star ratings and the bars in the full review list? Then, click on the "Accent colour" field.
    04_EN.png
    A drop-down menu opens. Select one of the suggested colours (01_16x16.png) or enter the hexadecimal value of the desired colour in the input field (02_16x16.png). Then, click on "Apply" (03_16x16.png).
    05_EN.png
  7. Do you want to use your website's font in the widget? Then tick "Apply your website’s font".
    06_EN.png
  8. Are you currently configuring the "Full Review List" widget? Then enable rich snippets if desired.
    07_EN.png
Rich snippets are enhanced search results that provide additional information about the content of a web page. They can be used by search engines to visually highlight the actual search result. The information required for this comes from structured data stored in the source code of the page. By enabling rich snippets, the widget provides this information to search engines.
  1. Specify the widget’s behaviour for products that have not yet received a review:
    - Tick "Hide widget when no reviews are available" if the widget should be completely hidden.
    - Do not tick "Hide widget when no reviews are available" if grey stars should be displayed.
    08_EN.png
  2. Tick "Show images" if product photos uploaded by your customer should be displayed in the widget.
Product photos can be displayed in the following widgets: Review Carousel, Customer Voice, Full Review List.

09_EN.png

  1. Click on "Create widget code". The overview "How to integrate the widget into your website" will open.
    10_EN.png
  2. Use the drop-down menu to select the product identifier you are using.
    04_EN.png

You have now successfully created your widget code. Now you need to integrate the widget code into your website.

Step 2: Integrating your widget code into your website

To display Product Review widgets on your website, HTML and JavaScript code must be integrated into the header and body of your website's HTML code. You can find the code snippets you need for this in the overview "How to integrate the widget into your website", which will open after your widget code has been generated.

Don't have the tech knowledge to insert your widget code into your webpage's HTML? Then click "Copy all instructions". Then, simply open up a text document of your choice and paste the widget code into the text document. Then, send the text document to your website administrators.
05_EN.png

Would you like to integrate your widget code into the HTML of your website yourself? Then follow these steps:

  1. Click the document icon in the upper code box ("Initialisation") to copy the code snippet to your clipboard.
    06_EN.png
  2. In your webpage HTML, open the header section. Insert the code snippet into the header section.
The JavaScript code for the head is only needed once, even if you implement more than one widget on your website.
  1. Return to the overview "How to integrate the widget into your website". Click the document icon in the middle code box ("Embed widget") to copy the code snippet to your clipboard.
    07_EN.png
  2. Open the body section within your website's HTML code. Paste the copied code snippet into the body section where you want to put the widget.

  3. In the code snippet you just inserted, replace the value YOUR-DATA-SKU or YOUR-DATA-GTIN or YOUR-DATA-MPN with the product label of the product whose reviews you want to display in the widget.

Do you want ratings for multiple product variants (e.g., different clothing sizes of the same garment) to be displayed in the same widget? Then you can insert multiple product labels at the location shown in Step 5. Separate the individual product labels with a comma.
Below, you can see an example of how the Full Review List widget’s code could look like.
The example shows a product with three different product variants. You can simply add them (0055573.001, 0055573.002, 0055573.005) dividing them by a comma. SKUs are the product identifiers:
<!-- Begin eTrusted widget tag -->

<etrusted-widget data-etrusted-widget-id="wdg-f6e1e50c-b07c-4a92-85fb-14b6feab9ea6" data-sku="0055573.001,0055573.002,0055573.005"></etrusted-widget>

<!-- End eTrusted widget tag -->

Steps 6 and 7 below are optional steps for the "Full Review List" widget. If you are including another widget, jump to step 8.

  1. Return to the overview "How to integrate the widget into your website". The widget "Full Review List" gives you the option of integrating a small star preview at any point on the product page, which links to the main widget. Would you like to use this option? Then click the document icon in the lower code box ("Widget extensions") to copy the code snippet to your clipboard.
    08_EN.png
  2. Open the body section within your website's HTML code. Then simply paste the code snippet into the body section where you want to put the star preview.
  3. Return to the overview "How to integrate the widget into your website". Click on "Complete widget creation".
    09_EN.png

You have now successfully integrated the widget into your website.

Are you showing your stars on Google & Co. yet? Get more info here:
- What is the Google Integration?
- Why is it a good idea to optimise my overall rating on other review platforms?

Was this article helpful?

5 out of 10 found this helpful

Related articles

On this page