如何在AMP页面添加Trust Pilot自定义脚本并解决amp-iframe渲染问题

Hey Victoria, let’s walk through solving both issues you’ve hit with getting Trustpilot to work on your AMP pages—AMP’s strict rules do make this a bit tricky, but there’s a straightforward fix once you know the constraints.

First, let’s recap why you ran into each problem:

• The "Custom JavaScript is not allowed" error is expected: AMP blocks all custom scripts (including third-party ones like Trustpilot’s) by default to enforce speed and security standards. So your initial approach of adding the script directly was never going to pass validation.
• The "Origin of must not be equal to container" error happens because AMP prohibits amp-iframe from loading content from the exact same domain as the parent AMP page. Your /trustpilot path is on the same origin, which triggers this block.

Here’s the Step-by-Step Solution #

1. Host Your Trustpilot Widget on a Subdomain

The simplest way to get around the origin restriction is to move the Trustpilot widget code to a separate subdomain (e.g., widgets.yourdomain.com instead of your main yourdomain.com). AMP allows amp-iframe to load content from different subdomains since they’re considered distinct origins.

For example, create a page at https://widgets.yourdomain.com/trustpilot that contains your full Trustpilot script and widget markup.

2. Update Your amp-iframe Code

Now adjust the amp-iframe on your AMP page to point to this subdomain URL, and make sure you set the correct sandbox permissions and layout properties:

<amp-iframe 
  width="600" 
  height="400" 
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  frameborder="0"
  src="https://widgets.yourdomain.com/trustpilot"
  resizable>
  <div overflow tabindex="0" role="button" aria-label="Expand to view full Trustpilot reviews">View more reviews</div>
</amp-iframe>

Let’s break down the important parts here:

• allow-scripts: Mandatory, since Trustpilot’s widget relies on JavaScript to render.
• allow-same-origin: Lets the iframe interact with resources on its subdomain (like Trustpilot’s bootstrap script).
• allow-popups: Useful if Trustpilot’s widget includes links that open new windows (e.g., "Read full review" links).
• resizable + <div overflow>: Required if your widget’s height exceeds 400px—this lets users expand the iframe to see all content. If your widget is shorter than 400px, you can omit these two parts.

3. Set Up the Subdomain Trustpilot Page

Make sure the page on your subdomain has all the necessary Trustpilot code to render the widget correctly. Here’s a minimal example:

<!-- https://widgets.yourdomain.com/trustpilot -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Trustpilot Reviews</title>
  <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" defer></script>
</head>
<body>
  <!-- Replace with your actual Trustpilot widget code -->
  <div class="trustpilot-widget" 
       data-locale="en-US" 
       data-template-id="YOUR_TRUSTPILOT_TEMPLATE_ID" 
       data-businessunit-id="YOUR_BUSINESS_UNIT_ID" 
       data-style-height="400px" 
       data-style-width="100%">
    <a href="https://www.trustpilot.com/review/yourdomain.com" target="_blank" rel="noopener">Trustpilot</a>
  </div>
</body>
</html>

Test this page directly in your browser first to confirm the Trustpilot widget loads correctly before adding it to your AMP page.

4. Validate Your AMP Page

Once everything is set up, use the AMP Validator (or Chrome’s AMP DevTools extension) to check your page. The validation should pass, and the amp-iframe should render your Trustpilot widget without issues.

What If You Can’t Use a Subdomain? #

If setting up a subdomain isn’t an option, AMP does allow same-origin amp-iframe content only if:

• The content is served via the AMP Cache, or
• The iframe content is completely static (no scripts).

Since Trustpilot requires JavaScript to work, neither of these options is practical. The subdomain approach is the only reliable way to get the widget running on AMP.

内容的提问来源于stack exchange，提问作者Victoria Le