AMP

Important: this documentation is not applicable to your currently selected format stories!

amp-yotpo

Description

Embeds a Yotpo on-site widget.

 

Required Scripts

<script async custom-element="amp-yotpo" src="https://cdn.ampproject.org/v0/amp-yotpo-0.1.js"></script>

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.
title (optional) Define a title attribute for the component. The default is Yotpo widget.
common attributes This element includes common attributes extended to AMP components.

Validation

See amp-yotpo rules in the AMP validator specification.

さらに支援が必要ですか?

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする