How to add widgets to my website?

In eTrusted you have several modern widgets at your fingertips which you can use to win over visitors of your website.

Trust is the most important currency on the Internet. By showing your positive overall rating in a clearly visible manner on your website, you inspire trust and thereby increase your sales.

Where can I browse available widgets?

All available widgets can be found in the widget library.

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

There you can choose between different widget variants and also customise each widget to your needs.

Within the widget library you can see a preview of each widget. So you can decide which widget is best suited for your website and where it can be placed most effectively.

Each widget is already optimised for desktop and mobile, so you don't have to worry about displaying it correctly on your users' devices. The code of our widgets covers two display variants: One is optimised for smaller smartphone displays, the other takes full advantage of a desktop resolution.

You would like to know how widgets look like on your website? Find it out here:
How do widgets look like on my website?

How does the widget configuration work?

Step 1: Generating a widget code

1. Follow the instructions above to open the "Widgets" overview.
2. Select a widget. Then click the "Create" button for the widget you want. The configuration mode for the widget will then open.
   

3. 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.
   
4. 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.
   
   A drop-down menu opens. Select one of the suggested colours () or enter the hexadecimal value of the desired colour in the input field (). Then, click on "Apply" ().
   
5. Do you want to use your website's font in the widget? Then tick "Apply your website’s font".
   
6. Tick "Show images" if product photos uploaded by your customer should be displayed in the widget.

7. Are you currently embedding the "Customer Voice" widget? Then first click on the arrow in the upper right corner of the "Highlight a quote" area. A list with your four and five-star reviews opens.
   
   
   Should only reviews from customers who have indicated their names be displayed in this list? Then check the box "Show only reviews with names".
   
   Select the desired review.
   
   Use the blue text highlighter to select which part of the review comment should be displayed in the widget.
   
   
   Your client’s name is automatically anonymised by the widget. Nevertheless, your customers may subsequently object to the prominent display of their review on your website.
   In this case, develop a process to be able to quickly remove the affected review from your website. Tip: Simply create a new "Customer Voice" widget and replace the old widget code in your website with the new one.

8. Click on "Create widget code". The overview "How to integrate the widget into your website" will open.
   

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 widgets on your website, you need to include HTML and JavaScript code in the head and body of your website HTML. 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.

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

1. Click the document icon at the top of the code field to copy the code snippet to your clipboard.
   
2. In your webpage HTML, open the header section. Insert the code snippet into the header section.

3. Return to the overview "How to integrate the widget into your website". Click the document icon in the lower code box to copy the code snippet to your clipboard.
   
4. 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.
5. 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.

How long is the code active?

When you have generated the code and finished configuring the widget, you will find the created widget in the "Manage my widgets" overview. You can access the overview by clicking "Manage my widgets".

The JavaScript code is active permanently, regardless of whether you have already implemented it or not. This means you can take your time with the implementation.

If something didn't work with copying the code, that's no problem either. You can simply copy the code from the active widget again. To do this, click the "View code" button on the widget you want.

The code is deactivated if you remove the widget from your active widgets by clicking the "Delete" button. Until you remove the code from your website HTML, an empty area will be displayed at that position.

What you need to know when removing widgets, read here:
How to remove a widget from my website?

Why is the code snippet for the website header the same for each widget?

The JavaScript code that you have to implement in the head of your website is only needed once. Therefore, for the implementation of each additional widget it is sufficient to insert the HTML code / DIV container for the widget at the right place in the body of the website.

This has the advantage that even people without administrative rights can add widgets, as long as they are allowed to edit website content. Your marketing team can therefore act independently after the initial implementation of the JavaScript snippet. Widgets are therefore already visible to your website visitors after a few minutes.

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?