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

# Opening the Widget from Your Own Buttons

> Open the RoseRx chat from any button or link on your website, using an HTML attribute or a line of JavaScript.

By default, visitors open the widget by clicking the RoseRx launch button. If your website already has its own buttons or links, such as a "Chat with us" link in your header or a "Talk to a doctor" button on a product page, you can make those open the widget too.

There are two ways to do it:

* **An HTML attribute.** Add `data-roserx-open` to an existing button or link. No JavaScript needed.
* **JavaScript.** Call `window.RoseRx.open()` from your own code.

## Before you start

* Your widget is **saved** and its status is **Active**.
* The RoseRx embed script is installed on the same page as your button. See [Embedding Your Widget](/guides/widgets/embedding).

<Tip>
  The **Embed** tab in the widget editor shows ready-to-copy examples of these attributes under **Custom Button**.
</Tip>

## Option A: Add an attribute to your button or link

Add the `data-roserx-open` attribute to the element you want to open the chat.

```html theme={null}
<a href="#" data-roserx-open>Chat with us</a>

<button type="button" data-roserx-open>Ask a question</button>
```

When a visitor clicks it, the widget opens exactly as if they had clicked the RoseRx launch button.

### Which elements it works on

The attribute works on **any HTML element**: `<button>`, `<a>`, `<div>`, `<span>`, `<img>` and so on.

* **Clicks inside the element count.** If your button contains an icon or a `<span>`, clicking those opens the widget too.
* **Elements added later work.** Buttons rendered after the page loads, for example by a single-page app, a modal, or a cookie banner, work without any extra setup.
* **The element's own click behavior is canceled.** A link with the attribute does not navigate anywhere, which is why `href="#"` is fine. A submit button inside a form does not submit the form.

<Note>
  For accessibility, use a `<button>` or an `<a>`. A `<div>` or `<span>` responds to mouse clicks and taps, but keyboard and screen-reader users cannot reach it unless you add `tabindex="0"`, a `role`, and your own keyboard handling. A `disabled` button does not respond to clicks, so it will not open the widget.
</Note>

### Open straight into the Appointment Finder

If your agent uses the Appointment Finder, you can open the widget and start the Appointment Finder in one click. Set the attribute's value to `appointment-finder`:

```html theme={null}
<a href="#" data-roserx-open="appointment-finder">Talk to a doctor</a>
```

This only works when the widget's assigned agent is set up for it:

* The agent is a **patient** agent.
* In the agent's [Workflows](/guides/agents/workflows) settings, the **Sub-agent** is set to **Appointment Finder**.
* At least one care pathway, **Telehealth** or **In-Person**, is enabled under Care Workflows.

If any of these is missing, the button still opens the widget, but the Appointment Finder does not start. The browser console shows `RoseRx: Appointment Finder is not enabled for this widget.`

<Info>
  The **Embed** tab only shows the Appointment Finder example when the assigned agent meets these requirements. If you don't see it, check the agent's Workflows settings.
</Info>

## Option B: Open the widget with JavaScript

Use this when opening the chat is part of your own code, for example after a visitor completes a form or reaches a certain step on your page.

The embed script adds these functions to the page:

| Function                                             | What it does                                       |
| ---------------------------------------------------- | -------------------------------------------------- |
| `window.RoseRx.open()`                               | Opens the widget                                   |
| `window.RoseRx.open({ flow: "appointment-finder" })` | Opens the widget and starts the Appointment Finder |
| `window.RoseRx.close()`                              | Closes the widget                                  |

```javascript theme={null}
document.querySelector("#my-help-button").addEventListener("click", function () {
  // Guard the call in case the embed script is still loading.
  if (window.RoseRx && window.RoseRx.open) {
    window.RoseRx.open();
  }
});
```

The Appointment Finder option has the same requirements as the `appointment-finder` attribute value above.

<Note>
  `window.RoseRx.open` only exists once `embed.js` has loaded, so guard your call as shown above. If the widget is still starting up when you call `open()`, the request is held and carried out as soon as the widget is ready. If the widget cannot load at all, for example because it is inactive or the domain is not allowed, the call does nothing.
</Note>

## Hiding the default launch button

If you want visitors to open the widget only from your own buttons and links, add `data-hide-button="true"` to the RoseRx script tag:

```html theme={null}
<script
  src="https://app.roserx.ai/embed.js"
  data-widget="YOUR_WIDGET_ID"
  data-hide-button="true"
></script>
```

The RoseRx launch button is no longer shown, but everything else keeps working: your custom buttons, the JavaScript functions, and conversations that continue across page loads.

<Warning>
  With the launch button hidden, your own buttons are the only way to open the widget. Make sure every page that loads the embed script has at least one of them.
</Warning>

## Troubleshooting

<Accordion title="Clicking my button does nothing">
  * Confirm the RoseRx embed script is on the same page as the button.
  * Confirm the widget status is **Active**, and that the page's domain is in the allowed list if domain restrictions are enabled.
  * Check the attribute is spelled exactly `data-roserx-open`.
  * If the element is a `<button>`, check it isn't `disabled`.
  * Open your browser's developer console and check for error messages.
</Accordion>

<Accordion title="The widget opens but the Appointment Finder doesn't start">
  * Check the attribute value, or the `flow` option, is exactly `appointment-finder`. Any other value opens the widget normally and logs `RoseRx: Unknown widget flow.` in the console.
  * Check the agent meets the requirements in [Open straight into the Appointment Finder](#open-straight-into-the-appointment-finder).
</Accordion>

<Accordion title="The console says window.RoseRx is undefined">
  * The embed script had not finished loading when your code ran. Guard the call with `if (window.RoseRx && window.RoseRx.open)`, or use the `data-roserx-open` attribute instead, which needs no timing.
</Accordion>

<Accordion title="My link navigates away or my form stops submitting">
  * The attribute cancels the element's normal click behavior. Put it on an element whose only job is to open the chat, rather than on a link or submit button that also needs to do something else.
</Accordion>

## Next steps

<CardGroup cols={2}>
  <Card title="Embedding Your Widget" icon="code" href="/guides/widgets/embedding">
    Install the embed script and set up domain restrictions.
  </Card>

  <Card title="Workflows" icon="diagram-project" href="/guides/agents/workflows">
    Set up the Appointment Finder and care pathways for your agent.
  </Card>
</CardGroup>