Bland Chat Widget

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:

Option	Type	Default	Description
pathwayId	string	Required	The ID of the pathway to use for chat
position	string	”bottom-right”	Widget position on screen
offset	object	{ x: 20, y: 20 }	Custom offset from screen edge
primaryColor	string	”#151515”	Main widget color
buttonBackgroundColor	string	”#151515”	Chat button background color
headerBackgroundColor	string	”#151515”	Chat header background color
chatTitle	string	”Chat Support”	Title shown in chat window
iconUrl	string	-	Custom chat button icon URL
headerLogoUrl	string	-	Custom header logo URL
width	number	350	Chat container width
height	number	500	Chat container height
buttonSize	number	60	Chat button diameter