Learn how to embed a WhatsApp chat widget into your Webflow website using Elfsight in 4 steps:
- Create widget in Elfsight
- Copy the code
- Paste the code into Webflow
- Publish and Test
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.
Create a widget in Elfsight
Once you’ve got the WhatsApp widget, choose a template option:
- Name your widget (e.g., WhatsApp embed)
- Select a widget layout template
- Click Continue with the template
Now you can customize:
- Content
- Settings
- Style
Start by entering your WhatsApp phone number under the Content option and then customize your widget to fit your Webflow project.
Content
The Content option lets you customize the:
- Chat Bubble
- Chat Header
- Welcome Message
- Start Chat button
Chat bubble
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).
Chat header
Clicking the Chat Header button displays header options that you can change:
- The profile picture that shows when the chat is opened
- The name that shows next to the profile picture
- A caption that appears under the name
Welcome message
Clicking the Welcome message button shows the sidebar to enter your chat’s opening message.
Start chat button
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.
Settings
The Settings option lets you customize:
- Position
- Chat Display Settings
- Open Chat Triggers
- Notifications
Position
Clicking the Position button shows the sidebar where you can customize the position of your widget to:
- Floating Bubble
- Embed Bubble
- Embed Chat Window
You can also center or left/right align your widget.
Chat display settings
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:
- Pages (where to display the chat widget)
- Devices (show the widget on mobile/desktop)
- Visitors (display chat for all visitors, new visitors, or returning visitors)
- Date & Time (when to display the widget)
Open chat triggers
You can use the Open chat triggers to customize display settings based on:
- Time on page
- Time on site
- Scroll position
- Exit intent
Style
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.
Copy the embed code
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.
Paste the code into Webflow
There are two ways to add the widget to your Webflow project — project-wide, on every page, or on individual pages.
Project-wide
To add the widget to every page:
- Choose the Custom Code tab in your project settings
- Paste the copied embed code into the Head Code section of your project
- Save Changes
- Publish
- Publish to Selected Domains
Individual pages
To add the widget to individual pages:
- Open the Designer
- Click the pages icon in the left sidebar (shortcut: P)
- Click the cog icon on the page where you’d like to add the widget (Edit page settings)
- Scroll to Custom Code
- Paste the copied embed code in the Inside <head> tag </head>section
Note: Custom scripts will only appear on the published site.
Publish and test
Now you can publish and test the new widget:
- Click Publish
- Choose the domain(s) you want to publish to
- Publish to selected domains
