AI Message Widget

This widget displays the AI message from AI search. It does not automatically appear in text search results.

Example Usage

const dualsearch = window.yesplz.dualsearch();

dualsearch.addWidget(
  dualsearch.widgets.AiMessage({
    container: "#ai-message",
  })
);

Parameters

Name	Type	Description
container	string	SCSS selector for the element where the widget will be rendered.
templates	object	Layout of the widget can be set in templates.layout.
icon	string	Source URL of the AI icon.
onBeforeRender	function	Callback function invoked before the widget is rendered.
onRendered	function	Callback function invoked when the widget is rendered.

container

Selector for the element where the widget will be integrated.

templates

Defines the layout of the widget using templates.layout.
The layout must include {{icon}} and {{message}} placeholders.

Below are the default templates.layout and usage:

const TEMPLATE = `
  <img src={{icon}} alt="AI Stylist Icon"/>
  <div class="yesplz-ai-message">
    <p>{{message}}</p>
    <div class="yesplz-ai-message-loader">
      <span class="yesplz-ai-message-loader-text">One sec...</span>
      <div class="skeleton-container">
        <div class="skeleton"></div>
        <div class="skeleton"></div>
      </div>
    </div>
  </div>
`;

// Usage
dualsearch.addWidget(
  dualsearch.widgets.AiMessage({
    container: "#ai-message",
    templates: {
      layout: TEMPLATE,
    },
  })
);

icon

Optional URL for the AI icon image.

onBeforeRender

Callback function invoked once when the AI Message layout is rendered.

dualsearch.addWidget(
  dualsearch.widgets.AiMessage({
    container: "#ai-message",
    onBeforeRender: () => {
      // Code
    },
  })
);

onRendered

Callback function invoked each time new products are rendered. Receives a list of rendered products as an argument.

dualsearch.addWidget(
  dualsearch.widgets.AiMessage({
    container: "#ai-message",
    onRendered: () => {
      // Code
    },
  })
);