> ## Documentation Index
> Fetch the complete documentation index at: https://docs.monobot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget Configuration

> Configure chat, call, demo, and styled voice widgets for your AI agent.

Widget Configuration allows you to customize how the AI assistant appears and behaves on websites and external platforms.

The configuration is divided into several sections:

* Chat Widget
* Call Widget
* Demo Page
* Styled Call Widget

Each section provides separate appearance, behavior, and embedding settings.

## Accessing Widget Configuration

<Info>
  Widget Configuration settings can be accessed from the AI Agents list using the three-dots menu in the **Actions** column.

  1. Open **AI Agents**
  2. Find the required agent
  3. Click the **three-dots menu**
  4. Select **Widget Configuration**

  This menu provides access to chat, call, demo, and styled widget settings for the selected agent.
</Info>

<AccordionGroup>
  <Accordion title="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.

    ## Widget Settings

    ### 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

    ### Widget Position

    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.

    ### Widget Size

    * Width: Defines widget width in pixels.

    Example:

    ```text theme={null}
    350px
    ```

    * Height: Defines widget height in pixels.

    Example:

    ```text theme={null}
    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:

    ```text theme={null}
    Write a message...
    ```

    * Enable Typing Label: Displays typing indicator while the assistant generates a response.

    * Typing Text: Custom typing indicator text.

    Example:

    ```text theme={null}
    Typing...
    ```

    ### Labels

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

    Example:

    ```text theme={null}
    Start new chat
    ```

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

    Example:

    ```text theme={null}
    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:

    ```html theme={null}
    <script id="chat-js">
      ...
    </script>
    ```

    Use the **COPY** button to copy the script.
  </Accordion>

  <Accordion title="Call Widget">
    The Call Widget enables voice conversations directly from a website.

    ### Voice Selector

    The platform generates a unique `data-voice` selector attribute.

    Example:

    ```html theme={null}
    <button data-voice="voice-id">
      Call
    </button>
    ```

    This selector can be attached to:

    * Buttons
    * Custom HTML elements
    * Classes
    * External UI components

    ### Call Widget Script

    The generated script initializes the voice widget.

    Example:

    ```html theme={null}
    <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:

    ```html theme={null}
    #button
    ```

    ```html theme={null}
    .call-button
    ```

    ```html theme={null}
    data-custom
    ```

    ### Common Use Cases

    * Website call buttons
    * Voice sales assistants
    * Customer support voice access
    * Embedded voice experiences
    * Landing page call widgets
  </Accordion>

  <Accordion title="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
  </Accordion>

  <Accordion title="Styled Call Widget">
    The Styled Call Widget allows advanced customization of the voice orb appearance.

    ## Widget Style

    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:

    ```html theme={null}
    <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.

    ## Call Widget Sphere

    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:

    ```text theme={null}
    Ask me anything...
    ```

    ### Hover Caption

    Caption displayed on hover.

    Example:

    ```text theme={null}
    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:

    ```text theme={null}
    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      |
  </Accordion>
</AccordionGroup>