Leveraging Trustpilot TrustBoxes within a Next.js environment

I'm currently implementing a Trustpilot TrustBox into a Next.js application.

Inside my componentDidMount, I have the following code:

 var trustbox = document.getElementById('trustbox');
 window.Trustpilot.loadFromElement(trustbox);

In the Head section of my app, I include:

<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>

And in my HTML markup:

<div id="trustbox" className="trustpilot-widget" data-locale="en-GB" data-template-id="XX" data-businessunit-id="XX" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="5" data-schema-type="Organization">
    <a href="https://uk.trustpilot.com/review/XX" target="_blank">Trustpilot</a>
</div>

Initially, this setup works fine with hot reload. However, on a fresh page load, it breaks and throws the error:

Cannot read property 'loadFromElement' of undefined

Any suggestions on how to resolve this issue?

javascriptreactjsnext.jstrustpilot

Answer №1

Finally cracked it! Here's the solution: add the following code to the componentDidMount function to make sure the external JavaScript is loaded first.

componentDidMount() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js";
    script.async = "true"
    document.head.appendChild(script);
    script.onload = function () {
        var trustbox = document.getElementById('trustbox');
        window.Trustpilot.loadFromElement(trustbox);
    };
}

Hopefully this will assist anyone facing a similar issue!

Answer №2

Just a heads up for those reading this in the future: Trustpilot has recently published documentation for single page apps which can be accessed here

I ran into an issue where nothing was showing up even after following their official instructions, only to realize that (at the time of writing this) their widget doesn't work on the Brave browser...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to access the chrome://webrtc-internals/ variables through an API in JavaScript?

I couldn't find any information about how to access the logged variables in chrome://webrtc-internals/ on google. There is not even a description of the graphs available there. I am specifically interested in packetsLost, googCurrentDelayMs, and goo ...

javascriptgoogle-chromewebrtcgoogle-chrome-apppeerjs

Tips for formatting a lengthy SQL query in a Node.js application

Currently, I am facing a challenge with a massive MySQL select query in my node.js application. This query spans over 100 lines and utilizes backticks ` for its fields, making me uncertain if ES6's multi-line string feature can be used. Are there any ...

javascriptmysqlnode.jsecmascript-6

How to interrupt a JQuery animation and restart it from the middle?

Currently, I am tackling my first JQuery project and facing a challenge. As the user mouseleaves the .container, the animation does not reset but continues as if they are still within it. My goal is to have the animation revert in reverse if the user decid ...

javascriptjqueryhtmlcss

"Enhancing the speed of the JavaScript translate function when triggered by a scroll

I am facing an issue with setting transform: translateY(); based on the scroll event value. Essentially, when the scroll event is triggered, #moveme disappears. For a live demonstration, please check out this fiddle: https://jsfiddle.net/bo6e0wet/1/ Bel ...

javascripthtml

A guide on retrieving information from a JSON file in Vite with ReactJS

Note vitejs build tool is utilized for creating a reactjs-app. Question During development, I can successfully access data.json on the server. However, when it comes to production, I encounter an issue where data.json cannot be retrieved. How can this be ...

reactjsjsonfetchvite

What is the best way to retrieve a JSP parameter dynamically or how can one create a JSP parameter on the

Currently learning JSP and ajax simultaneously. In the process of creating a dynamic tab that can be added or removed using these steps. Looking to pass parameters from controller to the content area of the newly added tab. 1. When clicking on the &apos ...

javascriptjqueryajaxjsp

Using AngularJs to have two ui-views on a single page

As a beginner in AngularJs, I encountered an issue with having two ui-views on the same page. When I click a button to show the view for goals, both the form for goals appear in ui-view 1 and ui-view 2 simultaneously. I have been working with states but I ...

javascripthtmlrubyangularjs

Unable to retrieve content in NGX-Quill upon submission

I am currently using "ngx-quill": "^14.3.0" along with "@angular/core": "~12.2.0". It is registered in the app module: QuillModule (not for root). And also in the lazy loaded module: QuillModule (not for root). public editor = { toolbar: [ ...

javascriptangularquillngx-quill

Using AngularJS to send a $http.post request with Paypal integration

This form utilizes the standard PayPal format for making purchases. <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="<a href= ...

javascriptangularjspaypalangular-http

Issue encountered when attempting to push jQuery AJAX requests into an array

I'm attempting to store ajax requests in an array called deferreds. However, I'm consistently encountering the error message below: Uncaught SyntaxError: missing ) after argument list As a reference, I've been using this guide: Pass in an ...

javascriptjqueryarraysajax

What is the cost associated with using the require() function in an Express.js application?

I have a web application built with Express.js that serves one of my domains. The structure of the app.js file is as follows: var express = require('express'); var app = express(); // and so on… To incorporate one of my custom functions in t ...

javascriptnode.jsexpress

Counting the visible elements in Slick carousel

I have implemented slick.js to display a grid of 6 items (2 rows, 3 columns) per slide. I am looking for a way to include both the standard prev and next arrow navigation as well as an indication of the active item count for pagination assistance. For exa ...

javascriptjqueryhtml

"An easy guide on transferring image files to a server and storing them in MongoDB

Building a user registration form using React.js, Node.js, Express.js, Axios, Multer, MongoDB, and Mongoose. I encountered an issue where the uploaded file for the user's profile picture was not being associated with the rest of the registration data ...

node.jsreactjsmongodbfile-uploadmulter

I attempted to verify the login through postman, but encountered an error in the process

I created the login route on the backend and tested it in Postman, but encountered this error message: https://i.stack.imgur.com/PdyCo.png Below is the code for the login route: router.post("/login", async (req, res) => { try { const user = await ...

javascriptexpressauthenticationroutespostman

Troubleshooting Node.js TypeScript breakpoints in Visual Studio Code

I've attempted multiple solutions, but none seem to be working for me. Although the code is running, I'm having trouble setting breakpoints and debugging it. Can you offer any assistance? Below is the configuration script I've tried in VSCo ...

javascriptnode.jstypescriptvisual-studio-codevscode-debugger

Requesting for a template literal in TypeScript:

Having some trouble with my typescript code, it is giving me an error message regarding string concatenation, const content = senderDisplay + ', '+ moment(timestamp).format('YY/MM/DD')+' at ' + moment(timestamp).format(&apo ...

javascripttypescript

audio enhancement in a web-based game

I'm having trouble getting a sound effect to play consistently in my game whenever there is a hit. Sometimes the sound plays, other times it does not! Here is the code I am using: <script> var hitSound = new Audio(); function playEffectSound ...

javascripthtmlhtml5-audio

What is the trick to having the ball change colors every time it hits the wall?

Recently, I stumbled upon this interesting ball bouncing question while searching for some JavaScript code. While the basic bounce animation was simple to achieve, I started thinking about how we could make it more dynamic by changing the color of the ball ...

javascripthtmlcsshtml5-canvas

Discover the step-by-step guide to creating a dynamic and adaptable gallery layout using

I have encountered an issue with my gallery where the images stack once the window is resized. Is there a way to ensure that the layout remains consistent across all screen sizes? <div class="container"> <div class="gallery"> &l ...

javascriptjqueryhtmlcssbootstrap-4

Encountering an issue when attempting to update by pressing the button

I am encountering a challenge in my Vue application that involves inserting, updating, and deleting posts using MongoDB. Specifically, I am facing an issue with the update function. Whenever I attempt to update a post by clicking the corresponding button, ...

javascriptmongodbvue.jsfetch-api