Embedding for Webflow
A Guide on How to Embed Chat Widget for Webflow Users.
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 Wonderchat App
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
If the chatbot widget needs to be resized or repositioned, you can modify your changes on the Wonderchat App before copying the embed code over.
For a more detailed guide on how customize your chat widget or page, see the pages below:
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
Navigate to the page where you want to embed the widget.
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.
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.
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
Last updated
