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

# Creating a Widget

> Build and configure an embeddable chat widget to deploy your RoseRx agent on any website.

Widgets are the way you bring your RoseRx agent to your audience. A widget is an embeddable chat interface that you can add to any website with a single line of code — giving your visitors instant access to your AI-powered agent without leaving your site.

Each widget is connected to a single agent, and you can create multiple widgets for different websites, audiences, or use cases.

<Info>
  Before creating a widget, make sure you have at least one active agent configured. If you haven't created an agent yet, start with the [Creating an Agent](/guides/agents/creating-an-agent) guide.
</Info>

## How to create a widget

<Steps>
  <Step title="Navigate to the Widget section">
    In the RoseRx dashboard, open the **Deploy** section in the left sidebar and click **Widget**. This takes you to the widget management page where you can view all your existing widgets or create a new one.
  </Step>

  <Step title="Click Create Widget">
    Click the **Create Widget** button to open the widget editor. You'll see the configuration panel on the left and a live preview on the right.
  </Step>

  <Step title="Configure General settings">
    In the **General** tab, set up the core details of your widget:

    * **Widget Title** — Give your widget a name that appears in the header bar.
    * **Assign Agent** — Select the agent that will power this widget's chat experience.
    * **Footer Text** — Add any disclaimers, legal text, or helpful links using the rich text editor.
    * **HCP Verification** — Choose a verification method for gating content: **No verification**, **AHPRA (Australia)**, or **NPI (United States)**. See [HCP Verification](/guides/widgets/hcp-verification).
    * **Talk to a Doctor button** — Optionally show a button (with a customizable label) that launches the agent's Appointment Finder, configured on the agent's [Workflows](/guides/agents/workflows) tab.
    * **Navigation** — Choose which tabs to display (Explore, Chat, Resources) and set the default tab visitors see first.

    <Tip>
      The agent you assign determines what knowledge and guardrails the widget uses. Its resources will automatically populate the widget's Resources tab.
    </Tip>
  </Step>

  <Step title="Customize the appearance">
    Switch to the **Style** tab to tailor the widget's look and feel to your brand. You can configure the widget type, colors, typography, theme, and launch button appearance.

    See [Customizing Your Widget](/guides/widgets/customization) for a full breakdown of every styling option.
  </Step>

  <Step title="Set up domain restrictions">
    In the **Embed** tab, configure which websites are allowed to display your widget. Domain restrictions add a layer of security by preventing unauthorized sites from embedding your widget.

    See [Embedding Your Widget](/guides/widgets/embedding) for detailed instructions.
  </Step>

  <Step title="Preview your widget">
    As you make changes, the preview panel on the right side of the editor updates in real time. Use this to check your widget's appearance, test tab navigation, and review content before going live.

    <Tip>
      You can preview your widget in real time as you configure it using the preview panel on the right side of the editor. This is the fastest way to iterate on your design.
    </Tip>
  </Step>

  <Step title="Activate and save">
    When you're happy with your configuration, toggle the widget status to **Active** and click **Save**. Your widget is now ready to be embedded on your website.
  </Step>
</Steps>

## Widget statuses

Every widget has one of three statuses that controls its availability:

| Status       | Description                                                                                                                                      |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Draft**    | The widget is still being configured. It cannot be embedded or accessed externally. This is the default status for new widgets.                  |
| **Active**   | The widget is live and can be embedded on websites. The embed code will only work when the widget is in this status.                             |
| **Inactive** | The widget is paused. It remains configured but will not load on any website. Use this to temporarily take a widget offline without deleting it. |

<Note>
  You can change a widget's status at any time from the widget editor. Switching a widget to Inactive will immediately stop it from loading on any website where it's embedded.
</Note>

## Assigning an agent

Each widget is powered by a single agent. When you assign an agent to your widget:

* The agent's AI model, tone, and configuration drive the **Chat** tab experience.
* The agent's uploaded resources automatically populate the widget's **Resources** tab.
* The agent's guardrails and compliance settings apply to all conversations within the widget.

Only agents with an **Active** status are available for assignment. If you don't see the agent you're looking for, check that it has been activated in the [Agent settings](/guides/agents/general-settings).

## Next steps

<CardGroup cols={2}>
  <Card title="Customize Your Widget" icon="palette" href="/guides/widgets/customization">
    Configure colors, typography, themes, and layout to match your brand.
  </Card>

  <Card title="Embed Your Widget" icon="code" href="/guides/widgets/embedding">
    Get the embed code and add your widget to your website.
  </Card>

  <Card title="HCP Verification" icon="user-shield" href="/guides/widgets/hcp-verification">
    Restrict widget access to verified healthcare professionals.
  </Card>

  <Card title="Creating an Agent" icon="robot" href="/guides/agents/creating-an-agent">
    Set up the agent that powers your widget.
  </Card>
</CardGroup>