Skip to content
Sanad

Web

Your Help button opens a contact form. The user writes, sees a screenshot of the page they were on, hides or removes anything, and presses Send. The message becomes a conversation in your inbox.

Install

Not published yet

The package isn’t on npm yet: it comes with your account, under the name below.

Use it

import { configure, open } from "@sanad/support-web";

configure({
  appKey: "pk_…",                          // Support apps → keys (publishable)
  apiUrl: "https://<your support host>",
  appVersion: "4.2.0",
  userId: currentUser?.id,                 // optional: your own id for the signed-in user
});
helpButton.addEventListener("click", () => open({ language: "ar" }));

Or with a <script> tag: support.iife.js sets window.AppSupport (configure, open, close).

  • List your page’s origin in the support app’s allowed origins. A browser request from any other origin is refused.
  • CSP: allow connect-src to apiUrl. The screenshot renders the page into an SVG foreignObject, which needs img-src data: blob:. The sheet needs no 'unsafe-inline': its styles live in its shadow root, so style-src 'self' is enough.
  • Mark what must never leave the device with data-support-mask (card numbers, balances, personal details). Masked elements, password fields and every iframe are blacked out before the user sees the preview.

What it does, and what it never does

  • It never opens itself and never throws into your page. open() resolves and never rejects. Problems go to console.warn.
  • One still image of this page, taken from the DOM when Support opens, cropped to the viewport, masked, and shown on the form. There is no screen-share prompt, and it never captures other tabs or apps. The user can hide parts (burned into the pixels), remove it, or attach it. What the preview shows is exactly what is uploaded.
  • The image lives in memory only. When the service is unreachable, the message (text only) is queued in localStorage, at most 5 messages for up to 3 days, and sent when the browser is back online. The form says it will go without the screenshot.
  • Your conversations: the user’s conversations with your team, newest first, and each thread with who wrote what (you, your team, the assistant marked as AI, a notice). The user replies in the thread; a closed conversation reopens. While a list or a thread is open it checks for news every 5 seconds, and stops when the user leaves it. With userId, the list also holds the conversations your team started (say, after an error hit the user).
  • Call me: the user leaves a number (with the country code), what it’s about and, if they like, a time that suits. It lands in your inbox as a call-back.
  • The help assistant (when the app has help articles) opens first. It answers only from your articles and links the ones it used. It says so when it can’t answer, and “Talk to a person” moves to the form with the conversation attached; the user can untick it.
  • Only the allowlisted context is sent (app version, build, web, device class, language), and the form lists it under the message.
  • A random install id is used only for rate limits.

Your privacy policy: a template

When you contact support in this app, we send your message, and, if you leave them attached, a screenshot of the screen you were on and your conversation with our help assistant. We also send the app version and the device type. You see all of it before you press Send. Support messages are kept for 180 days after they are resolved.