Skip to content

Widget Customization

The "Widget" tab allows you to define how your AI Staff Member's chat interface will appear and function when embedded as a chat widget on your website. This includes customizing the button that launches the chat and the appearance of the chat window itself. Proper widget customization ensures a seamless integration with your website's design and user experience.

Access this tab by navigating to a specific AI Staff Member's detail page and selecting the "Widget" tab.

1. Button Configuration

This section controls the appearance and behavior of the launcher button that appears on your website.

  • Position:

    • Choose where the widget launcher button will appear on your website. Options typically include:
      • Bottom Right (Commonly used)
      • Bottom Left
      • Top Right
      • Top Left
      • Center Right
      • Center Left
    • Selecting a position instantly updates a preview (if available) or the live widget on your linked testing environments.

  • Cover Text:

    • Enter the text that will be displayed on the launcher button.
    • Examples: "AI Staff," "Chat with us," "Need Help?," "Ask Our AI."
    • This text should be clear and invite users to initiate a conversation.

  • Button Colors (Advanced):

    • While not managed directly in the current UI, the widget button's default color (when idle) and thinking color (when the AI is processing a response) are customizable through the embed code.

2. Chat Widget Appearance

These settings control the visual elements of the chat window that opens when a user clicks the launcher button.

  • Header Text:

    • Define the text that will appear in the header of the chat window.
    • Examples: "Your AI Sales Assistant," "Holostaff Support," "Ask Our Product Expert."
    • This text provides immediate context to the user about who they are interacting with.

  • Background Color (Advanced):

    • While not managed directly in the current UI, the chat window's background color can be customized through the embed code. This allows you to match the chat window with your brand's color palette.

  • Text Color (Advanced):

    • While not managed directly in the current UI, the text color within the chat window can be customized through the embed code. This ensures readability and brand consistency.

For advanced color customization not available directly in the UI, you will typically modify properties within the embed code directly. Details on the embed code can be found in the Deployment section.

Saving Changes

Any changes made within the "Widget" tab are automatically saved soon after you make them. There is no explicit "Save" button to click within this tab. These changes are reflected visually in your deployed AI staff's widget.