Wonderchat Documentation
  • 👋Welcome to Wonderchat
  • Overview
    • ⚖️Pricing
    • ✨Our Features
    • 🔍Content Overview
  • Setup Guides
    • 📪Setting up your Chatbot
      • Creating Your First Chatbot
      • How to set-up a Spontaneous Greeting Message
      • Setting up Multi-lingual Chatbots
      • How to Pick Between Source Citations Options For Your Chatbot
      • Add Suggested Questions to your Chatbot
      • Selecting Between AI models for your chatbots
      • How to Crawl and Update Private Sites
      • How to Customize Your Notification Settings for Your Chatbot
    • 🤖Training your Chatbot
      • How to add or delete webpages or websites from your chatbot
      • How to manually update your Chatbot website link for Re-Crawling
      • How to use PDF and website links simultaneously as data sources for your chatbot
      • How to upload Videos and Audio files into Wonderchat
      • How to add or delete PDFs from your chatbot
      • Writing Support Documentation for AI Chatbots
    • 🖥️Adding your Chatbot to your website
      • How to Embed a Chat Widget
      • How to Embed a Chat Screen
      • Embedding for Wix
      • Embedding for Shopify
      • Embedding for WordPress
      • Embedding for Drupal
      • Embedding for Webflow
    • ✍️Correcting your Chatbot
      • How to Set Up Chatbot Corrections
      • How to Resolve Pending Corrections
      • Export and Import Corrections
    • 💅Styling your Chatbot
      • How to Adjust Chat Widget Size
      • Customizing Your Chatbot's Style and Color
      • Using Custom CSS to style your chatbot
    • 👨‍💼Human Handover for your Chatbots
      • AI Chatbot Handover to Human Support via Email
      • How to Set Up Live Chat within Wonderchat
    • 📇Collecting Leads with your Chatbot
      • How to set-up leads generation sequences
      • How to collect user names, emails and phone numbers from users
      • Turning on email notifications for every new lead collected
      • [For Enterprise Users] How to Route Chats by Topic to Sales Representatives
    • 🤝Sharing your Chatbot
      • How to Share Your Chatbot Publicly
      • How to Add Team Members to Wonderchat
    • 🔋Using Chatbot Tools
      • Set-up Custom Chatbot Tools
    • ⚙️Adding Chatbot Workflows
      • Set-up Chatbot Workflows
  • Integration Guides
    • Active Campaign
    • Calendly
    • Freshdesk
    • HubSpot
      • Adding Wonderchat Tags to Hubspot
    • Shopify
    • Slack
      • Slack (via Zapier)
    • Twilio
    • WhatsApp
    • Zapier App
    • Zendesk
    • Google Drive
    • Microsoft Sharepoint
  • FAQ
    • How To Exclude VAT/GST Charge at Checkout
    • How To Exclude VAT/GST Charge after Checkout (via Tax Refund)
    • How to Apply a Promo Code at Checkout
    • Upgrading Wonderchat Subscription
Powered by GitBook
On this page
  • Step 1: Login to Wonderchat
  • Step 2: Go to Dashboard
  • Step 3: Copy Embed Code
  • To Embed as a Chat Widget
  • To Embed as a Chat Screen
  • (Optional) Adjust Chatbot Size
  • Step 4: Login to your Webflow Account
  • Step 5: Add an Embed Element
  • Step 6: Test Your Chatbot

Was this helpful?

  1. Setup Guides
  2. Adding your Chatbot to your website

Embedding for Webflow

A Guide on How to Embed Chat Widget for Webflow Users.

PreviousEmbedding for DrupalNextCorrecting your Chatbot

Last updated 7 months ago

Was this helpful?

Embedding a chat widget for Webflow is a simple process that can be completed in a few easy steps. Here's how to do it.

Step 1: Login to Wonderchat

Sign in to

Step 2: Go to Dashboard

Inside your Wonderchat dashboard, click on the action dropdown button (⋮) to select the “Embed to website” option.

Step 3: Copy Embed Code

This code will be used to embed the widget on your Webflow site. You may choose between the formats you wish to embed:

  • Chat Widget

  • Chat Screen

To Embed as a Chat Widget

To Embed as a Chat Screen

(Optional) Adjust Chatbot Size

For a more detailed guide on how customize your chat widget or page, see the pages below:

How to Embed a Chat Widget

How to Embed a Chat Screen

Step 4: Login to your Webflow Account

Log into your Webflow account and ensure that you are on a premium subscription plan, as this is the only way to access the 'embed' function.

Step 5: Add an Embed Element

  1. Navigate to the page where you want to embed the widget.

  2. To ddd an Embed element: In the Elements panel, click on the "Embed element" and drag it to the location on the page where you want to embed the widget.

  3. Paste the widget's code: Double-click on the Embed element to open the code editor. Paste the widget's code into the editor and click the 'Save' button.

  4. Preview the page: Click the 'Preview' button to preview the page and make sure the widget is displaying correctly.

Step 6: Test Your Chatbot

Ensure the chatbot works properly by interacting with it on your live store. Test the chatbot's functionality across different devices (desktop, tablet, mobile) to make sure it's responsive.

That's it! You have successfully embedded a chat widget on your Webflow site. Visitors to your site can now use the chat widget to get in touch with you.

If you have any more questions, feel free to reach out to us at support@wonderchat.io

If the chatbot widget needs to be resized or repositioned, you can modify your changes on the before copying the embed code over.

🖥️
Wonderchat App
Wonderchat App
Go to "Dashboard" and under actions, click on the “⋮” and go to “Embed to website”
Go under "Widget" tab > click "Copy to Clipboard"
Go under "Page" tab > click "Copy to clipboard"
Configure your customizations and preview widget, before copying the embed code over
Login to Wonderchat App ()
https://app.wonderchat.io/auth/sign-in