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 behaviour, 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 virtual assistant.
updateContext	Updates the context of the user.
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 programmaticaly send a text message to the assistant.

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.setLocale

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

Available locales

Code	Language
de	:flag-de: German
el	:flag-gr: Greek
en	:flag-us: English
es	:flag-es: Spanish
fr	:flag-fr: French
it	:flag-it: Italian
bg	:flag-bg: Bulgarian
pt-br	:flag-br: Portuguese (Brazil)
ro	:flag-ro: Romanian
pl	:flag-pl: Polish
cs	:flag-cz: Czech
id	:flag-id: Indonesian
nl	:flag-nl: Dutch
sr	:flag-rs: Serbian
sv	:flag-se: Swedish
ru	:flag-ru: Russian
sq	:flag-al: Albanian
zh	:flag-cn: Chinese
ar	:flag-sa: Arabic
ja	:flag-jp: Japanese
tr	:flag-tr: Turkish

Example

instance.setLocale('en');

instance.setCSSVariables

This method can be used to change 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 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
onConversationClosed	Is executed every time a conversation 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.onConversationClosed

You can use this event to handle the cases when the conversation is closed.

instance.onConversationClosed(() => {
  console.log('Resolved');
  window.close();
});