Skip to main content

​
Overview

Flow Builder can generate an embeddable chat widget that you drop into any website. The widget runs your flow as a chat assistant, giving visitors a conversational interface without leaving your site.

​
Setup

1

Open Your Flow

Navigate to your flow in Flow Builder.
2

Generate Widget Code

Click the Deploy or Widget button in the toolbar. Configure colors, position, and welcome message.
3

Copy the Script Tag

Copy the generated embed code.
4

Paste into Your Website

Add the script just before the closing </body> tag:
<script
  src="https://flow.assistable.ai/widget.js"
  data-flow-id="your-flow-id"
  data-position="bottom-right"
  data-primary-color="#4F46E5"
  data-welcome-message="Hi! How can I help you today?"
  async
></script>

​
Customization Options

AttributeDescriptionDefault
data-flow-idYour flow’s unique ID (required)—
data-positionbottom-right or bottom-leftbottom-right
data-primary-colorHex color for header and buttons#4F46E5
data-welcome-messageInitial message when opened—
data-button-textLauncher button textChat

​
Technical Details

  • Shadow DOM — Widget styles are completely isolated from your site’s CSS
  • localStorage — Conversation persists across page navigations and refreshes
  • SPA compatible — Handles React, Vue, Next.js navigation automatically
  • Lightweight — Loaded asynchronously, no impact on Core Web Vitals
  • CSP — Add flow.assistable.ai to script-src and connect-src if using strict Content Security Policy

Testing

Test your flow before embedding

Voice Connection

Deploy to voice instead

API Key Setup

Required before deployment