Instance methods and events

The Webchat widget, upon initialization, exposes a collection of methods and events that you can use to interact with the widget. You can use these to control the widget's behavior, theme the widget, send messages from your own functions, and much more.

<script src="https://cdn.jsdelivr.net/npm/@moveo-ai/web-client@latest/dist/web-client.min.js"></script>
<script>
  MoveoAI.init({
    integrationId: "YOUR_INTEGRATION_ID",
  })
    .then((instance) => {
      console.log("connected");
      // The instance returned here exposes the methods and events listed below.
      // You can also assign them to a global variable so they can be accessed from anywhere in your website.
    })
    .catch((error) => console.error(error));
</script>

Instances

Method	Description
openWindow	Opens Webchat if it is currently closed.
closeWindow	Closes Webchat if it is currently opened.
sendMessage	Sends the specified message to the AI Agent.
updateContext	Updates the context of the user.
destroy	Ends the conversation and hides the webchat.
setCSSVariables	Overrides the exposed CSS variables so the web-widget can be custom styled.
setLocale	Updates the locale of the user.

instance.openWindow

Opens the chat window if it is currently closed.

Example

instance.openWindow();

instance.closeWindow

Closes the chat window if it is currently open.

Example

instance.closeWindow();

instance.sendMessage

This method can be used to programmatically send a text message to the AI Agent.

Example

instance.sendMessage({ text: "This is a sample text message" });

Usage

• If a conversation already exists, the message will be sent directly to the user.
• If there is no existing conversation, the welcome_trigger_message will be overridden and the message will be sent.
• If Visitor Information is required, the message will be sent only after the form has been completed.

note

If the chat window is closed, use the openWindow method to open it.

Example

instance.sendMessage({ text: "This is a sample text message" });
instance.openWindow();

instance.updateContext

This method can be used to update the user information or to add new tags to the current session.

Example

instance.updateContext({
  user: { display_name: "Moveo user" },
  customer_id: 12345,
});

instance.destroy

This method will expire the conversation and hide the webchat so no new messages can be sent.

Example

// point where the session should end at all times
if (shouldDestroyWebchat) {
  instance.destroy();
}

Usage

This method can be used to prevent users from starting a new conversation once their session on the website has expired.

note

After using the instance.destroy(), you can recreate a webchat instance at any time by calling the MoveoAI.init method again.

instance.setLocale

This method can be used to update the default language text of the webchat. You can find a list of the supported locales (languages) in the following table.

Available locales

Code	Language
de	🇩🇪 German
el	🇬🇷 Greek
en	🇺🇸 English
es	🇪🇸 Spanish
fr	🇫🇷 French
it	🇮🇹 Italian
bg	🇧🇬 Bulgarian
pt-br	🇧🇷 Portuguese (Brazil)
ro	🇷🇴 Romanian
pl	🇵🇱 Polish
cs	🇨🇿 Czech
id	🇮🇩 Indonesian
nl	🇳🇱 Dutch
sr	🇷🇸 Serbian
sv	🇸🇪 Swedish
ru	🇷🇺 Russian
sq	🇦🇱 Albanian
zh	🇨🇳 Chinese
ar	🇸🇦 Arabic
ja	🇯🇵 Japanese
tr	🇹🇷 Turkish

Example

instance.setLocale("en");

instance.setCSSVariables

This method can be used to change the appearance of the web-widget. You can find a list of all the available variables below.

CSS variables:

Variables	Description
--moveo-background-color	The primary color of the web widget
--moveo-accent-color	The secondary color of the web widget
--moveo-header-height	The height of the web widget header

Example

instance.setCSSVariables({
  "--moveo-background-color": "red",
  "--moveo-accent-color": "blue",
});

Events

Event	Description
onSessionCreated	Is executed every time a new conversation is created
onSessionReconnected	Is executed every time a conversation reconnects
onSessionClosed	Is executed when the chat session is terminated
onConversationClosed	Is executed when live chat is enabled and a conversation is marked as resolved or closed
onAnalyticsEvent	Is executed when an analytics event occurs in the webchat
onWebchatOpened	Is executed when the webchat window is opened
onWebchatClosed	Is executed when the webchat window is closed

instance.onSessionCreated

You can use this event to execute your own functions when a new session is created.

instance.onSessionCreated(() => {
  instance.updateContext({
    user: { display_name: "Moveo user" },
  });
});

instance.onSessionReconnected

You should use this event to execute your own functions when a session reconnects. This will happen when you have conversation history

enabled, so each time the page refreshes, we reconnect to the existing session instead of creating a new one.

instance.onSessionReconnected(() => {
  instance.updateContext({
    user: { display_name: "Moveo user" },
  });
});

instance.onSessionClosed

This event is triggered when the chat session is terminated. This is different from onConversationClosed as it relates to the entire chat session rather than just the live chat conversation status.

instance.onSessionClosed(() => {
  console.log("Session has been terminated");
  // Handle session termination actions
});

instance.onConversationClosed

This event is triggered specifically when live chat is enabled and the conversation status changes to "closed". This can happen in two ways:

• When a live agent resolves the conversation
• When the user closes the conversation

instance.onConversationClosed(() => {
  console.log("Live chat conversation has been closed");
  window.close();
});

instance.onAnalyticsEvent

This event allows you to track various analytics events that occur within the webchat. You can use this to monitor user interactions, measure engagement, and integrate webchat activity with your existing analytics tools.

For a complete list of available analytics events and their properties, see the Analytics Events documentation

.

instance.onAnalyticsEvent((eventData) => {
  const { event, properties, timestamp } = eventData;
  console.log(`Analytics event: ${event}`, properties);
  // Implement your analytics tracking logic here
});

instance.onWebchatOpened

This event is triggered whenever the webchat window is opened, either by user interaction or programmatically.

instance.onWebchatOpened(() => {
  console.log("Webchat window has been opened");
  // Implement your custom logic here
});

instance.onWebchatClosed

This event is triggered whenever the webchat window is closed, either by user interaction or programmatically.

instance.onWebchatClosed(() => {
  console.log("Webchat window has been closed");
  // Implement your custom logic here
});