Developers

Search

Embedding a Trustpilot widget in your site

Framer offers a built-in component, but you can also integrate a Trustpilot design into your website by following these steps.

Add the Trustpilot script to your site settings

Place the first Trustpilot script in the Custom Code section at the start of the <head> tag in your site's general settings.

<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
A settings interface titled 'Custom Code,' allowing users to add custom code and scripts to every page of a website. The section displays a code block labeled 'Start of tag,' containing a TrustBox script from Trustpilot.

Retrieve and edit the Trustpilot widget script

From your Trustpilot account, copy the second script and paste it into a text editing tool like TextEdit (Mac) or Notepad (Windows). Extract the following elements:

  • data-template-id (e.g., 5407e68dz0d06a09e041d5km)

  • data-businessunit-id (e.g., 5c09c4742068df0001rrfd35)

  • Your Trustpilot review URL (e.g., https://www.trustpilot.com/review/yourdomain)

Replace the placeholders in the script below with your own data:

<!-- TrustBox widget - Horizontal -->
<div id="trustbox" class="trustpilot-widget" data-locale="en-US" data-template-id="your-data-template-id" data-businessunit-id="your-business-unit-id" data-style-height="28px" data-style-width="100%" data-theme="light">
  <a href="your-URL" target="_blank" rel="noopener">Trustpilot</a>
</div>
<script>var trustbox = document.getElementById('trustbox');
 window.Trustpilot.loadFromElement(trustbox);</script>
<!-- End TrustBox widget -->
<!-- TrustBox widget - Horizontal -->
<div id="trustbox" class="trustpilot-widget" data-locale="en-US" data-template-id="your-data-template-id" data-businessunit-id="your-business-unit-id" data-style-height="28px" data-style-width="100%" data-theme="light">
  <a href="your-URL" target="_blank" rel="noopener">Trustpilot</a>
</div>
<script>var trustbox = document.getElementById('trustbox');
 window.Trustpilot.loadFromElement(trustbox);</script>
<!-- End TrustBox widget -->
<!-- TrustBox widget - Horizontal -->
<div id="trustbox" class="trustpilot-widget" data-locale="en-US" data-template-id="your-data-template-id" data-businessunit-id="your-business-unit-id" data-style-height="28px" data-style-width="100%" data-theme="light">
  <a href="your-URL" target="_blank" rel="noopener">Trustpilot</a>
</div>
<script>var trustbox = document.getElementById('trustbox');
 window.Trustpilot.loadFromElement(trustbox);</script>
<!-- End TrustBox widget -->

Add an embed component to your canvas

Next, navigate to the Insert menu and search for "embed". Then, drag the component onto the canvas.

The left panel shows six element options under the 'Elements' category: Calendly, Intercom, Typeform, Hubspot, Tagembed, and Embed, each represented by a distinct icon.

Insert the code into the embed component

Paste all the Trustpilot code into the HTML tab of the embed component.

The right-hand panel contains a large text box is available for inserting custom HTML code.

Preview the Trustpilot widget

Since Framer executes scripts in the <head> and <body> only in the browser and not in the editor, you’ll need to publish your changes and view your site in the browser to make sure the embed is functioning correctly.


If you're still experiencing issues, please reach out to us through our contact page for further help.

FAQ

Lesson FAQ

  • How do I embed a Trustpilot widget in my Framer site?

    To embed a Trustpilot widget in your Framer site, first add the Trustpilot script to your site settings by placing it in the Custom Code section at the start of the <head> tag in your site's general settings. Then, retrieve your Trustpilot widget script from your Trustpilot account, extract your data-template-id, data-businessunit-id, and review URL, and replace the placeholders in the provided script. Next, add an Embed component to your canvas from the Insert menu, and paste all the Trustpilot code into the HTML tab of the embed component. Finally, publish your site and view it in the browser to ensure the widget is functioning correctly.

  • Where do I place the Trustpilot scripts in Framer?

    Place the first Trustpilot script in the Custom Code section at the start of the <head> tag in your site's general settings. The second script, which contains your widget, should be pasted into the HTML tab of an Embed component that you add to your canvas.

  • Why can't I see the Trustpilot widget in the Framer editor?

    Framer executes scripts in the <head> and <body> only in the browser and not in the editor. To see the Trustpilot widget working, you need to publish your changes and view your site in the browser.

Updated