Overview of WhatsApp Integration for Your Website

The "Click to Chat" plugin for WordPress allows you to add a customizable WhatsApp chat button to your website, enabling visitors to contact you directly through WhatsApp. Below is a comprehensive guide to each of the plugin's settings and options.

WhatsApp Number

This is the phone number that visitors will contact via WhatsApp. Enter the number in international format without any spaces or special characters.

Use the following format for an Indian WhatsApp number: +91 8********9. This number can be either a regular WhatsApp or WhatsApp Business number.

Example: A Number in the United States would be entered as +1234567890.

Random Number

If you have multiple WhatsApp numbers, you can enable the “Random Number” option. This will randomly select a number from the list each time the chat button is clicked.

Example:

Pre-Filled Message

Pre-Filled Message:
When users click on the WhatsApp chat link, a pre-filled message can be displayed in the chat window. Use variables to dynamically insert information:

• {site} – The name of your website
• {title} – The title of the current post or page
• {url} – The current webpage URL
• [url] – The full URL including query parameters

Example: Hello {site}, I would like to know more information about {title}, {url}

Call to Action

Call to Action:
The text displayed alongside the WhatsApp icon/button.

Example:" Chat with us on WhatsApp," "Contact us," or "Get in touch."

Style and Position

Style and Position:
Customize the appearance and placement of the WhatsApp button.

Styles:

• Style-1: Theme Button
• Style-2: Green Square Icon
• Style-3: Large Icon
• Style-3 Extend: Large Icon Extended
• Style-4: Chip (cylindrical)
• Style-5: Image on hover Content Box
• Style-6: Plain text
• Style-7: Icon with padding
• Style-7 Extend: Icon on hover extend
• Style-8: Button
• Style-99: Own Image

Position Types:

Determines where the WhatsApp chat button will appear on your website.

• Fixed: The button remains in the same place on the screen even when scrolling.
• Absolute (PRO): The button moves with the page content as you scroll.
• Bottom Right: The button will appear in the bottom right corner of the screen.
• Bottom Left: The button will appear in the bottom left corner of the screen.
• Custom Position: Manually set the position using CSS values.

Example:
Button Color: #25D366 (WhatsApp green)
Text Color: #FFFFFF (white)
Button Shape: Rounded
Position: Left

URL Structure

Desktop URL Structure:
Choose how links open on desktop:

• wa.me (default): Opens the WhatsApp Desktop app
• web.whatsapp.com: Opens Web WhatsApp
• Custom URL (PRO)

Mobile URL Structure:
Choose how links open on mobile:

• wa.me (default): Opens WhatsApp Mobile app
• WhatsApp://: Opens WhatsApp Mobile app directly
• Custom URL (PRO)

Display Settings

Display Settings:
Control where and how the WhatsApp button is displayed on your site.

Global Settings:
Options to display or hide the WhatsApp button on various parts of your site, including:

• Home Page
• Posts
• Pages
• Archive pages
• Category pages
• 404 Page

Show or Hide on Specific Pages:
Add post IDs or category names to hide the button from certain pages or categories.

wocommerce single pr

Pro Setting:

Additional display options based on user login status, time delay, scroll percentage, country, and business hours.

Display Based on User Login Status

The Click to Chat PRO version includes advanced display settings that allow you to control the visibility of the chat button based on the login status of website visitors. This feature provides flexibility to tailor user experiences according to their engagement level with your website.

Display Options:

All Users (Logged-in and Not-Logged-in Users): Show the chat button to all visitors, regardless of their login status.

Example: Provide universal support and encourage communication from all site visitors. This setting ensures that everyone has access to the chat feature, facilitating easy contact for both potential and existing customers.

Logged-in Users Only: Display the chat button exclusively to users who are logged in to your website.

Example: Offer personalized support to registered members or customers who are logged into their accounts. This enhances user experience by providing premium or member-specific assistance, ensuring that your valuable users feel special and taken care of.

Logged-out Users Only: Show the chat button only to visitors who are not logged in.

Time Delay

