Difficulty: Intermediate | Time: 15 min | Tier: All Plans
The DreamFlow live chat widget lets visitors on your website start a conversation with your team instantly. When installed, a small chat bubble appears in the corner of your site. Visitors click it, type a message, and your team sees it in DreamFlow's chat inbox — no page refresh, no delays.
Step 1: Configure Your Widget
- Navigate to Communicate > Chat in the sidebar.
- Click the Widget tab at the top.
- Customize the appearance:
- Primary color: Match your brand color so the widget feels native to your site.
- Welcome message: The first message visitors see when they open the chat (e.g., "Hi! How can we help you today?").
- Widget position: Choose bottom-left or bottom-right.
- Chat bubble icon: Select from available styles.
- Click Save Changes.
Step 2: Add FAQ Chips
FAQ chips (quick reply buttons) appear below the welcome message and let visitors get instant answers to common questions without typing.
- In the Widget tab, scroll to the FAQ Chips section.
- Click Add Chip.
- Enter a question label (e.g., "What are your hours?") and the answer text.
- Add as many chips as you like. They will appear as clickable buttons in the widget.
- Click Save Changes.
Step 3: Install the Widget on Your Website
- Click the Install Widget tab.
- Copy the embed code snippet. It looks like a single
<script>tag. - Paste the snippet just before the closing
</body>tag on every page of your website. - If you use a website builder (Webflow, WordPress, Squarespace), paste the code in the custom code / footer section of your site settings.
- Publish your site and visit it in a browser. You should see the chat bubble in the corner.
Tip
Test your widget by visiting your site in an incognito/private browser window. This ensures you see the same experience as a new visitor.
Step 4: Set Up Proactive Triggers (Optional)
Proactive triggers automatically open the chat widget after a visitor has been on your site for a set time or scrolled a certain distance.
- In the Settings tab, toggle Proactive Trigger on.
- Set the delay (e.g., 30 seconds) and optional scroll threshold (e.g., 50% of page).
- Write a trigger message (e.g., "Looking for something? I can help!").
- Click Save Changes.
Important
Proactive triggers only fire once per visitor session to avoid being intrusive. If a visitor dismisses the chat, the trigger will not fire again until their next visit.
Related Articles
Need more help? Ask Sally in the chat bubble!
Was this helpful?
Have more questions? Get instant answers.
Related Articles
Still need help? Our support team is here for you.
Contact Support