Call to Action – Click to Chat (Only Chat Feature)

This documentation explains how to enhance the Call to Action feature in the Click to Chat plugin, focusing solely on the chat functionality. The steps include adding hover/show/hide settings at the Customize Settings and removing the default image-based WhatsApp button in favor of more flexible options like shortcodes.

Enhancing the Chat Feature

The Call to Action (CTA) is a crucial part of the plugin that encourages users to start a chat. To refine the user experience and streamline the interface, we’re focusing on the chat feature exclusively, removing other distractions such as the image-based WhatsApp button.

This is a text phrase that appears beside the WhatsApp icon on your website to invite users for a chat. You can change it as per your choice.

Call to Action will display for these styles by default (style-1, 4, 5, 6, 8)

And for styles 2, 3,3-extend,7, and 7-extend – the call to action will be displayed as per the selection. (On Hover, Show, Hide)

Call To Action for chat

    

        
        WhatsApp us
    

Adding Hover/Show/Hide Settings in Customize Panel

You can now control the visibility of the Call to Action button with hover, show, and hide options. These settings allow for more dynamic interaction with users:

• Hover: Display the chat button when the user hovers over a specific area or element. This keeps the page clean and minimalist until the user shows interest by moving their cursor.
• Show/Hide: Use these settings to automatically show or hide the chat button based on conditions like scrolling or time spent on the page. This ensures the chat option is visible when needed without overwhelming the user.

Steps to Configure Hover/Show/Hide Settings:

1. Navigate to Customize Settings
   Go to Click to Chat> Customize in the WordPress dashboard.
2. Locate the Call to Action Section
   In the Click to Chat plugin settings, find the Display Call to Action section under the plugin’s customization options.
3. Enable Hover/Show/Hide Options
   Enable the hover or show/hide settings as per your preference:
   • Hover: Choose the element that triggers the chat button’s visibility on hover.
   • Show/Hide: Set conditions such as “Show after 5 seconds” or “Hide when scrolling” to dynamically control when the chat button appears.
4. Save Changes
   After making the necessary adjustments, save your changes to see the effect live on your site.