AMP

amp-yotpo

Embeds a Yotpo on-site widget.

Required Script<script async custom-element="amp-yotpo" src="https://cdn.ampproject.org/v0/amp-yotpo-0.1.js"></script>
Supported Layoutsfill, fixed, fixed-height, flex-item, nodisplay, responsive

Overview

You can use the amp-yotpo extension to display Yotpo on-site widgets.

Example: Display the Yotpo bottom line widget

<amp-yotpo
    width="550"
    height="100"
    data-app-key="liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5"
    data-widget-type="BottomLine"
    data-product-id="9408616206">
</amp-yotpo>

Example: Display the reviews widget

<amp-yotpo
    width="550"
    height="700"
    layout="responsive"
    data-app-key="liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5"
    data-widget-type="MainWidget"
    data-product-id="9408616206"
    data-name="hockey skates"
    data-url="https://ranabram.myshopify.com/products/hockey-skates"
    data-image-url="https://ichef.bbci.co.uk/news/320/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg"
    data-descriptipn="skates"
    data-yotpo-element-id="1">
</amp-yotpo>

Attributes

data-app-key (required)Specifies the account app key. For example, liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5.
data-** (optional)Each Yotpo widget has optional data attributes. For example, the reviews widget has an optional attribute named product-id. Refer to Yottpo's documentation for which attributes to specify.
When using the amp-yotpo extension, for each corresponding Yotpo attribute prepend data to the attribute. For example, the product-id attribute becomes data-product-id.
common attributesThis element includes common attributes extended to AMP components.

Validation

See amp-yotpo rules in the AMP validator specification.

需要更多帮助?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub