Visitor support on your own site

Beta: this may change without notice.

Sites Syndai hosts get the button on their own. A site you host yourself can have it too, as long as its project is connected from GitHub. Visitors can ask a question, report a bug with a screenshot, or suggest a feature. Requests reach you the same way as on a hosted site, and the ones you approve become pull requests.

1. Turn it on

In the portal, open the project's Site page and choose Add visitor support to your site. It uses the site address you already set for the project. The www version of that address and localhost work too, so you can try the button while you build.

2. Add the snippet

Paste the two script tags from the Site page into your site's root layout, just before </body>. If your site sends a Content Security Policy, add the line shown under the snippet. It lets your pages load the script and open the panel from your project's syndai.app address.

Your pages can tell the panel more:

• Syndai.open("bug") or Syndai.open("feature") opens the panel at that request.
• Syndai.setContext({ storyId: "12" }) adds up to 20 short values to bug reports. Keys that look like secrets (token, password, key) are dropped.
• Syndai.setLauncher(false) hides the button, for example on a full-screen page. Your own button can still call Syndai.open().
• Syndai.actions([{ id: "captions_on", label: "Show captions", hint: "Turns on captions", run }]) gives the panel up to 12 buttons that run your own code, such as turning a setting on. The assistant may suggest one under an answer; it only ever names an id you gave it.
• Syndai.topics([{ id: "video", label: "Video", help: "Playback or loading", text, actions, choices, report }]) puts up to 6 guided topics first in the panel: your text, your action buttons, follow-up choices, then a bug report with your placeholder (report: { kind: "bug", placeholder }, or report: false for none). Call it again whenever the page changes.

The panel takes your site's colors, font and corner radius. To set them yourself, add data-theme-ground, data-theme-ink, data-theme-accent, data-theme-on, data-theme-radius or data-theme-dark="1" to the loader's script tag.

To keep part of a page out of screenshots, add data-private to it.

3. Answers to visitors' questions

Answers come from your site's own pages, so Syndai first needs to know the site is yours. Your Search Console connection is enough. Without one, add the TXT record the Site page shows. Then:

1. Add the privacy sentence from the Site page to your privacy policy.
2. If a bot wall such as Cloudflare's protects your site, let requests that carry the header shown on the Site page through.
3. Choose Refresh. Syndai reads your sitemap (/sitemap-index.xml, else /sitemap.xml) and your pages, and answers start once it finds the privacy sentence.

Syndai reads the site again each day, and whenever you choose Refresh.

4. Languages

The button, the panel and every request page appear in the visitor's language, chosen from your page's lang and the browser. Each request also carries a short English summary, so votes for the same request in different languages add up.