Description 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 Layouts fill, 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-widget-type (required)

Specifies the type of widget to use. For example, MainWidget, BottomLine, etc.

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 attributes

This element includes common attributes extended to AMP components.

Validation

See amp-yotpo rules in the AMP validator specification.