Comment on page
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.
Initializes all widgets on the current page.
window.okeWidgetApi.initAllWidgets();
Initializes or reinitializes a particular widget.
const widgetElement = document.querySelector('[data-oke-widget]');
window.okeWidgetApi.initWidget(widgetElement);
Parameter | Description | Value Type | Supported Values | Required |
|---|---|---|---|---|
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 | |
Sets a widget to 'product' mode and to only show review data for the specified product.
const widgetElement = document.querySelector('[data-oke-widget]');
window.okeWidgetApi.setProduct(widgetElement, 'shopify-7551554945263');
Parameter | Description | Value Type | Supported Values | Required |
|---|---|---|---|---|
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. | ✅ |
Sets a widget to 'group' mode and to only show review data for the specified group.
const widgetElement = document.querySelector('[data-oke-widget]');
window.okeWidgetApi.setGroup(widgetElement, 'd06b2294-7f17-48fe-9fd6-155e8cb07a54');
Parameter | Description | Value Type | Supported Values | Required |
|---|---|---|---|---|
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 | ✅ |
- 1.Open Okendo Admin.
- 2.Navigate to Groups (Reviews > Groups).
- 3.Select the Group you would like to use for your widget.
- 4.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.
Group ID is located in the browser address bar at the end of the URL.
Sets the widget locale and/or locale variant for the widgets to use for translation purposes.
window.okeWidgetApi.setWidgetLocale('fr');
Parameter | Description | Value Type | Supported Values | Required |
|---|---|---|---|---|
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 | |
If our standard widget initialization pattern doesn't work correctly for your application, you may need to manually re-initialize the widget(s).
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.<script type="text/javascript">
((document, window) => {
const reviewsWidgetHolder = document.querySelector('[data-oke-widget]');
if (reviewsWidgetHolder) {
const handleDocumentLoaded = function (e) {
if (window.okeWidgetApi) {
window.okeWidgetApi.initWidget(reviewsWidgetHolder, true);
}
}
if (document.readyState !== 'interactive' && document.readyState !== 'complete') {
document.addEventListener('readystatechange', () => {
handleDocumentLoaded();
}, { once: true });
}
else {
handleDocumentLoaded();
}
}
})(document, window);
</script>
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:document.addEventListener('oke-analytics-event', (event) => {
// event.detail contains analytics information properties
console.log(JSON.stringify(event.detail));
});
Property | Description | Text |
|---|---|---|
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 | 'interaction' | 'view'
interaction : When a user directly interacted with the widget
view : When widget based time tracking is enabled (see: https://support.okendo.io/en/articles/6787536-tracking-widget-on-screen-time) | |
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 modified 4mo ago