Guided Flow demo & embed guide

One script tag. Forms anywhere.

Embed any guided flow with a single line of HTML. Inline, button, modal, or slide-over. Auto-resizing, fully branded, works on every major website builder.

This is the self-serve demo for Guided Flows, for when customers find you. Sending prepared documents to people you already know? Try the Document Automation demo →

From intake to signed deal, all in one tool

Every submission lands in our kanban pipeline, ready to triage, assign, and advance through your stages. Collect payment at any step through your Stripe account. When you're ready to close, auto-generate an e-signature contract pre-filled from the flow's own answers. One subscription replaces your separate form, e-signature, and automation tools.

IntakePaymentContract
Quick start

Paste our snippets anywhere

Drop a single <script> tag onto your page. It loads our widget, renders the form, handles resizing, and submits answers back to your DocOtto dashboard. Same widget, four ways to surface it. Pick the one that fits where the form lives in your funnel.

Inline

Renders directly in the page

The flow appears where you place the script tag, taking up the available width and auto-resizing as the user navigates. Best for dedicated landing pages and "Get a quote" sections.

Split two-column layout·Use forDedicated intake pages, contact sections, embedded sign-up flows
HTML
<div id="docotto-flow"></div>
<script
  src="https://docotto.com/embed.js"
  data-flow="embed-demo"
  data-mode="inline"
  async></script>
Live demoDemo 1

Sample is inert

Click Paste HTML in Sample on the left to activate this demo.

Build this in DocOtto

Button

Branded button opens a modal on click

A styled button renders where you place the script tag. Clicking it opens the flow in a centered modal overlay. Best for CTAs that don't need to occupy permanent page real estate.

Magazine layout·Use for"Book a call" buttons, hero CTAs, sidebar conversions
HTML
<script
  src="https://docotto.com/embed.js"
  data-flow="embed-demo"
  data-mode="button"
  data-button-text="Get started"
  data-color="#1B64F2"
  async></script>
Live demoDemo 2

Sample is inert

Click Paste HTML in Sample on the left to activate this demo.

Build this in DocOtto

Modal

Same as button, an alias for clarity

Identical behavior to button mode. It's kept as a separate value because some users find "modal" more intuitive in their snippet config. Pick whichever name fits your team's vocabulary.

Stepper layout·Use forWhen your team thinks in modals, not buttons
HTML
<script
  src="https://docotto.com/embed.js"
  data-flow="embed-demo"
  data-mode="modal"
  data-button-text="Open form"
  data-color="#0f172a"
  async></script>
Live demoDemo 3

Sample is inert

Click Paste HTML in Sample on the left to activate this demo.

Build this in DocOtto

Slide-over

Drawer slides in from the right edge

A button opens a right-edge drawer that slides over the page content. Less interruptive than a modal, since visitors can still see the page they were on. Great for persistent capture without blocking content.

Conversational layout·Use forFloating "Contact us" CTAs, persistent help/quote drawers
HTML
<script
  src="https://docotto.com/embed.js"
  data-flow="embed-demo"
  data-mode="slide-over"
  data-button-text="Contact us"
  data-color="#1B64F2"
  async></script>
Live demoDemo 4

Sample is inert

Click Paste HTML in Sample on the left to activate this demo.

Build this in DocOtto
Customization

Make it yours by changing a few words

The snippet has four plain-text settings. To change one, just edit the text between the quotation marks. No coding, nothing to install.

A finished snippet, all four settings filled in

Example: edit the text in quotesHTML
<script
  src="https://docotto.com/embed.js"
  data-flow="spring-cleanup-quote"
  data-mode="button"
  data-button-text="Get my free quote"
  data-color="#1B64F2"
  async></script>

You rarely need to type any of this. The Share panelinside the builder generates the finished snippet with your form's settings already filled in. Copy, paste, done.

Which form it shows

data-flowRequired

Points the widget at one of your published forms. Every published form has a short name at the end of its web address: in forms.docotto.com/spring-cleanup-quote, the short name is spring-cleanup-quote. Copy yours from the builder’s Settings panel, where it’s labeled “URL slug.”

If you skip it: Required. Without it the widget doesn’t know which form to open.

How it appears on your page

data-mode

Four choices: inline shows the form right on the page, button adds a button that opens it, modal opens a centered popup, and slide-over slides a panel in from the right. The live demos above show each one in action.

