Widget Plus Window API
The Widget Plus Window API exposes public functions that can be called to setup or make configuration changes to the widgets on the page.
Functions
initAllWidgets
Initializes all widgets on the current page.
Example Usage
initWidget
Initializes or reinitializes a particular widget.
Example Usage
Parameters
widgetElement
The widget HTMLElement
which will be initialized.
HTMLElement
forceReinitialization
Determines whether or not to force the widget to reinitialize if it has already been initialized.
boolean
true
, false
setProduct
Sets a widget to 'product' mode and to only show review data for the specified product.
Example Usage
Parameters
widgetElement
The widget HTMLElement
which will be set with a particular product’s data.
HTMLElement
productId
Sets the widget in 'product' mode with only reviews data for the specified product.
string
Any valid Product ID in the format shopify-{product_id}
e.g. shopify-1234567
.
setGroup
Sets a widget to 'group' mode and to only show review data for the specified group.
Example Usage
Parameters
widgetElement
The widget/target HTMLElement
which will be set with a particular product’s data.
HTMLElement
groupId
Sets the widget in 'group' mode with only reviews data for the specified product group.
string
How to Find a Group ID
Open Okendo Admin.
Navigate to Groups (Reviews > Groups).
Select the Group you would like to use for your widget.
Look in the URL for the group page and you will see a GUID at the end of the URL. This is the Group ID.
setWidgetLocale
Sets the widget locale and/or locale variant for the widgets to use for translation purposes.
Example Usage
Parameters
locale
The locale code for the language you want the set the widgets to use.
string
da
| de
| el
| en
| es
| fr
| id
| it
| ja
| ko
| nl
| no
| pl
| pt
| ru
| sv
| th
| vi
| zh-TW
variant
The variant code for the language you want to set the widget to use.
Currently only support formal/informal for the German locale de
string
formal
| informal
Custom Initialization
If our standard widget initialization pattern doesn't work correctly for your application, you may need to manually re-initialize the widget(s).
Manually Initialize a Widget
A common practice is to initialize the widget via the Window API by placing a script
block or file at the base of your HTML document.
You are then able to watch the document.readyState
lifecycle and initialise widgets using the window.okeWidgetApi
.
Overriding The Product Details URL - Stores With Shopify Markets / Custom Domains / Headless
We give merchants the ability to override the way their product detail URLs are generated by the Reviews Widget.
A common use-case for this functionality would be in the event a store is using Shopify Markets, Custom Domains, a Headless implementation.
In your theme or a custom html/liquid block you can supply a product URL formatter function on the window
object which the reviews widget will use when generating links to products.
It is recommended to place this snippet in the <head> of your site above the {{ content_for_header }}:
Example Markets Usage When Using Shopify Translate and Adapt Style Sub-Folders for <market>-<locale> e.g. https://www.store-domain.com/ja-ja/
Example Markets Usage
Parameters
product
This is a Javascript object which is passed to your function to provide product information you may use when constructing a product details URL.
object
{ productHandle: string;
productId: string;
variantId: string }
Events
For merchants not using Google Analytics, an oke-analytics-event
is raised in conjunction with any of our standard Google Analytics interaction and view events.
You can subscribe to the event and forward it on to other analytics providers like so:
event.detail Properties
event
The name of the event in snake case
event_category
'Okendo'
event_label
A custom label based on the event or falls back to the product name if not supplied
event_type
okendo_product
'reviews'
product_label
The product name/label if the reviews widget is displaying a specific product. This will be empty when the widget displays "All Reviews", "Grouped" , or "Collection" reviews.
Last updated