Install the widget

The widget is one script from Opem, the same whichever way you add it. Each way takes your project's publishable key, pk_live_…, from the Keys tab of the project's Configuration page in the dashboard.

A script tag

Put it in your page's HTML. It loads after the page and starts the widget with the key in data-project.

index.html

<script
  src="https://support.opem.app/v1/widget.js"
  data-project="pk_live_…"
  defer
></script>

An ESM import

For apps with a bundler: npm install @opem/browser, then start it once in the browser. Opem has every call below, typed.

app.ts

import { Opem } from "@opem/browser";

Opem.init({ projectKey: "pk_live_…" });

React

npm install @opem/react. The provider adds the widget's script tag once per page, so the wrapper adds nothing to your bundle but itself, under 3 KB. OpemButton opens the panel, and useOpem() gives the calls to your own components. It works with React 18 and 19.

app.tsx

import { OpemButton, OpemProvider } from "@opem/react";

export function App() {
  return (
    <OpemProvider projectKey="pk_live_…">
      <OpemButton>Help</OpemButton>
    </OpemProvider>
  );
}

report-button.tsx

import { useOpem } from "@opem/react";

export function ReportButton({ report }: { report: string }) {
  const opem = useOpem();
  return (
    <button
      onClick={() =>
        opem.open("request", {
          kind: "problem",
          title: `${report} did not export`,
        })
      }
    >
      Report a problem
    </button>
  );
}

Which sites may load it

Opem serves the widget only to the sites you list on the Origins tab of the project's Configuration page. On any other site it removes itself and says why in the browser's console.

The widget's calls

On window.Opem with the script tag, on Opem from @opem/browser, and through useOpem() in React.

Call	What it does
init({ projectKey, … })	Starts the widget with the project's publishable key. The script tag calls it for you.
identify({ id, email?, name?, roles?, signedAt?, signature? })	Says who is using your app, after they sign in. On paid plans the identity must be signed on your server: see Identity signing.
open(tab?, { kind?, error?, title?, screenshot? })	Opens the panel, on Ask, New request or Your requests, with a request kind, an error or the message's first words filled in.
close(), toggle()	Closes the panel, or opens it when it is closed.
context({ page?, title?, extra? })	Says which page the person is on, sent with their next question or request.
reset()	Forgets the person, for example when they sign out.
on(event, handler)	Listens for open, close and navigate; returns a function that stops listening.
badge()	The number of replies the person has not read yet.