Ai4u function calls - to be given to your developer or AI website builder

AI4U - Widget Functions and Events

Widget Functions and Events This guide explains how the widget works, what you can do with it, and what events it can notify you about.

Widget Functions

1. destroy()

What it does:
Removes the widget completely and cleans up everything it was using.
Useful when you want to stop or remove the widget from the page.

Example:

widget.destroy();

2. on(event, function) – Listen to Events

What it does:
Lets you “listen” for things happening inside the widget (called events).
For example: when a message arrives, when the chat is ready, etc.

Example:

widget.on("event-name", () => {});

3. off(event, listener) – Stop Listening

What it does:
Stops listening to a specific event you previously subscribed to.

Example:

widget.off("event-name", listener);

4. emit(event, data) – Trigger an Event

What it does:
Sends a custom event to the widget.
Good for triggering actions inside the widget.

Example:

widget.emit("event-name", data);

5. startConversation({ initialMessage })

(Basic version only)
What it does:
Starts a new chat conversation automatically.

Example:

widget.startConversation({ initialMessage: "Hello!" });

6. show(path)

(Works only if the widget is used as an actual widget, not standalone)
What it does:
Makes the widget visible.

Example:

widget.show(); // will use path = "/" (home page)widget.show('/conversations');

7. hide()

(Works only for widget type)
What it does:
Hides the widget from view.

Example:

widget.hide();

Widget Events

Events are “signals” the widget sends when something important happens.
You can use widget.on(...) to react to these events or for emit data using  widget.emit(...).

Base Events (Available in ALL versions)

1. instance:ready

(on() action only)

The widget is fully ready to use.

widget.on("instance:ready", () => console.log("Widget is ready!"));

2. instance:destroy

(on() action only)

The widget has been removed.

widget.on("instance:destroy", () => console.log("Widget was removed!"));

3. chat:ready

(on() action only)

The chat inside the widget is ready.

widget.on("chat:ready", () => console.log("Chat is ready!"));

4. chat:destroy

(on() action only)

The chat has been closed or removed.

widget.on("chat:destroy", () => console.log("Chat was destroyed!"));

5. chat:message-received

add new chat message when was received .

Needs:

  • who sent it (user or assistant)
  • the message text
  • the conversation Id

widget.emit("chat:message-received", {  content: message.content,  role: message.role,  conversationId: conv.id,});

widget.on("chat:message-received", () => {console.log('New meessage received.')});

6. chat:conversation-finished

The conversation has ended.

widget.emit("chat:conversation-finished", { conversationId: conv.id });

widget.on("chat:conversation-finished", () => {console.log('Conversation finished')});

Basic Variant Only (variant: "basic")

1. chat:new-conversation

(on() action only)

A completely new conversation has started.

2. open

(on() action only)

The widget was opened.

3. close

(on() action only)

The widget was closed.

4. router:navigate

(This is something you send TO the widget using emit())
Tells the widget to switch to a specific screen or page.

widget.emit("router:navigate", ({ path, query }))

5. router:route-changed

(This is something you send TO the widget using emit())

The widget switched to a new screen or page.

widget.emit("router:route-changed", ({ path, query }))

6. router:ready

(on() action only)

The internal navigation system (router) is ready.

7. router:destroy

(on() action only)

The router has been removed.

Workstream Variant Only (variant: "workstream")

external-params:received

The widget received external parameters (for example: extra data passed from outside).

widget.emit("external-params:received", ({params: {code: code}}))

widget.on("external-params:received", ({params}) => {console.log('Params received')});

ready to build with data?
Arrow right icon
z
z
z
z
i
i
z
z
Transform Your Customer Support
Ensure your customers get accurate answers from verified data sources, whenever they need them.