How do I add a chat widget to my SaaS app?

Paste the one-line script tag from Settings → Install before the closing body tag. A launcher appears in the bottom-right corner. Pass user details through window.RoperSettings if you want them in your inbox.

Does it work with React, Next.js or Vue?

Yes. It is a plain script that mounts its own iframe, so it works on any front end. For single-page apps, call window.Roper("identify", ...) after login so conversations carry the user.

Will it slow my site down?

The script loads with the async attribute, so it does not block your page. The chat itself runs in an iframe.

Can I change the colours and greeting?

Yes. Brand name, accent colour, logo and greeting are set in Settings and read when the widget loads, with no code changes.

Can customers send files?

Yes. The widget supports attachments, and a message containing only attachments goes straight to your team because the bot cannot read files.

A live chat widget for your SaaS app, installed with one script tag

Add a chat launcher to your app with one script tag. Customers search your help center, get cited answers from the bot, or tap to talk to a person, and replies appear live.

By the Roper team · Published 5 November 2026

The short answer

Roper's chat widget installs with one script tag before the closing body tag. It shows a launcher bubble, a Home tab with help-center search, a chat with the AI bot that cites articles, a "Talk to a human" option that creates a ticket, and a Messages tab with the visitor's past conversations. You can pass logged-in user details so you never ask for an email. It is included in every plan from $19 a month.

Roper is made by the team that wrote this post. Figures for other tools come from their own public pages, listed under Sources, and are list prices in US dollars that can change.

What the customer sees

A launcher bubble in the bottom-right corner, in your accent colour, with an unread dot when you have replied.
A Home tab with your greeting, help-center search and an "Ask a question" button.
A chat with the bot that answers from your help center, cites the articles it used and is labelled as an AI.
"Talk to a human" that asks for a name and email once (skipped if your app passes them) and opens a ticket.
A Messages tab listing the visitor's conversations with status and unread markers.
Live replies. Your replies appear instantly in the widget, with a polling fallback if the live connection drops.
Attachments, so customers can send a screenshot with a bug report.

Install

Paste this before </body> in your app. Settings → Install shows the snippet with your host and key filled in.

<script src="https://your-roper-host/widget.js" data-key="wk_XXXX" async></script>

Pass the logged-in user

Before the widget script, set window.RoperSettings with userId, name, email and any meta you want shown in your inbox sidebar, such as plan and company. For single-page apps, call window.Roper("identify", {...}) after login. This is not verified identity: anyone can set any user id, so never use it to authorize anything.

Control it from your code

window.Roper("open") opens the panel, for example from a Help link in your menu.
window.Roper("close") closes it.
window.Roper("identify", { name, email, userId, meta }) attaches the logged-in user.

If your app sets a Content Security Policy, allow your Roper host in script-src and frame-src.

What it does not do

It shows a small "Powered by Roper" credit.
The AI notice and labels cannot be turned off while the bot is answering.
There are no proactive messages, targeted campaigns or product tours.
It is a web widget. There is no mobile SDK.
If your subscription lapses, the widget disappears from your site until you renew. Nothing is deleted.

Questions

Common questions

How do I add a chat widget to my SaaS app?: Paste the one-line script tag from Settings → Install before the closing body tag. A launcher appears in the bottom-right corner. Pass user details through window.RoperSettings if you want them in your inbox.
Does it work with React, Next.js or Vue?: Yes. It is a plain script that mounts its own iframe, so it works on any front end. For single-page apps, call window.Roper("identify", ...) after login so conversations carry the user.
Will it slow my site down?: The script loads with the async attribute, so it does not block your page. The chat itself runs in an iframe.
Can I change the colours and greeting?: Yes. Brand name, accent colour, logo and greeting are set in Settings and read when the widget loads, with no code changes.
Can customers send files?: Yes. The widget supports attachments, and a message containing only attachments goes straight to your team because the bot cannot read files.

Sources

Answer the repeat questions once, and keep the human path open.

One inbox, one help center, one flat price. $19 a month for Pro.