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: 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).
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.
Chat Button
  • Choose between custom text or a custom image for the button.
  • Adjust size and color of the button.
Fallback Message
  • Define a custom message and icon that appear if chat services are temporarily unavailable.
Domain Restriction
  • Add the domain(s) where the agent will be hosted. Restrict the widget’s visibility to approved domains only.

​
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. Paste this JavaScript code on every page where the agent should appear: 
<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. Available Parameters
ParameterDescription
welcomeMessageA custom greeting shown when the chat widget loads.
threadIdA persistent or custom thread ID for the session.
userIdA unique identifier to tie the session to a specific user.
persistentThreadIf true, the chat persists across page refreshes via localStorage.
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
      }
    });
  });
</script>

​
Best Practices

  • Match your Brand: Use your brand’s colors and logo to ensure a cohesive experience.
  • Welcome Message: Set a clear and friendly initial greeting to guide users.
  • Thread Persistence: Enable persistentThread to give returning users continuity in their conversations.
  • Custom User ID: Tie sessions to authenticated users when possible to provide context and improve support.
  • Test Before Deploying: Use the live preview to validate appearance and behavior before embedding the script into production environments.
⌘I