The Click to Chat PRO version allows you to control when the WhatsApp chat button appears by setting a time delay. This feature ensures the button is displayed after a specified number of seconds, enhancing user experience and engagement.

Set a time delay for the chat button to appear after a visitor lands on your website.Gives visitors time to explore your site before offering chat support, making the interaction more natural and less intrusive.

Time Delay (in seconds): Specify the number of seconds to wait before displaying the chat button.

Example: Enter "10" to display the chat button 10 seconds after the visitor arrives on your page.

Scroll Delay

The Click to Chat PRO version includes a scroll delay feature that allows you to control when the WhatsApp chat button appears based on how much of the page a visitor has scrolled. This feature helps to engage users at the right moment as they explore your content

Set the chat button to appear after the user has scrolled a specified percentage of the page. Engages visitors at the right time, enhancing user experience without being intrusive.

Scroll Percentage: Specify the percentage of the page the user must scroll before displaying the chat button.

Example: Enter "10" to display the chat button after the user has scrolled 10% of the page.

Display Based on Country

The Click to Chat PRO version allows you to control the visibility of the chat widget based on the visitor’s country. This feature helps tailor support availability to specific regions.

Display Settings

All Countries: Display the chat widget to visitors from all countries.

Example: If your business operates globally, select "All Countries" to ensure all visitors have access to the chat feature.

Only Selected Countries: Display the chat widget only in selected countries.

Example: If your support team is available only in certain regions, select "Only Selected Countries" and choose those countries from the list.

PRO Settings: Business Hours – Online/Offline

The Click to Chat PRO version allows you to control the visibility of the chat widget based on your business hours. This feature helps manage user expectations by displaying the chat widget only during your specified business hours.

Business Hours Settings

Online (During Business Hours): Display the chat widget when your business is open.

Example: If your business operates from 9:00 AM to 5:00 PM on weekdays, the chat widget will be visible only during these hours.

Offline (Outside Business Hours):Display an offline message or hide the chat widget when your business is closed.

Example: Outside of your business hours (e.g., after 5:00 PM and on weekends), the chat widget will be hidden, or an offline Badge will be shown to inform visitors that support is currently unavailable.

Greetings Dialog

The Greetings Dialog in the Click to Chat plugin provides a simple and efficient way to display a brief message along with a WhatsApp button. This feature allows you to customize various aspects of the greetings dialog, including background colors, background images, and call-to-action button types.

Greetings-1 Customizable Design

A simple yet efficient way to display a brief message along with a WhatsApp button. Customizable using text editors for Header, Main, and Bottom content.

Customizable Elements:

• Header Content: Displayed at the top of the greetings dialog.
• Main Content: Appears inside the message box of the greetings dialog body.
• Bottom Content: Shown at the bottom of the greetings dialog.
• Call to Action: Text on the WhatsApp button.
• Background Colors: Customize header, main content, and message box background colors.

Variables:

• {site}: Replaced with the current website name.
• {title}: Replaced with the title of the current page.
• {url}: Replaced with the current page URL.

Display Options:

• Device-Based Display: Choose to display on desktop, mobile, or both.
• Initial Stage: Set to open or close by default, with actions to reopen based on user interaction, time delay, or scroll percentage.

Customizable Elements

Header – Background Color

• Select Color:
  • Navigate to the Greetings-1 settings.
  • Find the option for “Header – Background Color.”
  • Use the color picker to select your desired color or enter a hexadecimal color value.
  • This color will be applied to the header section of the greetings dialog.

Example: Header Background Color: Set to #F0F0F0 for a light gray background.

Main Content – Background Color

• Select Color:
  • Navigate to the Greetings-1 settings.
  • Find the option for “Main Content – Background Color.”
  • Use the color picker to select your desired color or enter a hexadecimal color value.
  • This color will be applied to the main content section of the greetings dialog.

Example: Set to #FFFFFF for a white background.

Message Box – Background Color

