Support Documentation

How to embed interactive Supademo walkthroughs in support docs on Zendesk, Intercom, GitBook, and Notion, with SOP exports keeping written steps in sync.

Interactive support documentation replaces the static screenshots in help articles with clickable demos, so customers solve the problem by doing the steps instead of decoding them from prose. A Supademo embeds directly into Zendesk, Intercom, GitBook, Notion, and other knowledge bases; the same demo also exports as a written SOP for readers who want text, and when the UI changes you update the master once and every embedded copy refreshes.

How to build it in Supademo

1. Start from your ticket data: record the top recurring how-do-I tasks as guided demos, 5 to 8 steps each, one task per demo.

2. Copy the embed code or share link from the demo's share modal, then place it in the article for your platform:

   • Zendesk: in the article editor, use the source or embed option and paste the iframe embed code.

   • Intercom: paste the demo's share link into the article body; Intercom embeds it automatically.

   • GitBook: paste the share link into an embed block, or use the Supademo integration for GitBook.

   • Notion: paste the share link and choose Embed from the paste menu.

   • Other platforms, including Confluence, Document360, HelpScout, and Freshdesk, follow the same two patterns; see instructions for popular apps.

3. Add the SOP export below each embed as the written version of the same steps, generated from the demo so the two never drift apart.

4. Reuse the same demos in bigger surfaces: group task demos into a Showcase for setup guides, and put the whole set inside your product as a Demo Hub so users find answers without leaving the app.

5. Make the content machine-readable: enable Steps and SEO titles so each instruction is indexable by search engines and readable by AI support assistants answering on top of your docs.

6. Watch per-step drop-off on each embedded demo. The step where readers bail is where the article is confusing, and views by article tell you which docs are pulling their weight.

Example: For common support questions where users want quick, visual instructions, this Wells Fargo demo shows exactly how to request a Zelle payment in the mobile banking app — the kind of walkthrough that resolves a ticket before it's filed.

See the Wells Fargo support walkthrough →

Recommended setup

Decision	Recommendation
Demo type	Guided screenshot demo, 5 to 8 steps, one task each
Sharing method	Inline embed per help article, SOP export beside it, Demo Hub in-app
Analytics to watch	Views per demo, per-step drop-off, completion on ticket-deflection demos

Frequently asked questions

How do I embed an interactive demo in Zendesk?

Copy the iframe embed code from your Supademo's share modal, open the Zendesk article editor's source or embed option, and paste it where the walkthrough belongs. The demo renders inside the article, and future edits to the demo appear in the article automatically. A step-by-step walkthrough is in instructions for popular apps.

How do I embed a demo in Notion or GitBook?

Paste the demo's share link. Notion offers Embed in its paste menu; GitBook renders it through an embed block or the Supademo integration. Both display the fully interactive demo inline, not a thumbnail.

Can AI chatbots use my interactive documentation?

Yes. Enable Steps so each demo instruction is exposed as indexable text; AI support assistants and search engines can then read the exact steps and answer from them. You can also train a Supademo AI Demo Agent on your demos and docs so users ask a question and get walked through the answer.