Get started with Elfsight WhatsApp Chat 1.2.0

Installation

1. Install Elfsight WhatsApp Chat WordPress Plugin elfsight-whatsapp-chat-cc.zip to your website. Don't know how? Please learn here.

2. Go to WhatsApp Chat page in WordPress admin menu.

3. Create a new widget, adjust all settings and get a ready-made shortcode.

Use WhatsApp Chat as a WordPress Shortcode



1. Create a new widget

You can use Elfsight WhatsApp Chat as a WordPress shortcode. To do this, you have to create a new widget, set all options in the Elfsight editor and save it.

2. Copy-paste the shortcode

You will see the new widget's shortcode in the widgets list. You can copy-paste it into the required place of your website.

Example of the Elfsight WhatsApp Chat shortcode:

[elfsight_whatsapp_chat id="1"]

Use WhatsApp Chat as a
Gutenberg Block

You can use Elfsight WhatsApp Chat as a block for Gutenberg editor. Just add it to your page during page building and select one of the available WhatsApp Chat widgets from the list.

Use WhatsApp Chat as a
WordPress Widget

To use Elfsight WhatsApp Chat as a WordPress widget, go to Appearance -> Widgets, and drag Elfsight WhatsApp Chat WordPress widget to any widget section. Next, select one of available WhatsApp Chat widgets from the list.

Use WhatsApp Chat as a
Visual Composer Element

You can use Elfsight WhatsApp Chat as a Visual Composer element. Just add it to your page during page building and select one of the available WhatsApp Chat widgets from the list.

Options

Option Default Value Description
Content
WhatsApp phone number - Set your WhatsApp phone number to receive messages from your website visitors via the chat widget.
Bubble Icon whatsapp-chat Select an icon for the chat bubble.
Bubble Text - Add some call to action text to the bubble, if necessary.
Header: Picture - Select the source of your user pic for the chat window.
Header: Name - Set the username for the chat.
Header: Caption Type Reply Time Choose the caption type to display below the username.
Header: Reply time text Typically replies within a day Choose one of the predefined estimated reply times to let your users know when to expect a response.
Header: Custom Caption - Set any text to be displayed below the username.
Welcome Message Hi there 👋
How can I help you?
Enter a welcome message or a greeting to display when the chat window is opened. Offer to help or ask a question to engage a website visitor in conversation.
Button Text Start Chat Enter the chat trigger text to be displayed on the button.
Show WhatsApp Messenger Icon true Show/hide WhatsApp icon on your button.
Settings
Position Floating Bubble Choose the perfect display position for your widget. Floating Bubble will scroll along with your website page. Embed Bubble is added as a button to a specified page area. Clicking on the button will open the chat window. Embed Chat Window adds a window to a specified page area.
Align Right Align your chat widget to the left or to the right, or keep it in the center of the page.
Where to Display Chat All pages Choose the pages where you need to display the chat. This setting is used in case you've installed the chat to your website template, and it's available on each page of your website.
Don't display chat on these pages - List the pages where you don't want to display the chat.
Display chat only on these pages - List all the pages that will display the chat.
Show Chat on mobile true Show/hide the chat widget on mobile devices.
Display chat for All Visitors Select the category of visitors you want to display the chat for: all visitors, visitors who have come to your website for the first time, visitors who had been on your website before.
Open Chat Triggers - Set the type of user behavior that will open the chat window automatically.
Time On Page 0 Set the number of seconds the website visitor has to spend on the page to open the chat window automatically.
Time On Site 0 Set the number of seconds the website visitor has to spend on the website to open the chat window automatically.
Scroll Position 0 Set the scrolled page percentage for the chat window to open automatically.
Exit Intent false Activate this setting to make the chat window open automatically everytime a visitor intends to leave the website and close the browser tab.
Notifications Bubble notification badge, Show notification in browser tab title Select the kind of notifications to let your visitors know that chat window is opened and a conversation is active. These notifications catch the visitor's eye and encourage them to communicate with you.
Style
Bubble Background Color rgb(255, 255, 255) Set the bubble background color.
Bubble Icon Color rgb(0, 132, 255) Set the bubble icon and text color.
Header Background Color rgb(250, 250, 250) Set the chat window header background color.
Button Color rgb(0, 132, 255) Set the start chat button color.
Button Shape 8 Use this option to adjust your button's shape.

Support, questions and offers

Your questions and issue reports are processed on the first-come, first-served basis. Expect an answer from 10 a.m. to 7 p.m. CET, Monday through Friday.

Visit Support Center