How to insert your widget’s code into your site?

Author: Molnár Gábor

In order to display your widgets, all you have to do is paste a small, unique code to your website.

1. Get your widget’s code

  • First create a new website widget in Widget configurator or select one of your saved widget.
  • After your widget is configured, all you have to do is click Save and get code at the top righ corner.
  • Copy one of source code.

2. Insert your code

The first way to insert code is the general way, add it to your website <body> where you would like to display your Trustindex widget(s).

  • First find a good place for widget on your website where you want to display it. It is all your decision.
  • Open the website’s source code with text editor.
  • Make sure that you paste the widget’s code as HTML.
  • Save your file.
  • Check your webpage. That’s all.

For WordPress

If you are going to use your widget on a WordPress website and you have at least one Trustindex plugin installed (https://wordpress.org/plugins/search/trustindex/)

#Shortcode
  • Copy the WordPress shortcode.
  • Open your page in edit mode.
  • Paste the shortcode where you want to display your widget.
  • Save your page.
#Classic
  • Just use the “Insert shortcode” button (over the editor, next to “Add media”)
  • Insert the previously copied code
  • Save you page
#Divi
#Beaver builder

  • Edit your page/post with Beaver builder.
  • At the top right corner click the + sign then grab the <> HTML section to the place where you want to display the widget.
  • Paste the widget source code to the popup window.
  • Save your page.

#Elementor
  • If you have Elementor all you have to do is download our extension from https://wordpress.org/plugins/review-widget-addon-for-elementor/
  • Edit your page/post with Elementor.
  • In the top left corner search for Trustindex under Elements.
  • Drag the widget to the site where you want to display your widget.
  • Select your widget type then the widget.
  • Save your page.
#Gutenberg
  • Search for a new content type, name “shortcode”
  • Insert the previously copied code
  • Save you page

For Shopify

  • Click Online Store > Themes.
  • Click Customize button for your current theme.
  • At the bottom of left menu select Add section > Custom content.
  • In custom content click Add block > Custom HTML.
  • Paste the Trustindex source code to the input field.
  • Save your page.

For Joomla

  • Open your module or article in editor mode.
  • In the top right corner select Code tab.
  • Paste your widget’s source code to the right place.
  • Save your page.

For Wix

  • Open your page in editor mode.
  • On the left menu Add > Embed > Custom Embeds > Embed a Widget
  • Click Enter code then select Code uder What do you want to add?
  • Paste your generated code from Trustindex to the textarea between <div> ... </div> tags
  • Example code: <div> <script defer async src='https://cdn.trustindex.io/loader.js?111fa111950c622dern267v531'></script> </div>

For AMP

Here is a description for how to insert code to AMP compatible site: https://www.trustindex.io/what-is-amp/

Alternative method (ReactJS, …)

You can use this way when

  • you are using some special JS Framework, ReactJS, …
  • or you can insert external javascript files only into your <head> section
  • or using many widgets on the same page and want to minimize the number of <script> tags…

So, convert your copied HTML code. Let’s see it in an example:

  1. Get the copied widget code (from Trustindex’s system after saving). Example: <script defer async src='https://cdn.trustindex.io/loader.js?111fa111950c622dern267v531'></script>
  2. Create a <script> from that and put it into the <head> tag:
    <script defer async src='https://cdn.trustindex.io/loader.js'></script>
  3. And create a <div> from that and place within <body></body> tags, where you want the widget to be shown:
    <div src='https://cdn.trustindex.io/loader.js?111fa111950c622dern267v531'></div>
  4. Save your file.
  5. Check your page.

Szólj hozzá!

Category: "Step by step" tutorials