Skip to main content
Web Chat is a communication channel that allows end users to interact with your virtual agent directly from your website. We provide a customizable, embeddable chat widget that supports real-time interactions, ensuring a seamless, branded user experience. Once you create a Web Chat channel, you’ll be directed to a configuration screen where you can customize the widget’s appearance and behavior before deploying it to your website. Updates are previewed live on the right-hand side to help you visualize your changes.

​
Appearance Configuration

Configuration options to customize the look and feel of the chat widget using the live preview panel include:
1

General Settings

  • Add a privacy policy link.
  • Toggle sound effects of the agent replying and thinking.
  • Toggle reply format (real-time streaming vs. full message at once).
2

Chat Window

  • Customize colors for the header background, header text, accents, and highlights. You can adjust the color using hex codes or the color picker.
  • Set theme to Light, Dark, or Auto (match user’s system preference).
  • Choose an avatar, using either a custom image or letter.
3

Chat Button

  • Choose between custom text or a custom image for the button.
  • Adjust size and color of the button.
4

Fallback Message

  • Define a custom message and icon that will appear if chat services are temporarily unavailable.
5

Domain Restriction

  • Add the domain(s) where the agent will be hosted. A domain is typically the homepage of your website.

​
Agent Installation

To deploy your agents to a webpage, navigate to the Installation tab. Under this tab, you will be provided with a JavaScript code snippet to embed on your website. You will need to embed this snippet on every page where you want the chat widget to appear. The script initializes the chat window using your unique agent channel ID. Example Snippet 
<script async src="https://<your-agent-url>/chatbot.js"></script>
<script>
  window.addEventListener('load', function() {
    window.initViviChatbot({
      channelId: 'your-channel-id'
    });
  });
</script>

​
Optional Parameters

You can pass optional parameters to further control the chat session. These parameters are added inside a config block in your JavaScript embed snippet.
​
welcomeMessage
string
A custom greeting shown when the chat widget loads.
​
threadId
UUID
A persistent or custom thread ID for the session. If not provided, a unique thread ID will be generated automatically.
​
userId
UUID
A unique identifier to tie the session to a specific user. If not provided, a unique user ID will be generated and stored in localStorage.
​
persistentThread
boolean
If true, the thread ID will be stored in localStorage and persist across browser sessions. When false (default), it will be stored in sessionStorage and cleared when the tab is closed.
​
onEventEmitted
string
Use this option to listen to the events emitted by the chatbot and do something with them (i.e. tracking analytics). When listening to chatbot events, you’ll receive an event object with the following structure:
{
  type: "<event_type";
  data?: <event_data>;
}
Example Implementation 
<script async src="https://<your-agent-url>/chatbot.js"></script>
<script>
  window.addEventListener('load', function () {
    window.initViviChatbot({
      channelId: 'your-channel-id',
      config: {
        welcomeMessage: 'Hi 👋, How can I help you?',
        threadId: 'user-thread-id',
        userId: 'user-123',
        persistentThread: true,
		onEventEmitted: (event) => {
  		  switch (event.type) {
			case "message-sent":
			  // Do something when message is sent
			  break;
			case "voice-conversation-started":
			  // Do something when voice conversation start
			  break;
		  }
		}
      }
    });
  });
</script>

​
Best Practices

  • Match your brand’s colors and logo on the web chat channel to ensure a cohesive experience.
  • Set a clear and friendly initial greeting to guide users.
  • Enable persistentThread to give returning users continuity in their conversations.