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

  • Privacy Policy Link Add a configurable link to the agent’s privacy policy within the chat widget.
  • Sounds Effects Toggle Enable or disable sound effects for agent responses and states.
  • Reply Format Toggle Switch between real-time streaming responses and full responses delivered all at once.
  • File Upload Toggle Enable or disable file uploads so the agent can receive and understand user-submitted files during chat.
  • Agent Reasoning Toggle Enable or disable agent reasoning mode, allowing reasoning-based agents with streaming enabled to display real-time workflow highlights while the final response is being computed.
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.