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?
- Open your Trusted Shops plugin.
- Check that your plugin has the "Widgets" tab.
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.
- Log in to the eTrusted Control Centre.
- Click on the star ("Reviews) () in the main navigation menu. Then click on "Marketing" ().
- Open the "Widgets" tab ().
Select a Product Review widget. Then click the "Create" button for the widget you want. The configuration mode for the widget will then open.
- Select the language you are using for your website.
- 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.
- Are you currently configuring the "Full Review List" widget? Then enable rich snippets if desired.
- 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.
- Tick "Show images" if product photos uploaded by your customer should be displayed in the widget.
- Click on "Create widget code". The overview "How to integrate the widget into your website" will open.
- Use the drop-down menu to select the product identifier you are using.
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
Would you like to integrate your widget code into the HTML of your website yourself? Then follow these steps:
- Click the document icon in the upper code box ("Initialisation") to copy the code snippet to your clipboard.
- In your webpage HTML, open the header section. Insert the code snippet into the header section.
- 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.
- 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.
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.
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.
- 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.
- 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.
- Return to the overview "How to integrate the widget into your website". Click on "Complete widget creation".
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?