Want to see the chat widget in action? Watch this quick demo that shows you how the Bland AI Chat Widget on your website. In just a few minutes, you’ll learn how to add powerful AI chat capabilities to enhance your user experience. You can set up the agent with a pathway ID, which can be found in the Bland Dashboard.

​
Installation

To add the Bland Chat Widget to your website, add the following code to your HTML: 
<script src="https://cdn.jsdelivr.net/gh/CINTELLILABS/bland-client-js-sdk@main/dist/lib/chat-widget.js"></script>
<script>
  window.BLAND_CHAT_CONFIG = {
    pathwayId: "your-pathway-id",
    // Optional configurations:
    position: "bottom-right",     // Options: bottom-right (default), bottom-left, top-right, top-left
    offset: { x: 20, y: 20 },     // Custom offset from the edge
    primaryColor: "#151515",      // Custom color for the widget
    buttonBackgroundColor: "#151515", // Custom color for the chat button
    headerBackgroundColor: "#151515", // Custom color for the header
    chatTitle: "Chat Support",    // Custom title for the chat window
    iconUrl: "https://example.com/icon.svg", // Custom icon for the chat button
    headerLogoUrl: "https://example.com/logo.svg", // Custom logo for the header
    width: 350,                   // Width of the chat container in pixels
    height: 500,                  // Height of the chat container in pixels
    buttonSize: 60               // Size of the chat button in pixels
  };
</script>

​
Configuration Options

The chat widget can be customized using the following configuration options:
OptionTypeDefaultDescription
pathwayIdstringRequiredThe ID of the pathway to use for chat
positionstring”bottom-right”Widget position on screen
offsetobject{ x: 20, y: 20 }Custom offset from screen edge
primaryColorstring”#151515”Main widget color
buttonBackgroundColorstring”#151515”Chat button background color
headerBackgroundColorstring”#151515”Chat header background color
chatTitlestring”Chat Support”Title shown in chat window
iconUrlstring-Custom chat button icon URL
headerLogoUrlstring-Custom header logo URL
widthnumber350Chat container width
heightnumber500Chat container height
buttonSizenumber60Chat button diameter