Integrate Zoe using a website widget

Zoe can be implemented for generating product descriptions using a custom element called <zoovu-zoe>.

Go to Advisor Studio > Zoe Advisors.
Select and edit a Zoe Advisor:

Select and edit a Zoe Advisor

Navigate to Advisor Studio > Zoe Advisors > Integration.
Select "Website widget":

Zoe integration: Website widget

Embed HTML

Use <script id="zoovu-zoe-config" type="application/json"> to embed configuration settings as a JSON object or place them within appropriate custom element attributes.

<script src="https://orca-cdn.zoovu.com/core-js/zoovu-tag-library/zoovu-tag-library-latest.min.js"></script>

<!-- via configuration script -->
<script id="zoovu-zoe-config" type="application/json">
{
    "region": "eu",
    "apiKey": "zoe-api-key",
    "locale": "en-IE",
    "sku": "sku"
}
</script>

<zoovu-zoe></zoovu-zoe>

<!-- or via attributes -->
<zoovu-zoe region="eu" api-key="zoe-api-key" locale="en-IE" sku="sku"></zoovu-zoe>

Embed JavaScript

const script = document.createElement("script");
script.setAttribute('src',"https://orca-cdn.zoovu.com/core-js/zoovu-tag-library/zoovu-tag-library-latest.min.js"); 
document.head.appendChild(script); 
const zoe = document.createElement('zoovu-zoe'); 
zoe.setAttribute("region", "eu"); 
zoe.setAttribute("api-key", "zoe-api-key"); 
zoe.setAttribute("locale", "en-US"); 
zoe.setAttribute("sku", "sku"); 
document.body.appendChild(zoe);

Configuration

Property	Description	Required
appKey	A ZOE api-key	Yes
region	where ZOE instance is deployed: in the `eu` (orca) or in the `us` (barracuda).	Yes
apiKey	A ZOE api-key	Yes
locale	e.g. "en-IE"	Yes
sku	Data Platform product identifier	Yes
feedback	show the feedback options (like or dislike) to the user (values are `true` and `false`)	No, default is `true`
disableFeedbackFor	Disable feedback for: `productDescriptionMessage` `chatMessages` `allButTheLast`	No
mode	main ZOE features: `full` (description and conversation) `conversation` (conversation only) `description` (description only)	No, default is `full`
display	main ZOE presentation features: `on-page` `popup`	No, default is `on-page`
animation	add typing animation to zoe response and default `popup` button (values are `true` and `false`)	No, default is `false`
standardTexts	Default standard texts	No
suggestedQuestions	List of predefined questions that user can choose e.g. `["What are the best use cases for this product?"]`.	No, max 3 questions are allowed.
generatedSuggestedQuestions	List of generated questions based on conversation and given topics.	No, max 3 generations are allowed.
skuSelector	if `sku` cannot be provided directly, it be taken from element with a given selector	No
skuAttribute	if `sku` cannot be provided directly, it be taken from attribute	No
disableCookies	Activate no-cookie mode. By default, Zoe doesn't use cookies in sponsored deployments.	No, default is `false`
disableTracking	Disable tracking.	No, default is `false`
origin	'pdp' or 'immersive'	No, default is `'pdp'`
menu	List of items which we want to have in more menu: `start-over` (start over chat)	No
speech	`true` or `false`. Every message from zoe will be read by browser	No, default is `false`
hideTermsAndConditionsCheckbox	`true` or `false`	No, default is `false`
disabled	disable chat input and popup button if equals true (values are `true` and `false`)	No, default is `false`

Default standard texts

{
"title": "Perfect for you",
"generalError": "We're experiencing a glitch. Please retry later.",
"chatGeneralError": "We're experiencing a glitch. Please retry later.",
"chatLimitError": "You reached your limit. Please restart to test again",
"chatUserMessageLimitError": "Question exceeds character limit",
"chatInputPlaceholder": "Ask your question here...",
"feedbackPrompt": "Was this helpful?",
"feedbackPositiveText": "Yes",
"feedbackNegativeText": "No",
"popupButton": "Ask about this product"
}

Retrieve the SKU from a Product Detail Page

If you're unable to provide the products SKU (identifier) necessary for the Zoe Advisor configuration, here's how it can be retrieved:

Using skuSelector: Specify a CSS selector to target an element's content. For instance, setting skuSelector: ".sku" retrieves the SKU from
123
, assuming the div exists in the DOM prior to zoovu-zoe.
Using skuAttribute: Define an attribute to extract the SKU. With skuAttribute: "data-sku", the SKU is sourced from the data-sku attribute of
Something else
, provided the div is present in the DOM before zoovu-zoe.
SKUs can also be acquired from existing structured or linked data within the DOM.

Add custom CSS styling

All Zoe Advisor components will be styled by the global CSS with some basic CSS variables or specific parts can be styled using shadow parts.

zoovu-zoe { 
  --primary-color: purple; 
  --secondary-color: grey; 
  --gutter: 1em;

  --popup-z-index: 9900 /* only "popup" display */ 
}

zoovu-zoe::part(title) {} /* only "full"/"description" mode */
zoovu-zoe::part(description) {} /* only "description" mode */
zoovu-zoe::part(conversation) {} /* only "full"/"conversation" mode */
zoovu-zoe::part(zoe-message) {} /* only "full"/"conversation" mode */
zoovu-zoe::part(user-message) {} /* only "full"/"conversation" mode */
zoovu-zoe::part(input) {} /* only "full"/"conversation" mode */
zoovu-zoe::part(submit) {} /* only "full"/"conversation" mode */
zoovu-zoe::part(feedback) {} /* only when feedback is set to "true" */
zoovu-zoe::part(popup) {} /* only "popup" display */
zoovu-zoe::part(popup-backdrop) {} /* only "popup" display */
zoovu-zoe::part(popup-button) {} /* only "popup" display */
const script = document.createElement("script");

script.setAttribute('src', "https://orca-cdn.zoovu.com/core-js/zoovu-tag-library/zoovu-tag-library-latest.min.js");

document.head.appendChild(script);

const style = document.createElement("style"); 
const css = ` 
zoovu-zoe { 
  --primary-color: white; 
  --secondary-color: lightcoral; 
  --custom-color: purple; 
  background: linear-gradient(90deg, var(--custom-color) 0%, var(--secondary-color) 100%); 
  box-shadow: rgb(206 47 215 / 76%) 0px 0px 10px; 
  color: var(--primary-color); 
  border-radius: 4px; 
  max-height: 215px;
}
zoovu-zoe::part(input), 
zoovu-zoe::part(input):hover, 
zoovu-zoe::part(submit) { color: var(--custom-color); }`;

style.appendChild(document.createTextNode(css));

document.head.appendChild(style);

const zoe = document.createElement('zoovu-zoe');
zoe.setAttribute('region', "eu"); 
zoe.setAttribute('api-key', "zoe-api-key"); 
zoe.setAttribute('locale', "en-US"); 
zoe.setAttribute('sku', "sku");

document.body.appendChild(zoe);

Access to Zoe event

If you want to improve the user experience with Zoe, you can easily add event listeners using our available events.

Events names:

zoovu-zoe-message-received
zoovu-zoe-message-sent

In each event, there is a detail that includes a payload and the type of command (chat or product-description).

Embed HTML​

Embed JavaScript​

Configuration​

Default standard texts​

Retrieve the SKU from a Product Detail Page​

Add custom CSS styling​

Access to Zoe event​