• Select Color:
  • Navigate to the Greetings-1 settings.
  • Find the option for “Message Box – Background Color.”
  • Use the color picker to select your desired color or enter a hexadecimal color value.
  • This color will be applied to the message box section of the greetings dialog.

Example: Set to #E0E0E0 for a soft gray background.

Background Image and Call to Action

• Main Content as a Message Box with Background Color:
  • You can add a background image to the main content section to make it resemble a WhatsApp chat.
  • Navigate to the Greetings-1 settings and find the option to add a background image.
  • Upload your desired image that fits the theme of your website and WhatsApp chat style.

Example: Upload a WhatsApp-style background image to the main content section.

• Call to Action – Button Type:
  • Customize the call-to-action button text and appearance.
  • There are two main styles for the call-to-action button:
    • Button with WhatsApp Icon (style-7 Extend): This is the default style that includes a WhatsApp icon.
    • Themes Button (style-1): This style matches your current site theme’s button color and can be further customized.
  • To customize the button:
    • Navigate to Click to Chat → Customize.
    • Select either style-7 Extend or style-1 and adjust the settings to fit your design preferences.

Example: Use style-7 Extend to display a WhatsApp icon with the text "Chat Now."

PRO Version: Header Image and Online/Offline Status Badge Colors

Adding a Header Image

• Navigate to Click to Chat → Greetings → Greetings-1 Customizable Design.
• In the header section, you will find an option to add an image.
• Click on “Add Image” and upload the desired image from your media library or computer.
• Once uploaded, select the image to apply it as the header image.

Remove Header Image

• In the header section where the image is displayed, click on “Remove Image” to delete the existing header image.
• Save the changes to update the settings.

Online Status Badge Color

• Navigate to Click to Chat → Greetings → Greetings-1 Customizable Design.
• Find the option for “Online Status Badge Color.”
• Click on the color picker and choose the desired color for the online status badge, or enter a hexadecimal color value.
• Save the changes to apply the new color.

Offline Status Badge Color

• Navigate to Click to Chat → Greetings → Greetings-1 Customizable Design.
• Find the option for “Offline Status Badge Color.”
• Click on the color picker and choose the desired color for the offline status badge, or enter a hexadecimal color value.
• Save the changes to apply the new color.

PRO: Badge Color Based on Business Hours

The PRO version of the Click to Chat plugin allows you to change the badge color based on your business hours. This feature helps visitors easily identify whether your support is currently available (online) or not (offline).

Setting Up Badge Colors Based on Business Hours

• Navigate to Click to Chat → Business Hours.
• Set your business hours by specifying the opening and closing times for each day.
• In the Greetings-1 settings, under “Online Status Badge Color” and “Offline Status Badge Color,” set the desired colors that will reflect your availability based on the defined business hours.

