Insert WhatsApp using Elfsight

Discover the process to insert a WhatsApp chat widget in your Webflow website using Elfsight in 4 simple steps:

Generate widget in Elfsight
Duplicate the code
Embed the code into Webflow
Finalize and Test

If you haven’t set up an Elfsight account yet, establish one to explore various widgets. Specifically, for this guide, you’ll require the WhatsApp chat widget.

Upon logging into Elfsight, navigate to the Application page and search for WhatsApp. From there, select the WhatsApp chat option to create the widget.

Generate a widget in Elfsight

64b94c2d6a67e8e89ec4294a_5f08e525e02d1f086b6005e7_5f08e3c39962b95538f391f1_4lgktwdrvh-6w10eaztar_dcpzen8sezdpd72mnb5n19unmqjpcf7abtughfd-lfw-knbr6eokttjxjz0tj2y1vvvbxriayaxr-n2jfmgdd7yxhqczeu4aqqfck9z

Once you’ve acquired the WhatsApp widget, opt for a template:

Name your widget (e.g., WhatsApp embed)
Select a widget layout template
Tap Continue with the template

Next, proceed with customization:

Content
Settings
Design

Commence by entering your WhatsApp phone number under the Content section and then tailor your widget to match your Webflow project.

Content

The Content feature enables you to modify the:

Chat Bubble
Chat Header
Welcome Message
Start Chat button

Chat bubble

Tapping the Chat Bubble option enables you to pick a chat bubble icon and input custom Bubble Text to display beside your icon (remains empty if no text is added).

Chat header

Select the Chat Header option to explore header customizations like:

64b94c2d6a67e8e89ec4294f_5f08e52641cf37ac55c3cbbe_5efbaafcc96ee264030e7b72_fqg6zolwd2mpptsj6zfyjwqcga5mx1ihx0rzktkv59ktk-pzam415kzkjsndzn4kkmiohit1lkdibb3vz62qwp574_mpl4fzxpdzdi3us7rqfncncij-moziggcpc

The profile picture displayed when the chat opens
The name next to the profile picture
A caption below the name

Welcome message

Access the Welcome message feature to input the opening message for your chat.

Start chat button

Using the Start chat option lets you define the text that initiates WhatsApp. You can also switch to reveal or conceal the WhatsApp icon in the button.

Settings

The Settings feature allows you to modify:

Position
Chat Display Settings
Open Chat Triggers
Notifications

Position

64b94c2d6a67e8e89ec42944_5f08e526384bc48cf1f68f3e_5efbaafc4099f144c71d0fda_uupnspbgrowfmeiuu-tj1vntxuthn1omspy9vsfcdlu6rqzs_osfi3nkfwvvtre32xhbcdrlh1rniivwwtqvotqajrqf3xrcdidgacpvtff7sharfcdd3vhhws_rs

Click on the Position option to access the sidebar where you can set the position of your widget to:

Floating Bubble
Embed Bubble
Embed Chat Window

You can also align your widget to the center or left/right.

Chat display settings

Chat display settings to activate or deactivate the widget based on particular conditions.

The available conditions include:

Pages (where to showcase the chat widget)
Devices (display 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

Open chat triggers to adjust display settings according to:

Time on page
Time on site
Scroll position
Exit intent

Design

Style section facilitates customization of colors, button shape, and CSS to align with your project’s design.

64b94c2d6a67e8e89ec42947_5f08e526f7f9f5313643a829_5efbaafd715867947424be56_5rfshqd53lwo7c1zpynutnx4w7wacx2byjjkw85sr5wy6jg_rfxiopslwq8rfvxpgyfayjyodfrdr2tudznwirdckx-zzq4jf0i1rw5o3-2_nb5vqgrbvinu6hlvc

Once modifications are completed, make sure to Store.

Duplicate the embed script

To incorporate your gadget into your Webflow plan, the embed script from Elfsight is required.

Following the preservation of adjustments during the former stage, a pop-up window with the embed script will appear — click on the script to automatically copy it to the clipboard.

64b94c2d6a67e8e89ec4295b_5f08e526af74626e9a82ee39_5efbaafcaa7cd831a816f4f6_nh4vsyhgxjmnsi0dllmb7azjpej6jwavdwlc9eyo_abgousazo2qhgxnnyh3itabz6eqduuhz-qyldj_krrivffagsiogv-ydnni6vemhld26thn4hqe7z6zni-8g

Insert the script into Webflow

There are two methods to include the gadget in your Webflow project — project-wide, on every page, or on individual pages.

Project-wide

To insert the gadget on every page:

Select the Custom Code tab within your project settings
Paste the copied embed script into the Head Code section of your project
Save Adjustments
Release
Release to Chosen Domains

Remark: Custom scripts will only be visible on the finalized site.

Publish and verify

Now it’s time to publish and validate the new gadget:

Press Release
Opt for the domain(s) where you want to publish
Release to selected domains

*Publishing your plan from the Project Settings*

Author
Recent Posts

Ewan Mak

Webflow Expert at Tenten

Webflow expert and frontend developer with 4+ years of experience. I bring a versatile skillset (HTML, CSS, JS, Figma, Adobe) to craft exceptional Webflow experiences. 70+ projects honed my ability to seamlessly blend custom code and visual development. Organized, deadline-driven, and passionate about growth, I excel in dynamic environments. Let's push boundaries and create something amazing.