I'm facing an intermittent issue with loading the Trustpilot widget in my Next.js application. Sometimes it loads perfectly, but other times it fails to load.
I've already searched a lot about it and read the Trustpilot documentation about how to integrate it, but whatever I did to solve this problem was for the birds.
We had another website that was based on WordPress; we didn't have such a problem there, but in this project that is based on Next.js, we face this problem.
This is the script that I have in the _app.js file inside the head tag:
<Head>
<script
type="text/javascript"
src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
async
></script>
</Head>
This is the Trustpilot Widget code that I loged the window.trustpilot, when it is not loading console.log(window.trustpilot) log undefined:
import React, { useEffect, useRef } from "react";
const TrustBox = ({ mode}) => {
const option = {
horizontal: {
"data-template-id": "the id",
"data-businessunit-id": "the id",
"data-style-height": "150px",
"data-style-width": "100%",
"data-theme": "white",
"data-text-size":"30px",
},
carousel: {
"data-template-id": "the id",
"data-businessunit-id": "the id",
"data-style-height": "250px",
"data-style-width": "100%",
"data-theme": "white",
"data-stars": "5",
"data-review-languages": "en",
},
};
const ref = useRef(null);
useEffect(() => {
if (window.Trustpilot) {
console.log('loaded') //return the modules
window.Trustpilot.loadFromElement(ref.current, true);
}
else{
console.log(window.trustpilot) //undeifined
}
}, [mode]);
return (
<div
ref={ref}
data-locale="en-GB"
{...option[mode]}
/>
);
};
export default TrustBox;
I have attached the screenshots too:
