Widget Configuration - Monobot CX docs

Chat Widget

The Chat Widget allows users to interact with the assistant using text conversations directly on a website.

Logo

Upload a custom widget logo. Supported formats typically include:

PNG
JPG
SVG The logo appears inside the chat widget interface.

Use Appear Schedule

Enables scheduled widget visibility. Useful for:

Business hours
Time-based support availability
Regional schedules

Open Chat Automatically

Automatically opens the chat window when the page loads. Useful for:

Lead generation
Sales funnels
Support onboarding

Defines where the widget appears on the page. Available options:

Left Bottom
Right Bottom

Margins

Vertical Margin: Controls spacing from the bottom edge of the screen.
Horizontal Margin: Controls spacing from the left or right side of the screen.

Width: Defines widget width in pixels.

Example:

350px

Height: Defines widget height in pixels.

Example:

600px

Round Corners

Controls border radius of the widget. Higher values create more rounded UI elements.

Header Background: Defines the header background color.
Header Text Color: Defines text color inside the widget header.
Close Button Color: Controls close button appearance.
Title Font Size: Defines title text size inside the header.

Dialog Settings

Background Color: Defines the main widget background color.
Font Size: Controls overall text size inside the widget.

Message Colors

Agent Message Background Color: Defines assistant message bubble color.
Agent Message Text Color: Defines assistant message text color.
User Message Background Color: Defines user message bubble color.
User Message Text Color: Defines user message text color.

Input Settings

Text Placeholder: Placeholder text displayed inside the message input field.

Example:

Write a message...

Enable Typing Label: Displays typing indicator while the assistant generates a response.
Typing Text: Custom typing indicator text.

Example:

Typing...

Labels

Start New Chat Button Text: Custom text for starting a new conversation.

Example:

Start new chat

Connecting To Agent Text: Displayed while connecting to the assistant.

Example:

Connecting to Agent...

Input Colors

Input Background Color: Defines background color of the message input field.
Input Text Color: Defines text color inside the message input.

Send Button Settings

Button Background Color: Defines send button background.
Button Text Color: Defines send button text color.
Round Corners: Controls send button border radius.
Shadow: Enables shadow effect around the button.
Disable “Powered by…” Link: Removes branding link from the widget.

Reset Design

Restores widget appearance settings to default values.

Chat Embed Script

The generated embed script allows the chat widget to be added to external websites.Example:

<script id="chat-js">
  ...
</script>

Use the COPY button to copy the script.

Call Widget

The Call Widget enables voice conversations directly from a website.

Voice Selector

The platform generates a unique data-voice selector attribute.Example:

<button data-voice="voice-id">
  Call
</button>

This selector can be attached to:

Buttons
Custom HTML elements
Classes
External UI components

The generated script initializes the voice widget.Example:

<script>
(function(d,w){
  ...
})();
</script>

Use the COPY button to copy the full embed script.

Supported Selectors

The voice widget can be attached to:

ID selectors
CSS classes
Custom HTML elements
Existing website buttons

Examples:

#button

.call-button

data-custom

Common Use Cases

Website call buttons
Voice sales assistants
Customer support voice access
Embedded voice experiences
Landing page call widgets

Demo Page

The Demo tab allows creation of a public demonstration page for the assistant.

Upload Background Image: Uploads desktop background image for the demo page.
Upload Mobile Background Image: Uploads mobile-specific background image.
Chat Widget On Demo: Displays the chat widget on the demo page.
Voice Widget On Demo: Displays the voice widget on the demo page.

Preview

Opens a preview of the configured demo page. The preview simulates how the widget appears to website visitors.

Copy Demo URL

Copies the generated demo page URL.The demo page can be shared externally for:

Presentations
Sales demos
Internal testing
Customer previews

Desktop Preview

Displays a desktop preview of the configured demo page.

Mobile Compatibility

The demo page supports mobile-specific background images for responsive layouts.

Best Practices

Use optimized background images
Verify mobile responsiveness
Keep background visuals clean
Avoid visually overloaded layouts
Test both chat and voice widgets

Styled Call Widget

The Styled Call Widget allows advanced customization of the voice orb appearance.Defines the visual layout of the voice widget.Available styles may include:

Extended widget
Floating orb
Embedded widget

Selector ID

Defines where the widget should be inserted on the webpage.Example:

<div id="selector-id"></div>

Embed Script

The generated script allows the styled voice widget to be embedded into websites.Use the COPY button to copy the script.

Live Preview

Displays a real-time preview of the styled voice widget.

Reset To Defaults

Restores all voice widget styles to default settings.Controls appearance and animation of the voice orb.

Sphere Size

Defines orb size in pixels.

Show Caption Below Sphere

Displays helper text below the orb.

Default Caption

Default caption below the orb.Example:

Ask me anything...

Hover Caption

Caption displayed on hover.Example:

Start a voice conversation

Caption Text Color

Defines caption text color.

WebGL Animation Colors

Controls animated orb colors.

Swirl Primary

Primary animation color.

Swirl Secondary

Secondary animation color.

Swirl Accent

Accent animation color.

Center Core

Center orb color.

Center Highlight

Highlight color inside the orb.

CSS Colors

Outer Glow (CSS)

Defines outer glow around the sphere.Supports transparency using RGBA values.Example:

rgba(126, 155, 255, 0.4)

Mic Icon

Controls microphone icon appearance.

Gradient Top

Top microphone gradient color.

Gradient Bottom

Bottom microphone gradient color.

Stroke

Microphone icon border color.

Common Use Cases

Use Case	Description
Voice sales assistant	Add branded voice experiences
AI website greeter	Interactive voice orb
Product demos	Public voice assistant previews
Customer support	Instant voice communication
Landing pages	Interactive call-to-action widget

Best Practices

Use consistent brand colors
Keep captions short and readable
Avoid excessive glow intensity
Test across browsers
Validate responsive behavior

Troubleshooting

Issue	Possible Cause
Widget not visible	Incorrect selector ID
Orb animation missing	Browser WebGL limitations
Script not working	Script inserted incorrectly
Colors appear incorrect	Invalid HEX/RGB format

Documentation Index

​Accessing Widget Configuration

​Logo

​Widget Settings

​Use Appear Schedule

​Open Chat Automatically

​Widget Position

​Margins

​Widget Size

​Round Corners

​Dialog Settings

​Message Colors

​Input Settings

​Labels

​Input Colors

​Send Button Settings

​Reset Design

​Chat Embed Script

​Voice Selector

​Call Widget Script

​Supported Selectors

​Common Use Cases

​Preview

​Copy Demo URL

​Desktop Preview

​Mobile Compatibility

​Best Practices

​Widget Style

​Selector ID

​Embed Script

​Live Preview

​Reset To Defaults

​Call Widget Sphere

​Sphere Size

​Show Caption Below Sphere

​Default Caption

​Hover Caption

​Caption Text Color

​WebGL Animation Colors

​Swirl Primary

​Swirl Secondary

​Swirl Accent

​Center Core

​Center Highlight

​CSS Colors

​Outer Glow (CSS)

​Mic Icon

​Gradient Top

​Gradient Bottom

​Stroke

​Common Use Cases

​Best Practices

​Troubleshooting

Accessing Widget Configuration

Logo

Widget Settings

Use Appear Schedule

Open Chat Automatically

Widget Position

Margins

Widget Size

Round Corners

Dialog Settings

Message Colors

Input Settings

Labels

Input Colors

Send Button Settings

Reset Design

Chat Embed Script

Voice Selector

Call Widget Script

Supported Selectors

Common Use Cases

Preview

Copy Demo URL

Desktop Preview

Mobile Compatibility

Best Practices

Widget Style

Selector ID

Embed Script

Live Preview

Reset To Defaults

Call Widget Sphere

Sphere Size

Show Caption Below Sphere

Default Caption

Hover Caption

Caption Text Color

WebGL Animation Colors

Swirl Primary

Swirl Secondary

Swirl Accent

Center Core

Center Highlight

CSS Colors

Outer Glow (CSS)

Mic Icon

Gradient Top

Gradient Bottom

Stroke

Common Use Cases

Best Practices

Troubleshooting