Add Trustpilot html widget to page on UI builder

Luc_Zentar · March 10, 2022, 1:07pm

Hello,

I am trying to add a Trustpilot widget to a page in UI builder. I have to add two snippets of HTML code to the page for this, one in the head and one in the body.

I’ve added the head using custom code and this seems to have worked:

I’ve then added to main HTML snippet in a paragraph on the page:

But it displays as a link rather than the widget:

Trustpilot FAQs suggest this is because the snippet in the head is not firing

It sounds like the bootstrap script hasn’t loaded. The bootstrap script is the first of the two code snippets you need in order to embed a widget on your page.

We recommend placing the script in the <head></head> section of your website’s HTML. If you don’t have access to that, place it in the <body></body> section just before the widget code (the second code snippet). We also have a guide to help you make sure your widget has been correctly implemented, and if it runs in a single-page application.

I have tried to place the code snippet in the body and not head, and that has also not worked.

My questions are:

1 - Is the paragraph the correct way to use the HTML code to display the widget?

2 - Is there a way to place the first snippet higher in the head, a different instuction than appendChild?

3 - Is there any other reason you can see that this isn’t displaying correctly?

Thank you!

App ID = 8518B92E-A6AA-5589-FFA0-B863E4A63F00
Container is frontEnd
Page is SignUp

vladimir-upirov · March 10, 2022, 2:06pm

Hi @Luc_Zentar

In my point of view, would be better to create a new CustomComponent for that

code:

define([
  'https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js'
], () => {

  const customHTML = (`
  <div data-locale="en-US" data-template-id="XXX" data-businessunit-id="XXX" data-style-height="20px" data-style-width="100%" data-theme="dark" class="trustpilot-widget">
  <a href="https://www.trustpilot.com/review/mina.group" target="_blank" data-display="" rel="noopener">Trustpilot</a>
  </div>
  `)

  return function TrustBoxWidget({ component }) {
    const elRef = React.useRef(null)

    React.useEffect(() => {
      const $el = elRef.current
      
      $el.innerHTML = customHTML
     
    window.Trustpilot.loadFromElement($el.querySelector('.trustpilot-widget'));  
   }, [])

    return React.createElement('div', {
      ref: elRef,
    })
  }
});

vladimir-upirov · March 10, 2022, 2:13pm

I just checked it and it works for me

UI Builder - withPaidPlan - Backendless 2022-03-10 16-04-12