WhatsApp Chat Module

The chat box in the Divi WhatsApp Chat module is static and does not facilitate real-time chatting. It’s designed to redirect to WhatsApp for live conversations.

Intro Video

The WhatsApp Chat module facilitates direct communication for visitors on your Divi website, enabling them to initiate a conversation with your WhatsApp phone number via a single click.

Add WhatsApp Chat Module

To install the WhatsApp Chat module in Divi, launch the Visual Builder on the page where you want the module. Click the grey “+” button in the row to open the Divi Module Library. Type “WhatsApp Chat” in the search bar, select the module when it appears, and place it on your page. Customize the module settings to suit your preferences.

General Settings

Phone Number: Specify the WhatsApp phone number to which messages will be directed from your website.

Template: The Divi WhatsApp Chat offers a variety of template options to enhance the user experience. Choose from a diverse selection of social chat interfaces to find the style that best complements your website’s design.

Chat Bubble

Bubble Position: Define the location on the screen where the chat bubble will appear.

Bubble Alignment: Set the alignment of the chat bubble, ensuring it fits harmoniously within your site layout.

Bubble Icon: Choose an icon for the chat bubble from the default options provided.

Upload Custom Icon: If the default icons do not match your branding, you have the option to upload a custom icon that represents your chat feature.

Chat Header

  • Profile Name: Enter the name displayed in the chat header, typically representing the person or business users you will be chatting with.
  • Profile Caption: Provide a short caption or status beneath the profile name, offering more context or information about the chat service.
  • Profile Image: Upload an image that will be used as the profile picture in the chat header. This can be a personal photo, a company logo, or a relevant graphic.
  • Profile Image Size: Adjust the size of the profile image to ensure it’s properly scaled and visible within the chat header.
  • Header Background Color: Select a color for the chat header’s background, which should complement your website’s color scheme and enhance the visibility of the chat header text.

Welcome Message

Here you can craft the initial greeting or introductory text that users will receive when they initiate a chat session. This message sets the tone for the conversation and provides an opportunity to inform users about expected response times or to deliver a warm welcome.

Start Chat Button

  • Start Chat Text: Define the label for the button that users will click to initiate the chat. This text should be action-oriented and inviting.
  • Background Color: Choose a background color for the Start Chat button that stands out on your page, aligning with your website’s design while drawing the user’s attention.