If you skip it: Leave it out and you get a button.

The words on the button

data-button-text

“Get my free quote,” “Check my date,” “Book now,” whatever fits your page. Only applies when there’s a button to click, so it’s ignored in inline mode.

If you skip it: Leave it out and the button says “Get started.”

The button’s color

data-color

Match the button to your brand. Use a hex color code: the 6-character code like #1B64F2 you can copy from your brand kit, your website builder’s color picker, or any free online color picker.

If you skip it: Leave it out (or mistype the code) and the button stays a safe dark navy.

Platform guides

Step-by-step for every major builder

Each platform exposes raw-HTML insertion in a slightly different place. The in-app Share panel auto-generates the exact snippet for each. These are the platforms supported today.

Squarespace

Personal plan and up

Insert via Code Block

Wix

All plans

Insert via Embed HTML element

Webflow

Up to 50K characters

Insert via Embed element

WordPress

Gutenberg or Classic

Insert via Custom HTML block

Showit

Hard refresh after publish

Insert via Custom HTML element

Notion

Public pages only

Insert via /embed command

Don't see your platform? If it accepts raw HTML, the snippet works. The in-app Share panel handles platform-specific quirks.

Security & compliance

Sandboxed by default

The embed runs in an isolated iframe, so your site and the form never share JavaScript, cookies, or DOM access.

How is my data protected?+
The flow runs inside a sandboxed iframe from forms.docotto.com. The iframe is fully isolated from your website: your code can't read submission data, and our code can't read your visitors' cookies or page content. The sandbox attribute also prevents the iframe from navigating your top page or opening unsolicited popups. Submissions are sent over TLS directly from the iframe to DocOtto's API.
Content Security Policy (CSP) requirements+
If your site uses CSP headers, allow forms.docotto.com as an iframe source. Minimum required directive: frame-src https://forms.docotto.com; (or child-src on older browsers).
Third-party cookies+
The embed does not depend on third-party cookies. Email verification uses one-time tokens, drafts use sessionStorage in the iframe, and submissions identify the respondent via the answers themselves. Safari ITP and Firefox ETP have no impact on flow functionality.
postMessage protocol+
The iframe posts four events to the parent page: docotto:ready (mount), docotto:resize (height changes), docotto:page-change (step navigation), docotto:submitted (successful completion, includes submissionId + publicToken). The parent replies to docotto:ready with docotto:init carrying its URL and origin. embed.js handles all of this automatically; if you skip the script and use a raw iframe, you can listen for these events yourself. The submission event also dispatches a bubbling DOM event ("docotto:submitted") on the iframe element so you can hook in via document.addEventListener for analytics.
Troubleshooting

Common issues

The iframe shows a 404 or blank page+
Check that the form name in data-flow exactly matches the "URL slug" shown in the builder's Settings panel. It's case-sensitive, so copy-paste it rather than retyping. Also confirm the flow is Published (status: active), since drafts can't be embedded.
The iframe stays at 800px even when content is smaller+
Auto-resize requires JavaScript on the host page. If your CSP blocks scripts or you're using a strict iframe sandbox, the postMessage resize event won't fire. Workaround: set a fixed height on the iframe via CSS, or use embed.js (which handles resize automatically).
Outcome redirects (Stripe Checkout, custom thank-you pages)+
When embedded, outcome redirects do not auto-navigate the iframe. Instead, the thank-you screen renders with a "Continue →" button that opens the redirect URL in a new tab on click. This avoids both the jarring iframe-takeover and popup-blocker issues that come with auto-opening tabs from event handlers. Visitors stay on your page and can return to the new tab when they're ready.
Modal opens but is too small / cropped+
The modal sets max-height: 90vh and max-width: 900px. On mobile, this works automatically. On desktop with very tall flows, the iframe inside the modal scrolls internally. That's expected behavior.
Multiple embeds on the same page conflict+
Each script tag renders its own widget independently, so there is no conflict. If two button-mode snippets render two buttons in the same spot, that's expected. Modal/slide-over modes share z-index, so the most-recently-opened wins if they overlap (rare).

Ready to embed your first flow?

Build a guided flow in the editor, click Share, and copy the snippet. Live on your site in under 5 minutes.

Get Started FreeBrowse templates to start

Try our generous free tier. No credit card required.