Embed WhatsApp using Elfsight

Embed a WhatsApp chat widget into your Webflow site using Elfsight.

‍

This video features an old UI. Updated version coming soon!

Clone this project

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