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

Login to Wonderchat App (https://app.wonderchat.io/auth/sign-in)

---

Step 2: Go to Dashboard

Go to "Dashboard" and under actions, click on the “⋮” and go to “Embed to website”

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

Go under "Widget" tab > click "Copy to Clipboard"

To Embed as a Chat Screen

Go under "Page" tab > click "Copy to clipboard"

(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.

Configure your customizations and preview widget, before copying the embed code over

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

Chat Widget Embedding

Chat Screen Embedding

---

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 [email protected]