Basic Tutorials
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:
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 |