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.

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.

• Group: Allows you to add a WhatsApp Group ID for communication with website page’s visitors “Potential Customers”.
  • Group ID: Add your Group ID. Watch this video to learn more about How to Get WhatsApp Group ID.

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.

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.

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.
• Advanced Border Radius: Apply custom radius values for Elementor Whatsapp Chat widget button on normal state. Get the radius value from here.
• Border Radius: Insert border radius values.
• Icon Shadow: Set WhatsApp Chat Widget’s icon shadow:
  • Color
  • Blur
  • Horizontal
  • Vertical

• 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

• 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.

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
• Advanced Border Radius: Get the radius value from here.
• Icon Shadow
  • Color
  • Blur
  • Horizontal
  • Vertical
• Text Shadow
  • Color
  • Blur
  • Horizontal
  • Vertical
• Button Shadow
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset
• Margin
• Padding