EmbeddableBot Styling Guide

Introduction

This guide explains how to customize the appearance and behavior of the EmbeddableBot using the Advanced Settings mode in the Chatbot Style Editor. These customizations allow you to match the chatbot’s look and feel to your brand or specific use case.

Configuration Structure

The EmbeddableBot customization is defined in a JavaScript object with the following top-level sections:

{
  size: { /* Size settings */ },
  title: { /* Title bar settings */ },
  body: { /* Main body settings */ },
  header: { /* Header settings */ },
  response: { /* Response/message settings */ },
  prompt: { /* Input area settings */ },
  references: { /* Knowledge base reference settings */ },
  enableRefresh: true/false,
  enableStartNewChat: true/false,
  css: /* Custom CSS styling */
}

Size Configuration

Control the dimensions of the chatbot window:

size: {
  width: 520,  // Width in pixels  
  height: 964, // Height in pixels
}

Set to null to use responsive sizing based on container.

Title Bar Configuration

Customize the title bar at the top of the chatbot:

title: {
  label: "My Chatbot", // Title (use "@flowGraphName" to show flowgraph name)  
  iconSrc: "/my-icon.svg", // Icon shown in title bar  
  backgroundSrc: "/path/to/background.png" // Background image for title bar
}

Body Configuration

Configure the main chat area:

body: {
  backgroundSrc: "/path/to/background.png" // Background image for chat body
}

Header Configuration

Add an optional header with title and subtitle:

header: {
  iconSrc: "/path/to/icon.svg", // Header icon  title: "Welcome to my chatbot", // Header title  subtitle: "Ask me anything about our products" // Header subtitle}