Embed WhatsApp using Elfsight

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Learn how to embed a WhatsApp chat widget into your Webflow website using Elfsight in 4 steps:

  1. Create widget in Elfsight
  2. Copy the code
  3. Paste the code into Webflow
  4. 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:

  1. Name your widget (e.g., WhatsApp embed)
  2. Select a widget layout template
  3. Click Continue with the template 

Now you can customize:

  1. Content
  2. Settings
  3. Style

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: 

  • 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:

  1. The profile picture that shows when the chat is opened
  2. The name that shows next to the profile picture
  3. 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.


The Settings option lets you customize:

  • Position
  • Chat Display Settings
  • Open Chat Triggers 
  • Notifications


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


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.


To add the widget to every page:

  1. Choose the Custom Code tab in your project settings
  2. Paste the copied embed code into the Head Code section of your project
  3. Save Changes 
  4. Publish 
  5. Publish to Selected Domains 

Individual pages

To add the widget to individual pages:

  1. Open the Designer
  2. Click the pages icon in the left sidebar (shortcut: P)
  3. Click the cog icon on the page where you’d like to add the widget (Edit page settings)
  4. Scroll to Custom Code
  5. 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: 

  1. Click Publish
  2. Choose the domain(s) you want to publish to
  3. Publish to selected domains
Publishing your project in the Designer
‍Publishing your project from the Project Settings

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more


Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top