Skip to content

Widget

Our widget enables you to show your reviews directly on your webshop. The color and other physical properties are configurable to match your webshop's style. We strongly recommend to use the widget configuration in the dashboard, also as a visual tool to aid the programmatic configuration.

Code

<iframe
    src="https://dashboard.trustprofile.com/webshops/widget_html?id=<webshop's ID>&layout=new_default&theme=dark&color=%23ea0e8b&show=yes&view=slider&amount=6&width=manual&width_amount=280px&height=250px&interval=5000&language=nld"
    scrolling="no"
    class="wwk-widget-iframe wwk-widget--new_default wwk-widget--new_default--dark"
    style="border: 0; height: 250px!important; width: 280px!important;"
>
</iframe>

The code places the widget on the location where the code is placed. You should replace <webshop's ID> with the ID of the webshop for which the widget should be displayed. The width and height of the iframe have to be changed, based on widget's dimensions. They must be the same as the parameters. You can modify your widget's styles with adding a css parameter. Find it in the table for more information.

Parameters

id (required)

  • The ID of the webshop for which you want to show the widget.
  • Layouts: all

layout (required)

  • The layout of the widget- "new_default", "new_badges" etc.
  • Layouts: all

theme (required)

  • The type of theme/background - "light" or "dark".
  • Layouts: new_defaultnew_badgesnew_button-textnew_button-starsnew_button_logo-scorenew_button_logo-smnew_balloon

color (required)

  • The color of some prominent elements of the widget.
  • Layouts: new_defaultnew_badgesnew_button-textnew_button-starsnew_button_logo-scorenew_button_logo-smnew_balloon

show (required)

  • Displaying of customer reviews - "yes" or "no". When disabled, the widget is shortened in height.
  • Layouts: new_default

view (required)

  • The method with which the customer reviews are shown - "view" or "list".
  • Layouts: new_default

amount (required)

  • The amount of customer reviews to be shown.
  • Layouts: new_default

width (required)

  • The widget's width; either filling ("auto") or fixed/percentual ("manual").
  • Layouts: new_defaultnew_badgesnew_button-textnew_button-starsnew_button_logo-scorenew_button_logo-smnew_balloon

width_amount (required)

  • The width in case width has been set to "manual".
  • Layouts: new_defaultnew_badgesnew_button-textnew_button-starsnew_button_logo-scorenew_button_logo-smnew_balloon

height (required)

  • Height of the widget in pixels.
  • Layouts: all

interval (required)

  • The amount of milliseconds before switching to the next customer review when view is set to "slider".
  • Layouts: new_default

language (required)

The language of the widget. The following values can be used:

  • "nld" (Dutch)
  • "eng" (English)
  • "deu" (German)
  • "fra" (French)
  • "spa" (Spanish)
  • "ita" (Italian)
  • "hrv" (Croatian)

You need a multi-language package and have the language enabled for your webshop. Otherwise, it defaults to English.

  • Layouts: new_defaultnew_badgesnew_button-textnew_button-starsnew_button_logo-scorenew_button_logo-smnew_balloon

css (optional)

With this parameter you can add your own CSS to the widget without changing the styles of your website - CSS or URL.

There are two ways to do this:

  • Using CSS rules. Add as many rules as you want using the standard CSS syntax. Example: css=body{background:blue;}

  • Import a CSS file, e.g.: css=https://mywebsite.com/custom-widget.css

Note: In most cases you should add "!important" for every rule.

  • Layouts: all