Greetings-1 Customizable Design

The Greetings-1 is a simple yet most efficient way to exhibit a brief message along with the WhatsApp button that navigates to the chat link. This feature is customizable with text editors for Header, Main, and Bottom content.

Navigate to ‘Click to Chat’ —> ‘Greetings’ and select ‘Greetings-1 Customizable Design’.

Greetings dialog has 3 rich text editor blocks to construct the text with its toolbar widgets.

  • Header content
  • Main content
  • Bottom content

Variables like {site},{title}, and {url} can also be used in these text editors. The values of these variables are replaced dynamically:

{site} – changes to the current website name.
{title}- changes to the title of current page. (If it’s the home page, then changes to the website name.)
{url} – replaces with the current page URL.


Header Content: The text present in the header content appears at the top of the greetings dialog.

Here, {site} is dynamically replaced with the website name.

Header Image: Image at Header content with online/offline status badge

PRO: Add different badge colors based on online and offline hours.

Main Content: The content present in the main content appears inside the message box of the greetings dialog body.

Here, {title} is replaced with the current page title.

Bottom Content: The text present in the Bottom Content appears at the bottom part of the greetings dialog.


Call to Action: This text appears on the WhatsApp button of the greetings dialog.

Call to Action Button type: The Call to Action button has two styles. Select any of these styles.

Themes Button (style-1): ‘Style 1’ is applied to the Call to Action button, which looks like the current site Theme’s button color. We can customize this Call to Action button at Click to Chat —> customize —> style-1.

Call to Action button with Style-1.

Button with WhatsApp Icon(style-7 Extend): This is the default value. We can customize style-7 extend at Click to Chat —> customize —> style-7 Extend.


Greetings Dialog 1 Color Customization: Customize Background colors to Header content, main content, and message box. To change the colors, either enter a hexadecimal color value or select any color from the palette. Click on ‘Default’ to apply the default color.


With the default color values, the Greetings dialog-1 appears like this:

Display: This feature displays greetings dialog based on the type of device. It has 3 attributes.

Desktop and Mobile: This is the default attribute. The greetings dialog appears on all desktop and mobile devices.
Desktop Only: Greetings dialog is displayed only on desktop devices.
Mobile Only: Greetings dialog is displayed only on Mobile devices.

Greetings Dialog Initial stage:

Open: Greetings dialog appears by default. Whenever a user closes the greetings dialog on any page in the website, the greetings dialog automatically gets hidden on all the pages of the website. Greetings re-appear only after the user clicks on WhatsApp.
Here, User Action is the key. If a user closes the greeting dialog, then it is closed on all the pages. If a user opens on any page, it will open by default on all the pages that the user visits.

Close: The greetings dialog is hidden by default. Greetings appear only when a user clicks on the WhatsApp button.


PRO: (Actions)
Since v1.5

Actions: ”Actions” are available in the PRO feature.

Actions are useful to promote the Greetings message at a particular time, page scroll .

  • If the Initial stage is set to Open, the greetings dialog appears immediately. But, if a user closes the greetings dialog on any page, then it will re-appear based on ‘Actions’
    .
  • To display the greetings dialog only after a particular time and scroll delay, please set the initial stage to ‘close’.

Time Action:

Greetings dialog appears on the web pages after completion of the specified time in ‘Time action’. The value of ‘Time Action’ is in seconds.

If Initial stage is set to ‘Open’: By default, the greetings dialog appears immediately on the webpage for the first time. Afterwards, greetings appear only after completion of the give time action value.

If Initial stage is set to ‘Close’: Greetings dialog appears after completion of the given time action value. When Greetings is closed on any page, it re-appears after completion of the given time action value.


Scroll Action:

The value entered in the scroll action is taken as the percentage value. The greetings dialog appears after scrolling down the webpage to this value. From the above image, greetings appear after the user scrolling down to 50% of the webpage.

If both time and scroll action values are given at once, then whichever value finishes first will be executed.


Text Editor Tips:

  • Toolbar Toggle: To explore all the menus in the text editor, click on the toolbar toggle and customize accordingly.

  • Visual/Text: In these text editors, we can customize the text either visually or by HTML code in the tab “Text”.