Embed the ticket portal

Drop-in ticket portal: floating-button script, raw iframe, or the npm package — list, create and reply to tickets inside your app.

Embed the ticket portal

The hosted ticket portal (/embed/tickets) is a complete support surface your customers can use without leaving your app: list their tickets, open a new one, and read/reply to agent responses. It runs as an iframe, so it works in any web page or a mobile WebView.

Option A — script tag (floating button)

One tag adds a "Support" bubble that opens the portal in a modal:

<script
  src="https://answerridge.com/embed/ticket-loader.js"
  data-api-key="ar_live_xxx"
  data-support-token="<token minted by your backend>"
  data-primary-color="#0E9E94"
  data-company-name="Acme Inc."
  data-button-label="Support"
  async
></script>

Attributes (all optional except data-api-key):

  • data-support-token — customer identity token (recommended for signed-in users)
  • data-customer-email / data-customer-name — pre-fill when there's no token
  • data-primary-color, data-company-name, data-logo-url — branding
  • data-position — bottom-right (default) or bottom-left
  • data-view — list (default), create, or detail (with data-ticket-id)

Control it from JS: AnswerRidgeTickets.open() / .close() / .toggle() / .destroy().

Option B — raw iframe

<iframe
  src="https://answerridge.com/embed/tickets?apiKey=ar_live_xxx&support_token=eyJhbGciOi…"
  style="width:100%;height:640px;border:none;border-radius:12px"
  title="Support"
></iframe>

Query params: apiKey (required), support_token or customerEmail/customerName, primaryColor, companyName, logoUrl, view (list|create|detail), ticketId (with view=detail).

Option C — React / Next.js package

npm install @answerridge/answer-ridge-support
import { AnswerRidgeSupport } from '@answerridge/answer-ridge-support';

<AnswerRidgeSupport
  supabase={supabase}          // your app's Supabase client
  apiKey={process.env.NEXT_PUBLIC_ANSWERRIDGE_API_KEY}
  tenant="your-tenant-slug"
  primaryColor="#0E9E94"
/>

Deep-linking a ticket

To open a specific ticket (e.g. from a notification), use view=detail&ticketId=<uuid>. The user still needs a valid token or email for the ticket to load.