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

# Customizing Your Widget

> Configure every aspect of your widget's appearance, layout, and content to match your brand and audience.

The widget editor gives you full control over how your widget looks and behaves. Configuration is split across three areas: **General** settings, **Style** options, and **Tab Content** configuration. Each is accessible from the widget editor's tab bar.

<Tip>
  Changes are reflected in the live preview panel on the right side of the editor as you make them, so you can see exactly how your widget will appear to visitors.
</Tip>

<Tabs>
  <Tab title="General">
    The General tab controls the widget's core settings, agent assignment, footer content, and navigation structure.

    ### Widget title

    The widget title appears in the header bar of your widget. This is typically your brand name, medicine name, or a short descriptor.

    * Maximum length: **100 characters**
    * You can toggle the title on or off — when hidden, the header displays the widget avatar only

    ### Assign agent

    Select the agent that powers this widget. Only agents with an **Active** status appear in the dropdown.

    The assigned agent determines:

    * The AI model and configuration used for chat responses
    * The tone, guardrails, and compliance settings applied to conversations
    * The resources displayed in the Resources tab

    <Note>
      Changing the assigned agent will immediately change the widget's chat behavior and available resources. If the widget is already live, visitors will start receiving responses from the new agent.
    </Note>

    ### Footer text

    Add disclaimers, legal notices, or helpful information to the bottom of your widget. The footer supports rich text formatting:

    * **Bold**, *italic*, and <u>underline</u> text
    * Hyperlinks
    * Bulleted and numbered lists
    * Maximum visible length: **500 characters**

    ### Hide "Powered by RoseRx"

    Toggle this setting to show or hide the RoseRx branding at the bottom of the widget.

    ### HCP Verification

    Choose a verification method from the **HCP verification** dropdown: **No verification**, **AHPRA (Australia)**, or **NPI (United States)**. When a method is selected, visitors must verify their healthcare professional status before accessing gated widget content.

    See [HCP Verification](/guides/widgets/hcp-verification) for full details on how each method works.

    ### Talk to a Doctor button

    Toggle the **Talk to a Doctor** button to give visitors a direct entry point into the agent's Appointment Finder. You can customize the button label. The Appointment Finder itself is configured on the agent's [Workflows](/guides/agents/workflows) tab.

    ### Navigation

    Control the tab bar and tab visibility to shape the visitor experience:

    * **Hide/show tab bar** — Toggle the tab bar on or off. When hidden, only the default tab is shown.
    * **Per-tab visibility** — Choose which tabs to display: **Explore**, **Chat**, and **Resources**. You can enable or disable each independently.
    * **Default tab** — Set which tab visitors see first when they open the widget. This also serves as the home tab when visitors click the home button.

    <Tip>
      If your widget only needs the Chat experience, hide the tab bar and set Chat as the default tab for a clean, focused interface.
    </Tip>
  </Tab>

  <Tab title="Style">
    The Style tab controls the visual presentation of your widget, including layout, typography, colors, and the launch button.

    ### Widget type

    Choose how the widget appears on your website:

    | Type            | Description                                                                   | Best for                                               |
    | --------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------ |
    | **Popup**       | Opens as a centered overlay on top of the page content                        | General-purpose use, quick interactions                |
    | **Full Screen** | Fills the entire browser viewport                                             | Immersive experiences, dedicated support pages         |
    | **Slider**      | Slides in as a panel from the right side of the screen with a resizable width | Persistent access while browsing, longer conversations |

    <Tip>
      **Popup** is the most common choice for marketing websites. **Slider** works well for documentation sites or portals where visitors may want to keep browsing while chatting. **Full Screen** is ideal when the chat experience is the primary focus of the page.
    </Tip>

    ### Widget avatar

    Upload a custom avatar image that appears in the widget header and on the launch button. This is typically your product logo or brand mark.

    ### Typography

    * **Font size** — Set the base font size in pixels. This affects all text within the widget.
    * **Font family** — Choose from the following fonts:
      * Inter
      * Arial
      * Helvetica
      * Georgia
      * Times New Roman
      * Roboto
      * Open Sans
      * System UI

    ### Theme

    Select either **Light** or **Dark** mode for your widget.

    <Info>
      Both themes are designed to meet **WCAG 2.1 AA** accessibility standards for contrast ratios, ensuring your widget is readable for all visitors.
    </Info>

    ### Primary color

    Use the hex color picker to set the accent color used throughout the widget. The primary color is applied to:

    * Active tab indicators
    * Buttons and interactive elements
    * Links and highlights

    ### Button configuration

    Customize the launch button that visitors click to open the widget:

    * **Button type** — Choose from:
      * **Button** — A standard button with icon and label
      * **Icon Only** — A compact circular button with just an icon
      * **Text Only** — A minimal text link
      * **Search** — A search-bar style button
    * **Position** — Place the button on the page:
      * **Floating Right** — Fixed to the bottom-right corner
      * **Floating Left** — Fixed to the bottom-left corner
      * **Inline** — Rendered within the page flow at the position of the embed code
    * **Label** — The text displayed on the button (for Button and Text Only types)
    * **Icon** — Choose an icon for the button (for Button and Icon Only types)
    * **Background color** — Set the button's background color using a hex value
    * **Text color** — Set the button's text and icon color using a hex value
  </Tab>

  <Tab title="Tab Content">
    Each of the three widget tabs — Explore, Chat, and Resources — can be individually configured using side sheets in the editor. Click on a tab's settings icon to open its configuration panel.

    ### Explore tab

    The Explore tab serves as a landing page for your widget, helping visitors discover what the agent can help with.

    * **Title** — The heading displayed at the top of the Explore tab
    * **Description** — A short introduction or welcome message
    * **Quick links** — Add clickable cards that direct visitors to specific actions:
      * **Title** — The link card heading
      * **Description** — A brief explanation of what the link does
      * **Destination** — Where the link takes the visitor: **Chat** (opens a new chat with a pre-filled message) or **Resources** (navigates to the Resources tab)

    ### Chat tab

    The Chat tab is where visitors interact with your agent in real time.

    * **Welcome title** — The heading shown before a conversation starts
    * **Welcome description** — A short message below the title to set expectations
    * **Message placeholder** — The grayed-out hint text in the message input field (e.g. "Ask me anything about...")
    * **Suggested messages** — Pre-written prompts that visitors can click to start a conversation quickly
      * Add up to **5** suggested messages
      * Maximum **200 characters** per message
    * **Consent text** — A message shown to visitors about how their conversation data is used
    * **Disclaimer** — A disclaimer displayed in the chat interface
    * **Follow-up messages** — Toggle to allow the agent to suggest follow-up questions after each response
    * **Feedback** — Toggle to display thumbs up/down buttons on agent responses, allowing visitors to rate answer quality

    <Tip>
      Suggested messages are a great way to guide visitors toward the most common or valuable questions. Write them as natural questions your audience would actually ask.
    </Tip>

    ### Resources tab

    The Resources tab displays the documents and materials assigned to your agent.

    * **Reorder resources** — Use the move up/down controls to arrange resources in the order you want visitors to see them

    <Note>
      The resources shown in this tab are determined by the agent assigned to the widget. To add or remove resources, update the agent's [Resources](/guides/agents/resources).
    </Note>
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Match your brand" icon="paintbrush">
    Use your brand's primary color, logo, and font to create a seamless experience that feels native to your website.
  </Card>

  <Card title="Keep it focused" icon="bullseye">
    Only show the tabs your audience needs. A simpler interface leads to higher engagement.
  </Card>

  <Card title="Write clear suggested messages" icon="message">
    Use natural, audience-appropriate language. For HCPs, use clinical terminology. For patients, keep it simple.
  </Card>

  <Card title="Test both themes" icon="circle-half-stroke">
    Preview your widget in both Light and Dark mode to ensure your brand colors and content look good in either setting.
  </Card>
</CardGroup>