How to Show Styles Only on Selected Pages

The ‘Click to Chat’ plugin allows flexibility in controlling where the WhatsApp button or related styles appear on your website.

Global Settings Overview

To start, adjust the global settings to hide the styles on all pages by default:

Go to Display Settings.
Under the ‘Global’ section, select ‘Hide on all pages’.
This will ensure that the styles are hidden across the entire site, and they will only appear on the specific pages or posts selected later.

Show Styles on Specific Pages

Once the global setting is applied to hide styles, configure which pages should display the WhatsApp button or styles:

Navigate to Override Settings.
In the Post ID section, add the Post IDs of the pages or posts where the styles should be shown.
Example: If the styles should appear on posts with IDs 1 and 20, enter 1, 20 in the Post ID field. Separate multiple IDs with a comma (,).

This will display the WhatsApp button or other related styles only on the pages with the specified Post IDs.

Show Styles Based on Post Types

To display the WhatsApp button based on post types, such as posts or pages:

Show Only on Posts (Post Type: Post):
1. In Global Settings, select ‘Hide on all pages’.
2. Under Override Settings, select ‘Show’ for Posts.
Show Only on Pages (Post Type: Page):
To show the WhatsApp button across all pages:
1. Under Pages, select ‘Show’ in Override Settings.

Show Styles Only on the Home Page

To display the WhatsApp button exclusively on the home page:

In Global Settings, select ‘Hide on all pages’.
Under Override Settings, go to the Home Page section and select ‘Show’.

Show Styles Only on the Page-Level Settings

Each page can have its own customized settings for the ‘Click to Chat’ WhatsApp button. This allows control over the display, style, and behavior of the button on individual pages. Below are the page-level options and how to configure them.

Chat Settings (Page-Level)

To customize ‘Click to Chat’ on a specific page, use the following options:

WhatsApp Number

Enter the WhatsApp number with the country code.
Example: +9163******** (India country code is +91).

Call to Action

Set a custom call-to-action text that will be displayed with the WhatsApp button.
Example: WhatsApp us.

Pre-filled Message

Create a pre-filled message that will be automatically inserted into the WhatsApp chat when users click the button.
Example: “Hello, I have a question about your product.”

Display Settings

Control when and where the WhatsApp button should be shown on the page:

Show / Hide / Default
- Show: Display the WhatsApp button on this page.
- Hide: Hide the WhatsApp button on this page.
- Default: Use the global settings applied site-wide.

Time Delay

Specify the time delay (in seconds) before the WhatsApp button appears on the page after the page has loaded.

Scroll Delay

Define how far a user must scroll (as a percentage) before the WhatsApp button becomes visible.
Example: 50% scroll to show the button when the user scrolls halfway down the page.

Style Selection

Customize the appearance of the WhatsApp button for both desktop and mobile devices.

Select Style (Desktop)

Choose a style from the available options for how the WhatsApp button will look on desktop.

Select Style (Mobile)

Choose a style from the available options for how the WhatsApp button will appear on mobile devices.

Show Styles Based on Category

To control style visibility based on post categories:

Go to Display Settings and select ‘Hide on all pages’ under the Global section.
In the Category Name section, enter the categories where the WhatsApp button or styles should appear.
Example: Add category names such as news, updates to display the styles on posts under these categories.

Separate multiple category names with a comma (,).

Show on Checkout and Cart Pages

To display the WhatsApp button or styles specifically on Checkout or Cart pages:

Each of these pages has a unique Post ID.
Add the post ID for the Checkout and Cart pages in the ID’s list to show section under Override Settings.