Getting Started

What is required to implement:

An API key (provided by Preferabli)
Website whitelisted for use; please reach out to [email protected] for CORS whitelisting
Ability to add a script tag to your website (in the <head> or before </body>)

How to implement:

Include the widget script in the <head> of your website or before the closing </body> tag. Be sure to replace %SCRIPT_URL% with your widget script URL and %API_KEY% with your API key:

<script
  src="%SCRIPT_URL%/genai-embeddable-widget.js"
  data-api-key="%API_KEY%"
></script>

The widget will automatically initialize when the page loads and display a floating chat button.

Alternative: Programmatic initialization — If you prefer to control when the widget is created, load the script without data-api-key, then initialize it yourself:

<script src="%SCRIPT_URL%/genai-embeddable-widget.js"></script>
<script>
  var widget = new GenAIEmbeddableWidget({
    apiKey: '%API_KEY%',
    onReady: function() {
      console.log('GenAI Widget is ready');
    }
  });
</script>

Widget Features

The GenAI Embeddable Widget is an AI-powered chat widget that provides:

Product recommendations — Like This Try That, Wine For Food, Guided Rec, and generic recommendations
Food pairings — Suggestions for foods that pair well with your products
Product information — Descriptions and details about your catalog
Stock and availability — Queries about inventory

The widget renders a floating chat button on your page. When users click it, an iframe opens with a conversational UI where they can ask questions in natural language and receive structured responses with product cards and options.

Controlling the Widget

You can open, close, or toggle the chat panel programmatically.

Public methods (when you hold a reference to the widget instance):

Method	Description
`open()`	Opens the chat panel
`close()`	Closes the chat panel
`toggle()`	Toggles the chat panel open or closed
`destroy()`	Removes the widget from the page and cleans up event listeners

Example:

// Assuming you have a reference: var widget = new GenAIEmbeddableWidget({ apiKey: '...' });
widget.open();
widget.close();
widget.toggle();
widget.destroy();

Custom window events — You can control the widget by dispatching custom events on window, even when using auto-init (script tag with data-api-key):

Event	Description
`genai-widget:open`	Opens the chat widget
`genai-widget:close`	Closes the chat widget
`genai-widget:toggle`	Toggles the chat widget
`genai-widget:ready`	Fired when the widget is fully loaded and ready (listen only)

Example:

// Open the widget from your own button
window.dispatchEvent(new CustomEvent('genai-widget:open'));

// Close the widget
window.dispatchEvent(new CustomEvent('genai-widget:close'));

// Toggle the widget
window.dispatchEvent(new CustomEvent('genai-widget:toggle'));

// Listen for when the widget is ready
window.addEventListener('genai-widget:ready', function() {
  console.log('Widget is ready');
});