WhatsApp Chat Widget Tutorial

Intro

Elementor WhatsApp Chat Widget can make your website more reachable and increase your leads generation. So, You can create a dedicated button for each part of your business. For instance, you can set WhatsApp Chat Button with sales number, and a different one with support number, etc.

One of the most important points for any successful business is providing ways for potential customers to communicate with the business. WhatsApp chatting app is one of the most used apps around the world with about 1.5 Billion monthly active users (in 2019). Using Premium WhatsApp Chat Widget can increase and ease the process to outreach potential customers through your websites’ pages, which in return can mean more leads and more profits.

In this tutorial, we will dive into how to use Elementor WhatsApp Chat Widget options and features.

Click here to check Premium WhatsApp Chat Widget demo.

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Screenshot Displays an Arrow Points at Premium WhatsApp Chat Widget in Elementor Panel Editor
Premium WhatsApp Chat Widget Icon

Key Features

Content

  • Chat
  • Button
  • Advanced Settings

1. Chat

Select one of the two options available for chatting: Private or Group.

  • Private: Allows you to add your private phone number for communication with your website’s visitors “Potential Customers”.
    • Phone Number: Add your WhatsApp phone number. For example, +123456789.
Screenshot shows WhatsApp Chat Widget Options for Chatting includes Private, Group and Phone Number Input
Available Chat Options: [Private and Group] in Elementor WhatsApp Chat Widget
  • Group: Allows you to add a WhatsApp Group ID for communication with website page’s visitors “Potential Customers”.
Screenshot of The Available Settings in WhatsApp Chat Widget. Chat is Set to Group and Group ID Input is Blurred.
Elementor WhatsApp Chat Widget Option (Group) and Group ID Input Box

2. Button

  • Float: Enable/Disable float of WhatsApp Chat Button.
    • Horizontal Offset: Set the horizontal offset for the WhatsApp Chat button. (Works only when the Float option is enabled).
    • Vertical Offset: Set the vertical offset for the WhatsApp Chat button. (Works only when the Float option is enabled).
  • Text: Add text to the WhatsApp Chat button. (“Contact Us” is added by default).
  • Icon: Enable/Disable the WhatsApp Icon. This option allows you to display an icon on the WhatsApp Chat button. (The following options works when the icon is enabled).
    • Icon [Choose Icon]: Choose an icon for the WhatsApp Chat button.
    • Icon Size: Adjust the WhatsApp Chat button’s icon as per your needs.
    • Icon Spacing: Adjust the WhatsApp Chat icon spacing between the Icon and the text within WhatsApp Chat Widget’s button. (Works when Float option is disabled).
  • Size: Select the WhatsApp Chat button size:
    • Small
    • Medium
    • Large
    • Block
  • Button Alignment: Align the button to the Right, Center, or Left. (This option appears when the “Float” option is disabled).
  • Button Position: Set WhatsApp Chat button Position to Right, Left. (This option appears when the “Float” option is enabled).
  • Hover Animation: Select a hover animation for WhatsApp Chat Widget’s button.
  • Open Link in New Tab: Enable/Disable to Open Link in New Tab for WhatsApp Chat Widget button.
WhatsApp Chat Widget Available Settings for Button. [Left] Float is Enabled, [Right] Displays WhatsApp Font-Awesome Icon
Button Options for Elementor WhatsApp Chat Widget

3. Advanced Settings

  • Hide on Tabs: Enable/Disable hiding WhatsApp Chat button on Tablets.
  • Hide on Mobiles: Enable/Disable hiding WhatsApp Chat button on Mobiles.
  • Tooltips: Enable/Disable the display of a Tooltip on the WhatsApp Chat button.
    • Tooltip Message: Set the tooltip message for the WhatsApp Chat button.
    • Animation: Select the styling animation for the Tooltip Message.
Screenshot Displays Elementor Editor Panel, WhatsApp Chat Widget Content, Advanced Settings, and Tooltips are Enabled.
Elementor WhatsApp Chat Widget Content, Advanced Settings

Style

Button

  • Typography: Set font styling for Elementor WhatsApp Chat button’s Text (Typography settings will be applied on the WhatsApp Chat Widget button on both Normal and Hover).
    • Font Family
    • Font Size
    • Font Weight
    • Transform: The available options are:
      • Default
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal
    • Style: Set Font Styling to:
      • Normal [Default]
      • Italic
      • Oblique.
    • Decoration: Select font decoration:
      • Underline
      • Overline
      • Line Through
      • None [Default]
    • Line-Height: Set font line-height for button’s text.
    • Letter-Spacing: Set font letter-spacing for button’s text.
Normal
  • Text Color: Set a color for the Elementor WhatsApp Chat button’s text.
  • Icon Color: Set icon color for the WhatsApp Chat Widget button.
  • Background Color: Set background color for the WhatsApp Chat button.
  • Border Type: Set a border type for the WhatsApp Chat Widget button. Choose from the following border types:
    • None [Default]
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Width: Set border’s width. (Works only when “Border Type” option is selected).
  • Color: Add a border color. (Works only when “Border Type” option is selected).
  • Border Radius: Set border-radius using pixels, percentage, or em. Higher border-radius means more circular border.
  • Icon Shadow: Set WhatsApp Chat Widget’s icon shadow:
    • Color
    • Blur
    • Horizontal
    • Vertical
Screenshot for The Icon Shadow Group Controls in Elementor WhatsApp Chat Widget
Icon Shadow Group Controls in WhatsApp Chat Widget for Elementor
  • Text Shadow: Add a text-shadow using the following controls:
    • Color
    • Blur
    • Horizontal
    • Vertical
  • Button Shadow: Set a shadow for WhatsApp Chat Widget button:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset
Available Options for Button Shadow, Shows Group Controls in WhatsApp Chat Widget
WhatsApp Chat Widget Shadow Group Controls [Color, Horizontal, Vertical, Blur, Spread, and Position]
  • Margin: Creates space around Elementor WhatsApp Chat button, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around WhatsApp Chat Widget Button, inside of any defined margins and/or borders. You can set the padding in Pixel (px), Em (em), or Percentage (%) NOTE* Padding does not accept negative values.
Available Styling Options for Button in Elementor WhatsApp Chat Widget
Button Normal Tab Styling Options WhatsApp Chat Widget for Elementor
The Available Styling Options for Buttons on Hover (when Mouseover) in WhatsApp Chat Widget
Styling Settings for WhatsApp Chat Widget [Styling demo]
Hover
  • Tooltips for Background Color: Change background color for WhatsApp chat Widget button tooltip color on hover. (Appears only when “Tooltips” option is enabled).
  • Text Color
  • Icon Color
  • Background Color
  • Border Type
    • None [Default]
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove.
  • Width: Set border width. (Appears only when “Border Type” option is selected).
  • Color: Set color for Border Type. (Appears only when “Border Type” option is selected).
  • Border Radius
  • Icon Shadow
    • Color
    • Blur
    • Horizontal
    • Vertical
  • Text Shadow
    • Color
    • Blur
    • Horizontal
    • Vertical
  • Button Shadow
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset
  • Margin
  • Padding
Screenshot for Available Styling Options for Buttons in Elementor WhatsApp Chat Widget
Button [Hover] Tab Styling Options in Elementor WhatsApp Chat Widget Button

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.