Cannot show TrustPilot HTML when inserted with JavaScript (jQuery)

Question

If I added the TrustPilot html code directly on the HTML page, it works fine but I needed to insert it with jQuery. I see the HTML code when inserted but it's not displaying.

  $(window).on('load', function () {
    var el = $('#some-element');

    el.html( trustPilotHtml() );

    function trustPilotHtml() {
      var str = "<div " +
        "class='trustpilot-widget' " +
        "data-locale='en-GB' " +
        "data-template-id='123456' "+
        "data-businessunit-id='123456' " +
        "data-style-height='500px' " +
        "data-style-width='100%' " +
        "data-theme='light' " +
        "data-stars='4,5' " +
        "data-schema-type='Organization'>" +
        "<a " +
        "href='https://some-url.com' target='_blank'>Trustpilot</a> " +
      "</div>";
      return $(str);
    }
});

Is the only way of getting the element to display properly is to directly inserted into the HTML without javascript?

score 8 · Accepted Answer · answered Apr 24 '18 at 15:15

8

No it's not the only way.

You should have a bootstrap script in your inside the HEAD part of your HTML (or close to it). This script takes care of initializing all the widgets (TrustBoxes in Trustpilot lingo) that you have in your HTML.

Of cause that doesn't work if you are injecting the HTML dynmically, so it's also possible to call window.Trustpilot.loadFromElement(trustbox); yourself, when if you need to.

Here trustbox is a HTMLElement, you could get by using document.getElementById("some-element") or similar.

Reference: https://support.trustpilot.com/hc/articles/115011421468

answered Apr 24 '18 at 15:15

RckMrkr

985
1
10
14

I never knew about `window.Trustpilot.loadFromElement()`! Thanks! – Sylar Apr 24 '18 at 15:40
Thanks for the link to the docs, it had the React version and full code examples – Syknapse Oct 06 '22 at 15:12

score 3 · Answer 2 · edited Feb 20 '20 at 12:11

The following worked for me on a product list page which returned filtered list via ajax

var element = document.getElementsByClassName("trustpilot-widget");
for(var i=0; i<element.length; i++) {
    window.Trustpilot.loadFromElement(element[i]);
}

On the first page load all product reviews are displayed as expected, but if the page is updated via ajax call (using filters for example) the reviews are lost. Running the above code after ajax, reloads the reviews

Cannot show TrustPilot HTML when inserted with JavaScript (jQuery)

2 Answers2