Embed Interactive Flows in Your Help Center

Publishing a flow as a standalone link is useful. Embedding it directly inside your product, help centre, or website is 10x more powerful — because the user never has to leave to get help.

PathPilot generates a single <iframe> snippet for every published flow. Paste it anywhere that accepts HTML — and your interactive flow renders natively, fully functional, with your branding. Here's how to do it in the tools your team is most likely already using.

Step 1: Publish your flow and get the embed code

Open any flow in PathPilot, click Publish, then click Share → Embed. You'll see a snippet that looks like this:

You can customise the height. Width should stay at 100% to be responsive. The flow handles its own scrolling internally.

Embedding in Intercom Articles

Intercom's article editor supports HTML blocks. In any article:

1. Click the + block menu and select HTML
2. Paste your PathPilot iframe snippet
3. Click Done — the flow renders in the preview immediately
4. Publish the article

The embedded flow is fully interactive for customers reading the article. They click through the decision tree without leaving Intercom. When they reach a resolution, you can configure the final node to link back to filing a ticket if they still need help.

Embedding in Zendesk Guide

Zendesk Guide uses a rich-text editor for articles. To embed:

1. Open or create an article in Zendesk Guide
2. Click the Source Code icon (the <> button) in the article toolbar
3. Paste the iframe snippet where you want it to appear
4. Click OK, then Save

Note: Zendesk may strip iframe tags depending on your account's security settings. If the embed doesn't appear, ask your Zendesk admin to whitelist app.axonave.com in your Content Security Policy, or use the Zendesk API to update articles programmatically.

Embedding in Notion

Notion supports embeds natively:

1. In any Notion page, type /embed and press Enter
2. Paste your flow's public URL (not the iframe snippet — just the URL)
3. Press Embed link

Notion will render the flow inline. You can resize the embed block by dragging the bottom edge. This works great for internal knowledge bases and team wikis.

Embedding in a custom webpage or app

The iframe snippet works in any HTML page. Drop it inside a div, a modal, a sidebar — wherever makes sense in your layout:

For a modal trigger (where the flow appears in a popup when the user clicks "Get help"), wrap the iframe in a dialog element and toggle it with a button. The flow is lightweight enough to load instantly.

Embedding in React or Next.js

In a React component, use the iframe as a JSX element:

You can lazy-load the iframe for performance by wrapping it in an IntersectionObserver or using a library like react-lazy-load-image-component.

Styling the embed to match your brand

PathPilot Pro and above let you set custom colours for your flows — primary colour, button colour, background, and font. These settings live in your workspace's Brand tab. Any flows published from that workspace will automatically use your brand colours in the embed.

This means the embedded flow looks like a native part of your product, not a third-party widget.

Tracking embed performance

PathPilot tracks completions, drop-off nodes, and branch selections regardless of whether users access the flow via the public link or the embed. All analytics appear in the same dashboard — so you can compare embed vs. direct-link performance and see which placement drives higher completion rates.