Embed WhatsApp

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

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

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

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.

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:


  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.

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:

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


Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback