Opening the Widget from Your Own Buttons

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.

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

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.

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

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.

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:

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

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.

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

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.

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.

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:

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

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.

Troubleshooting

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.

The widget opens but the Appointment Finder doesn't start

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.

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.

Getting Started

Agents

Deploy

Testing

Monitor

Sales Engagement

Organization

Opening the Widget from Your Own Buttons

Before you start

Option A: Add an attribute to your button or link

Which elements it works on

Open straight into the Appointment Finder

Option B: Open the widget with JavaScript

Hiding the default launch button

Troubleshooting

Next steps

Embedding Your Widget

Workflows

​Before you start

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

​Which elements it works on

​Open straight into the Appointment Finder

​Option B: Open the widget with JavaScript

​Hiding the default launch button

​Troubleshooting

​Next steps

Embedding Your Widget

Workflows

Before you start

Option A: Add an attribute to your button or link

Which elements it works on

Open straight into the Appointment Finder

Option B: Open the widget with JavaScript

Hiding the default launch button

Troubleshooting

Next steps