WPDesigns Site Logo

How to Set up WhatsApp Chat in Elementor

How to Set up WhatsApp Chat in Elementor
Share This Post

Creating a Plugin Free WhatsApp Chat Widget

This WPDesigns article will discuss how to Set up WhatsApp Chat in Elementor Template.  There are many WhatsApp chat widgets in the world of WordPress, but they generally require you to install yet another plugin that will impact your site load speed and potentially your website security.  Being able to create a chat widget without a plugin is a great thing to do in order to allow your website visitors easy access to contact you and find out what they want to know.

Table of Contents

Note: You will need to install and set up a WPDesigns Elementor Template in order to have this prebuilt.  We have not yet released our instructions on how to create this without our template.

WhatsApp Chatbot in WPDesigns

When you use a WPDesigns template, you will get the WhatsApp chatbot option without using any additional plugins and you can customize it to match your brand. You can also customize everything it has as it has been made using widgets in Elementor Pro.

WPDesigns Popup
WhatsApp Chatbot in WPDesigns
Choose the Footer and Open it with Elementor
1. Choose the Footer and Open it with Elementor
Selecting Popup Action
3. Select a Popup Action
Linking Whatsapp Popup
4. Find and link the WhatsApp Popup
2. Style the WhatsApp popup as you'd like

Customize and Link

WPDesigns provides a variety of ready-to-use professionally designed templates. You can use the designs for free on your website. You can quickly edit and change those templates to match your business and brand.

  1. To link and edit the WhatsApp icon, first, open the footer template in Edit with Elementor.
  2. Then, select the WhatsApp icon, and the edit option will display on the left.
  3. From here, you may change the icon’s color and size, as well as link it to the popup.
  4. To change the color and size, go to the Style tab.
  5.  On here you’ll see all of the options. Normal and Hover have secondary color and primary color options to change. These are for the icon and the surround.
  6. After that, you can modify the icon size, padding, rotation, and border-radius.
  7. Go to content and click on dynamic tags from the link input field.
  8. From the action list select the popup option. Then, when you click on popup, a small window will appear. So, beneath the popup, put the name of the Whatsapp popup, and the suggestions will appear. Simply choose the one that belongs to the Whatsapp chatbot you have on your website. Then click Update.

Update the WhatsApp Chat Information

  1. Go to your WordPress Dashboard > Templates > Popups. All of the popups will be displayed here. 
  2. Search for the WhatsApp popup.
  3. Click on Edit with Elementor for the popup.
  4. I find the most efficient way to Navigate the elements on the page is the navigator.  The Elementor navigator can be found on next to the settings icon on the bottom left of the editor screen, alternatively, press CTRL/CMD + I.  When you open the navigator, you will see two sections: Staff Details and Message and Button Section.
  5. Under the staff details area, you’ll see a photo, the site title, and the time it would take to respond. By clicking on them, you can easily change the text and the image to anything you need. If you wish to use your site’s title, there’s no need to modify the text; your site’s title will appear here automatically. If you would like to add your own text you can click on the text and remove the dynamic tag site title then enter your own text in the box.
  6. You can change the welcome text, simply click on it and edit and customize it from the left-hand side.
  7. If you wish to link the button to your account, simply click on it, and the link field will display with https://wa.me/. All you have to do now is add your WhatsApp number to the link text. (https://wa.me/013442074544), for example. However, you must ensure that the number does not contain any spaces or hyphens.
  8. After that, click Update, and your WhatsApp Chatbot will be ready to use.
Popup Option Under Template
Popup Option Under Template
Open the Whatsapp Popup with Elementor
Open the Whatsapp Popup with Elementor
Navigator Option in Elementor Editor
Navigator Option in Elementor Editor
Sections Overview in Whatsapp Chat
Navigator with the Elements
Link Up to Own Number
Social Media
Recent Posts
5 Web Design Trends for 2022
5 Web Design Trends for 2022

The creative world of web design has always been the designer’s wonderland that combines various disciplines, including visual design, psychology, and wordcraft. As technology progresses

Read More »
Want us to get Creative?

We would love to hear from you!

Josh Cut Out


Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.