How to Set up WhatsApp Chat in Elementor

How to Set up WhatsApp Chat in Elementor

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

Elementor Logo

In this WPDesigns article, we will discuss how to Set up WhatsApp Chat in Elementor Template.

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 230X250 1
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
Style Option For Whatsapp Icon
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
Sections Overview in Whatsapp Chat
Navigator With The Elements
Navigator with the Elements
Link Up To Own Number
Link Up to Own Number

View the WPDesigns Templates

If you have any questions don’t hesitate to get in contact using the live WhatsApp chat, or the contact form below.

Search

Social Media

Recent Posts

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.