{"id":2011,"date":"2022-02-03T15:49:52","date_gmt":"2022-02-03T15:49:52","guid":{"rendered":"https:\/\/www.opinew.com\/help-center\/?post_type=ht_kb&p=2011"},"modified":"2024-03-27T11:49:26","modified_gmt":"2024-03-27T11:49:26","slug":"web-components","status":"publish","type":"ht_kb","link":"https:\/\/www.opinew.com\/help-center\/knowledge-base\/web-components\/","title":{"rendered":"Web Components"},"content":{"rendered":"\n

1. Add the following code in <head><\/h2>\n\n\n\n
<link rel=\"preload\" href=\"https:\/\/cdn.opinew.com\/shop-widgets-components\/v2\/static\/i18n\/lang.json\" as=\"fetch\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.opinew.com\/shop-widgets-components\/v2\/static\/css\/index.css\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.opinew.com\/styles\/opw-icons\/style.css\">\n<script src=\"https:\/\/cdn.opinew.com\/shop-widgets-components\/v2\/static\/js\/index.js\" async ><\/script><\/code><\/pre>\n\n\n\n
2. Insert widget tag in desired place in shop code<\/h2>\n\n\n\n
General usage<\/h3>\n\n\n\n
<opinew-plugin type=\"<WIDGET_TYPE>\" product-id=\"<PRODUCT_ID>\" domain=\"<SHOP_DOMAIN>.myshopify.com\"><\/opinew-plugin><\/code><\/pre>\n\n\n    \t\t
\r\n    \t\t\t    \t\t\t    \t\t\t\t
\r\n    \t\t\t\t\tYou will need to change <WIDGET_TYPE>, <PRODUCT_ID> and <SHOP_DOMAIN> to data specific for your shop. Please note that you need to use your myshopify.com shop domain and not your custom domain.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div>\r\n    \t\t\n\n\n\n
Tag attributes<\/h4>\n\n\n\n
Name<\/td>Description<\/td><\/tr>
type<\/td>Required value to choose desired widget type. Available options are:
product<\/code>, floating<\/code>, all<\/code>, carousel<\/code>, request<\/code>,product-stars<\/code>, collection-stars<\/code>,footer-badge<\/code><\/td><\/tr>
product-id<\/td>Shopify product id. Required for: product, product-stars, collection-stars<\/code><\/td><\/tr>
domain<\/td>Shop domain – Optional. When not set, the domain is read from browser window.location.host<\/code> property. Recommended to set to make sure widgets work properly on dev environment. This needs to be your myshopify.com domain provided by Shopify, not your custom domain (if you use one).<\/td><\/tr>
lang (optional)<\/td>ISO 639-1 language code to specify the language of the widget eg. fr, en, pt<\/code><\/td><\/tr>
theme 
(optional for type=”product”)<\/td>		specify theme of the product review widget e.g. theme=”carousel”
possible values are default, minimal, modern, carousel<\/code><\/td><\/tr>
search-text
(optional for type=”product”)<\/td>		If set, the value will be used to prefill the product reviews widget search bar.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Widget examples<\/h2>\n\n\n\n
Product review widget<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<opinew-plugin type=\"product\" product-id=\"123142412\" domain=\"shop.myshopify.com\"><\/opinew-plugin><\/code><\/pre>\n\n\n\n
All reviews widget<\/h3>\n\n\n\n
<opinew-plugin type=\"all\" domain=\"shop.myshopify.com\"><\/opinew-plugin><\/code><\/pre>\n\n\n\n
Floating all reviews widget<\/h3>\n\n\n\n
\"Floating<\/figure>\n\n\n\n
<opinew-plugin type=\"floating\" product-id=\"123142412\" domain=\"shop.myshopify.com\"><\/opinew-plugin><\/code><\/pre>\n\n\n\n
Featured reviews carousel<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<opinew-plugin type=\"carousel\" domain=\"shop.myshopify.com\"><\/opinew-plugin>  <\/code><\/pre>\n\n\n\n
Review request form<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
<opinew-plugin type=\"request\" domain=\"shop.myshopify.com\"><\/opinew-plugin><\/code><\/pre>\n\n\n\n
Product page stars badge<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
<opinew-plugin type=\"product-stars\" product-id=\"123142412\" domain=\"shop.myshopify.com\"><\/opinew-plugin>  <\/pre>\n\n\n\n
Collection page stars badge<\/h3>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
<opinew-plugin type=\"collection-stars\" product-id=\"123142412\" domain=\"shop.myshopify.com\"><\/opinew-plugin> <\/code><\/pre>\n\n\n\n
3. Check out our example Hydrogen app<\/h2>\n\n\n\n
If you want to see an example of how our widgets can be integrated with Shopify Hydrogen, check out our demo project at https:\/\/github.com\/opinewdev\/opinew-headless-hydrogen-examples<\/a>.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
1. Add the following code in <head> 2. Insert widget tag in desired place in shop code General usage Tag attributes Name Description type Required value to choose desired widget type. Available options are:product, floating, all, carousel, request,product-stars, collection-stars,footer-badge product-id Shopify product id. Required for: product, product-stars, collection-stars domain Shop…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/2011"}],"collection":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/comments?post=2011"}],"version-history":[{"count":17,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/2011\/revisions"}],"predecessor-version":[{"id":3155,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/2011\/revisions\/3155"}],"wp:attachment":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/media?parent=2011"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb-category?post=2011"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb-tag?post=2011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}