Instance Methods and Events

The web widget upon initialisation 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 many 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:

MethodDescription
openWindowOpen webchat window if it is currenlty closed
closeWindowCloses webchat window if it is currenlty opened
sendMessageSend the specified message to the assistant
updateContextUpdate the context of the user
setCSSVariablesOverrides the exposed css variables so the web-widget can be custom styled
setLocaleWill update 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('This is a sample text message');

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 below

Available locales
  • de
  • el
  • en
  • es
  • fr
  • it
  • es
  • pt-BR
  • ro
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:
VariablesDescription
--moveo-background-colorThe primary color of web widget
--moveo-accent-colorThe secondary color of the web widget
--moveo-header-heightThe height of the web widget header
Example
instance.setCSSVariables({
'--moveo-background-color': 'red',
'--moveo-accent-color': 'blue',
});

Events:

EventDescription
onSessionCreatedIs executed every time a new session is created

instance.onSessionCreated

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

Example
instance.onSessionCreated(() => {
instance.updateContext({
user: { display_name: 'Moveo user' },
});
});
Last updated on