Widget Design
Widget Design lets you customize the appearance, text, branding, and behavior of the chatbot that is embedded on your website.
A Widget Design controls how the chatbot looks and what text and interface options users see. It does not determine which Knowledge Base or Workflow answers customer questions. That connection is configured separately when you create a Web channel.
A Widget Design is used by a Web channel. When you create a Web channel, you select the Widget Design that should be used by that chatbot.
Before you begin
Before creating a Widget Design, decide:
- What name you want to give the design.
- Which branding colors and logos you want to use.
- What welcome and chatbot messages you want customers to see.
- Whether you want to customize the email transcript.
- Which visibility and layout options you want to enable.
- Whether you want to customize the Version 1 or Version 2 chatbot experience.
Create a Widget Design
To create a Widget Design:
- Open Channels.
- Select Web.
- Open the Widget Design tab.
- Click Create.
- Enter or update the Widget Design settings.
- Use the live preview to review your changes.
- Click Update Preview to save your changes.
After creating a design, the editor opens with the available customization options on the left and a live chatbot preview on the right.
Configure Your Widget Design
The Widget Design editor is divided into customization sections. The available options depend on whether you are editing Version 1 or Version 2.
The editor includes:
- Widget name
- Version 1 / Version 2
- Appearance and branding
- Colors
- Text and messages
- Email transcript customization
- Visibility settings
- Live preview
Widget Design Name
The Widget Design name helps you identify the design when managing multiple designs.
You can rename a design directly from the editor toolbar.
To rename a design:
- Click the Widget Design name.
- Enter the new name.
- Confirm the change.
The name cannot be empty.
Version 1
Version 1 provides the core chatbot branding and customization options.
Chatbot Navigation and Color Schema
Use these settings to customize the main appearance of the Version 1 chatbot.
| Option | What it does |
|---|---|
| Chatbot Title | Sets the title displayed in the chatbot header. |
| Primary Color | Sets the main brand color used by the chatbot. |
| Secondary Color | Sets the secondary interface color. |
| Chatbot Logo | Adds the logo displayed in the chatbot interface. |
You can provide the chatbot logo by uploading an image or using an image URL.
Chatbot Greeting Message and Terms and Conditions
Use these options to control the initial message and legal information shown to users.
| Option | What it does |
|---|---|
| Greeting Message | Sets the welcome message displayed to users. |
| Terms and Conditions | Adds the terms and conditions associated with the chatbot. |
Email Transcript Customizations
These settings control the appearance and content of transcript emails sent to users when email transcripts are available.
| Option | What it does |
|---|---|
| Email Subject Line | Sets the subject of the transcript email. |
| Email Body Title | Sets the title displayed inside the transcript email. |
| Sender Preview Name | Sets the name users see as the sender in their email inbox. |
| Sender Email Address | Sets the sender email address used for the transcript. |
| Email Logo Path | Sets the logo displayed in transcript emails. |
| Email Footer Content | Adds footer text to transcript emails. |
Visibility Settings
Use visibility settings to control whether certain chatbot options are shown to users.
| Option | What it does |
|---|---|
| Hide Email Transcript Option | Hides the option that allows users to request an email transcript. |
Version 2
Version 2 provides additional customization options for the chatbot experience, including more detailed branding, colors, text, layout, and visibility controls.
Appearance and Branding
Use Appearance and Branding to customize the main visual identity of the Version 2 chatbot.
| Option | What it does |
|---|---|
| Chatbot Title | Sets the title displayed in the chatbot header. |
| Notifications Banner Text | Sets the text displayed in the notification banner. |
| Border Radius | Controls how rounded the chatbot interface and its elements appear. |
| Brand Logo | Sets the main brand logo displayed in the chatbot. |
| Assistant Message Icon | Sets the icon displayed next to assistant messages. |
| Search Input Logo | Sets the logo or icon displayed in the search/input area. |
| Chatbot Launcher Icon | Sets the icon used for the floating chatbot launcher. |
The Border Radius option controls the roundness of areas such as the chat window, message bubbles, buttons, input area, and navigation elements.
Available styles are:
- None
- Medium
- 2XL
- Full
Color Scheme
Version 2 provides a separate color scheme with 12 customizable colors.
| Option | What it does |
|---|---|
| Primary Color | Sets the primary brand color. |
| Navigation Background | Sets the background color of the chatbot navigation area. |
| Navigation Text | Sets the text color used in navigation. |
| Send Button Icon | Sets the color of the send button icon. |
| User Message Background | Sets the background color of user messages. |
| User Message Text | Sets the text color of user messages. |
| Assistant Message Text | Sets the text color of assistant messages. |
| Assistant Message Background | Sets the background color of assistant messages. |
| Intro Heading Text | Sets the color of the chatbot introduction heading. |
| Suggestion Button Background | Sets the background color of suggestion and FAQ buttons. |
| Suggestion Button Text | Sets the text color of suggestion and FAQ buttons. |
| Chatbot Background Color | Sets the main background color of the chatbot. |
Use the color input or color picker to select the colors for your chatbot.
Text and Messages
Use Text and Messages to customize the content users see when they open and use the chatbot.
| Option | What it does |
|---|---|
| Welcome Message | Sets the message displayed when the chatbot starts. |
| Input Placeholder | Sets the placeholder text displayed inside the message input. |
| Bot Conversations Message Info | Adds supporting information about the AI assistant shown in the chatbot. |
| Chat Conversation Intro Heading | Sets the heading displayed in the chat introduction area. |
| Banner Text | Sets the call-to-action text displayed on the collapsed chatbot bar. |
| FAQ Question 1 | Adds the first suggested question. |
| FAQ Question 2 | Adds the second suggested question. |
| FAQ Question 3 | Adds the third suggested question. |
| Terms and Conditions | Adds the terms and conditions for the chatbot. |
FAQ questions give users predefined questions they can select to start a conversation.
Email Transcript Customizations
Version 2 uses the same email transcript customization options as Version 1.
| Option | What it does |
|---|---|
| Email Subject Line | Sets the subject of the transcript email. |
| Email Body Title | Sets the title inside the transcript email. |
| Sender Preview Name | Sets the sender name shown in the user’s inbox. |
| Sender Email Address | Sets the sender email address. |
| Email Logo Path | Sets the logo displayed in transcript emails. |
| Email Footer Content | Adds footer content to transcript emails. |
Visibility Settings
Use these settings to control which chatbot features and interface elements are visible to users.
| Option | What it does |
|---|---|
| Show Feedback | Shows the feedback interface in the chatbot. |
| Show Suggestion Button Border | Adds a border around suggestion and FAQ buttons. |
| Switch to Compact View | Changes the chatbot to a more compact layout. |
| Hide Email Transcript Option | Hides the email transcript option from users. |
| Hide Email Address In Feedback Screen | Hides the email address field from the feedback screen. |
| Require Terms and Conditions | Requires users to explicitly accept the terms and conditions before starting a chat. |
When Require Terms and Conditions is disabled, the chatbot displays a notice below the input indicating that continuing means the user agrees to the terms.
Add Images and Logos
Widget Design supports images for different parts of the chatbot, including logos and icons.
You can use an image by:
- Uploading an image
- Providing an image URL
Supported image formats:
- PNG
- JPEG
- JPG
Each uploaded image can be up to 50 KB.
When using a URL, the URL must be valid and the image must be reachable. If the image cannot be loaded, the design cannot be saved until the URL issue is fixed.
Preview Your Widget
The editor includes a live preview so you can see how your changes affect the chatbot before using the design on your website.
The preview changes based on the selected version and the options you configure.
Use Update Preview to save your changes and refresh the preview.
Changes are not saved automatically. Select Update Preview after making changes.
Save Your Changes
After making changes:
- Review the live preview.
- Check that all required fields are valid.
- Click Update Preview.
- Wait for the preview to refresh.
The Update Preview button is unavailable when there are no changes to save or when required validation errors or invalid image URLs need to be fixed.
Widget Design Validation
Version 2 validates several fields before changes can be saved.
| Field | Limit |
|---|---|
| Chatbot Title | 60 characters |
| Notifications Banner Text | 600 characters |
| Input Placeholder | 60 characters |
| Bot Conversations Message Info | 60 characters |
| FAQ Question 1 | 300 characters |
| FAQ Question 2 | 300 characters |
| FAQ Question 3 | 300 characters |
| Welcome Message | Required |
| Banner Text | Required |
When validation errors are present, the relevant sections are highlighted so you can find and correct them before saving.
Delete a Widget Design
You can delete a Widget Design from the editor.
To delete a design:
- Open the Widget Design.
- Open the ⋯ menu.
- Select Delete.
- If the design is being used by a Web channel, review the listed dependencies.
- Confirm the deletion.
If the design is currently being used, you may need to confirm the deletion by entering the exact Widget Design name.
Use a Widget Design with a Web Channel
A Widget Design controls how your chatbot looks. The Web channel controls where and how that chatbot is deployed.
When creating a Web channel:
- Open Channels → Web → Embed & Deploy.
- Click Connect.
- Select a Knowledge Base or Workflow.
- Select a Widget Design.
- Enter the Allowed Domain.
- Create the Web channel.
- Use the generated embed code to add the chatbot to your website.
The Widget Design editor’s Version 1 and Version 2 tabs control customization and preview. The version used by the live website is selected when you view the embed code for the Web channel.
Widget Design at a Glance
| Area | What you can customize |
|---|---|
| Widget Name | Identify and manage your design. |
| Version 1 | Basic branding, colors, greeting, terms, email transcript, and visibility. |
| Version 2 | Advanced branding, colors, messages, FAQs, email transcript, layout, and visibility. |
| Appearance and Branding | Titles, logos, icons, banner text, and border radius. |
| Color Scheme | Colors for navigation, messages, buttons, text, and chatbot background. |
| Text and Messages | Welcome message, placeholders, intro content, FAQs, banner text, and terms. |
| Email Transcript | Email subject, title, sender information, logo, and footer. |
| Visibility Settings | Feedback, suggestion borders, compact view, transcript options, and terms requirements. |
| Images | Upload or provide URLs for supported logos and icons. |
| Live Preview | Preview how the chatbot looks before using it on your website. |