Example: Your business operates from 9 AM to 5 PM on weekdays.
Set the hours to 9 AM to 5 PM for Monday to Friday.
In the Greetings-1 settings:
Set the Online Status Badge Color to green (#00FF00).
Set the Offline Status Badge Color to red (#FF0000).
Outcome:
During business hours (9 AM to 5 PM on weekdays), the badge color will be green, indicating online status.
Outside of business hours, the badge color will change to red, indicating offline status.

PRO Version: Opt-in

User Consent Before Starting the Chat – Opt-in

The Opt-in feature in the Click to Chat PRO version ensures that website visitors provide their consent before initiating a chat. Once a visitor opts in, they will not be prompted to provide consent again.

Enable Opt-in:

• Navigate to the Click to Chat → Greetings → Greetings-1 Customizable Design.
• Find and enable the “Opt-in” feature.

User Consent:

• When a visitor clicks on the WhatsApp chat button for the first time, an opt-in prompt will appear.
• The visitor must agree to the terms or provide consent to proceed with the chat.
• Once the visitor opts in, their consent is saved.
• The opt-in prompt will not be displayed to the same visitor on subsequent visits.

Example:
Scenario:
A visitor, Jane, visits your website and decides to use the chat feature to ask a question.
Step-by-Step:
Jane clicks on the WhatsApp chat button.
An opt-in prompt appears, asking for her consent to start the chat.
Jane reads the consent message and agrees by clicking the "Agree" button.
Jane is then redirected to the WhatsApp chat where she can communicate with your support team.
On her next visit, Jane clicks the chat button again, but this time, she is not prompted for consent and is directly taken to the chat.

Initial Stage Settings

The Initial Stage settings in the Click to Chat plugin determine how the greetings dialog appears when a user visits your website. Here are the detailed options and examples:

Preset

The greetings dialog will automatically open on desktop devices and remain closed on mobile devices.

Example: When Jane visits your website on her laptop, the greetings dialog automatically opens, prompting her to start a chat. When she visits the same site on her smartphone, the dialog remains closed until she decides to open it.

Open

The greetings dialog is initially visible to the user. If the user closes it, the dialog remains closed on all pages until the user reopens it or a greeting action (such as a time delay or scroll action) triggers it to open again.

Example: John visits your website and sees the greetings dialog open. He closes it to continue browsing. Later, he decides to start a chat and reopens it by clicking the WhatsApp button.

Close

The greetings dialog is hidden by default and will only appear when the user initiates a chat by clicking the WhatsApp button or a greeting action triggers it.

Example:Maria visits your website and does not see the greetings dialog initially. After browsing for a while, she clicks on the WhatsApp button, and the greetings dialog opens, allowing her to start a chat.

Greetings-2: Content Specific

• Similar to Greetings-1 but may include additional layout and styling options.
• Provides another customizable template for engaging visitors.

Customizable Elements:

• Similar to Greetings-1 with potential additional features or styles.

Common Features

1. Customizable Text Sections:
   • Both Greetings-1 and Greetings-2 allow you to customize the header, main content, and bottom content with rich text editors.
2. Dynamic Variables:
   • Both support dynamic variables like {site}, {title}, and {url} to personalize messages.
3. Call to Action Button:
   • Both have customizable call-to-action (CTA) buttons.
4. Background Color Customization:
   • Both allow setting background colors for different sections of the greetings dialog.
5. Device-Specific Display Settings:
   • Both provide options to display the greetings dialog on desktop, mobile, or both.

Form Filling

• Enables you to collect information from visitors before they start a chat.
• Useful for gathering visitor details and context to provide better support.

Form Elements:

• Name Field: Collect visitor’s name.
• Email Field: Collect visitor’s email address.
• Message Field: Allow visitors to type their message or query.
• Custom Fields: Add any additional fields as per your requirements.

 Example: When a visitor clicks on the WhatsApp button, a form appears asking for their name, email, and query before initiating the chat.

Multi Agent

The Multi Agent feature in the Click to Chat plugin allows you to manage multiple agents, each with their own settings for when they are online or offline. This feature ensures that visitors can always see a relevant agent to chat with, even if some agents are offline.

Navigate to Multi Agent Settings:

• Navigate to Click to Chat → Greetings → Multi Agent.

Add Agent:

• Click the “Add Agent” button.
• Fill in the agent’s details such as name, WhatsApp number, and profile picture.

Example: Add Agent:
Agent 1:
Name: Sarah Lee
WhatsApp Number: +1987654321
Profile Picture: Upload an image of Sarah
Agent 2:
Name: Michael Smith
WhatsApp Number: +1098765432
Profile Picture: Upload an image of Michael

Offline Agent Settings:

• Decide how you want to handle agents when they are offline.
  • Chat when offline: Displays the agent with an offline message, allowing visitors to leave a message.
  • Disable chat: Displays the agent with an offline message but hides the chat option.

Example: John Doe is displayed with an offline message: "John is currently offline. Please leave a message."

Customize Styles:
Match the WhatsApp button to your website design with custom colors, sizes, and hover effects.

Other Settings:
Additional options like analytics, animations, notification badges, and webhooks.

WooCommerce Integration:
If you have WooCommerce active, there are specific settings available for integration.

Shortcodes

Use the shortcode

to embed the chat button within your content. Customize the heading content to provide clear documentation and user guidance