Embed a WhatsApp chat widget into your Webflow site using Elfsight.
Learn how to embed a WhatsApp chat widget into your Webflow website using Elfsight in 4 steps:
If you don't already have an Elfsight account, create one and get access to several widgets. For this lesson, you'll want the WhatsApp chat widget.
After logging into Elfsight, go to the Application page and search for WhatsApp. Then, click the WhatsApp chat option to create the widget.
Once you’ve got the WhatsApp widget, choose a template option:
Now you can customize:
Start by entering your WhatsApp phone number under the Content option and then customize your widget to fit your Webflow project.
The Content option lets you customize the:
Clicking the Chat Bubble button lets you choose a chat bubble icon and enter custom Bubble Text to appear next to your icon (it stays blank if you don’t add text).
Clicking the Chat Header button displays header options that you can change:
Clicking the Welcome message button shows the sidebar to enter your chat’s opening message.
Clicking the Start chat button shows the sidebar to enter the text that launches WhatsApp. You can also toggle to show or hide the WhatsApp icon in your button.
The Settings option lets you customize:
Clicking the Position button shows the sidebar where you can customize the position of your widget to:
You can also center or left/right align your widget.
If you want to customize when the widget is visible, use the Chat display settings to activate/deactivate the widget depending on specific restrictions.
The available restrictions include:
You can use the Open chat triggers to customize display settings based on:
The Style option lets you customize colors, button shape, and CSS to match your project’s design.
After making your changes, be sure to Save.
To add your widget to your Webflow project, you’ll need the embed code from Elfsight.
After saving your changes in the last step, a modal with the embed code pops up — click the code to automatically copy it to your clipboard.
There are two ways to add the widget to your Webflow project — project-wide, on every page, or on individual pages.
To add the widget to every page:
To add the widget to individual pages:
Note: Custom scripts will only appear on the published site.
Now you can publish and test the new widget: