fbpx

Triggers

Introduction

Joinchat has a feature that will allow you to launch the chat window or open WhatsApp directly from custom elements created by you, we call these “Triggers” and they give you full control over the behavior of the plugin. You can interact with Joinchat on your pages in two ways:

  1. Adding anchor links:
    • #joinchat to display the chat window (or launch WhatsApp if there is no CTA) when clicking.
    • #whatsapp to launch WhatsApp directly on click.
  2. Adding CSS classes in HTML elements:
    • joinchat_open to display the chat window (or launch WhatsApp if there is no CTA) when clicked.
    • joinchat_close to hide the chat window when clicking.
    • joinchat_app to launch WhatsApp directly on click.
    • joinchat_show to display the chat window when an HTML element appears on the screen when scrolling (only if it is an unseen CTA).
    • joinchat_force_show to display the chat window when an HTML element appears on the screen when scrolling (always).

Works with your phone and message settings with dynamic variables, even on pages on which Joinchat is not visible.

WhatsApp button in the menu

To add a WhatsApp button to the WordPress menu simply navigate from Desktop → Appearance → Menus. In the “Add items to menu” block access “Custom links”.

Open chat window

In URL add #joinchat to display the chat window (or launch WhatsApp if there is no CTA) when clicked. Customize the link text and click “Add to menu”.

cleanshot 2022 06 23 at 11.36.27

Once the item has been added, click on “Save menu”.

cleanshot 2022 06 23 at 11.39.23

Now you can see the result in the front end of your website.

Launch WhatsApp directly

In URL add #whatsapp to launch WhatsApp. Customize the link text and click “Add to menu”.

cleanshot 2022 06 23 at 11.42.20

Once the item has been added, click on “Save menu”.

cleanshot 2022 06 23 at 11.44.47

Now you can see the result in the front end of your website.

WhatsApp button in Gutenberg

To create a WhatsApp button in the Gutenberg editor add a button block, once customized just add as a link #joinchat if you want to show the chat window (or launch WhatsApp if there is no CTA) or #whatsapp to launch WhatsApp directly when clicked.

Remember that you can not only use this in a button, for example you can add it to any text link, here is an example, also to an image link, it is very simple and gives you many possibilities.

WhatsApp button in Elementor

To create a WhatsApp button with the Elementor visual editor drag the button element to the page, configure its appearance and add as a link #joinchat if you want to show the chat window (or launch WhatsApp if there is no CTA) or #whatsapp to launch WhatsApp directly on click.

Remember that you can not only use this on a button, for example you can add it to any text link, an image or any Elementor widget that allows you to insert a link.

When scrolling

Another very interesting way to interact with Joinchat is by adding CSS classes in HTML elements, this will allow us for example to execute triggers when an element appears on the screen.

Select the block you want to trigger, it can be a paragraph, an image or any Gutenberg block that allows the insertion of CSS classes. In the right sidebar, Block → Advanced → Additional CSS Classes.

Add joinchat_show to show the chat window when the block appears on screen when scrolling (only if it is an unseen CTA), or joinchat_force_show to show the chat window when the block appears on screen when scrolling (always).

cleanshot 2022 06 23 at 12.05.39

Continue scrolling and you will see the result 👇

Open the WhatsApp chat window… ¡NOW! 💥

Content

Versión gratuita

Snippets

Versión Premium

Chat Funnel

In this section

🍪 We use cookies to personalize and enhance your experience on our site. Visit our Privacy Policy to learn more.

BY USING OUR SITE, YOU AGREE TO OUR USE OF COOKIES.

Open WhatsApp
1
Knock knock
Scan the code