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 guide.
How to create a widget
Navigate to the Widget section
In the Compass 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.
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.
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.
- Navigation — Choose which tabs to display (Explore, Chat, Resources) and set the default tab visitors see first.
Customise the appearance
Switch to the Style tab to tailor the widget’s look and feel to your brand. You can configure the widget type, colours, typography, theme, and launch button appearance.See Customising Your Widget for a full breakdown of every styling option.
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 unauthorised sites from embedding your widget.See Embedding Your Widget for detailed instructions.
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.
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. |
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.
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.
Next steps
Customise Your Widget
Configure colours, typography, themes, and layout to match your brand.
Embed Your Widget
Get the embed code and add your widget to your website.
HCP Verification
Restrict widget access to verified healthcare professionals.
Creating an Agent
Set up the agent that powers your widget.