# 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 many ways:

1. **On page load, by url**, show Chat Window: 
    - Param `joinchat`, can set delay in seconds, default is 0.
        e.g. `https://example.com/page/?joinchat=5`
    - Hash `#joinchat`
        e.g. `<mark class="has-inline-color has-luminous-vivid-amber-color" style="background-color:rgba(0, 0, 0, 0)">https://example.com/page/#joinchat</mark>`
2. **On click**, open WhatsApp:
    
    It works with your phone and message settings with dynamic variables, **even on pages where Joinchat is not visible**. A **custom phone and initial message** can be set with the `data-phone` and `data-message` attributes. 
    - Href `#whatsapp`
        e.g. `<mark class="has-inline-color has-luminous-vivid-amber-color" style="background-color:rgba(0, 0, 0, 0)"><a href="#whatsapp" data-phone="99999999">Contact Us</a></mark>`
    - Class CSS `joinchat_app`
        e.g. `<mark class="has-inline-color has-luminous-vivid-amber-color" style="background-color:rgba(0, 0, 0, 0)"><img src="contact.jpg" class="joinchat_app" alt="Contact Us"></mark>`
3. **On click**, show Chat Window:
    
    If there is no Chat Window (no CTA and no Opt-in required) WhatsApp opens directly. 
    - Href `#joinchat`
        e.g. `<mark class="has-inline-color has-luminous-vivid-amber-color" style="background-color:rgba(0, 0, 0, 0)"><a href="#joinchat">Contáctanos</a></mark>`
    - Class CSS `joinchat_open`
        e.g. `<mark class="has-inline-color has-luminous-vivid-amber-color" style="background-color:rgba(0, 0, 0, 0)"><img src="contact.jpg" class="joinchat_open" alt="Contact Us"></mark>`
4. **On scroll (when element appears on screen)**, show Chat Window: 
    - Class CSS `joinchat_show`, only show if it's an not seen CTA.
        e.g. `<mark class="has-inline-color has-luminous-vivid-amber-color" style="background-color:rgba(0, 0, 0, 0)"><div class="joinchat_show">…</mark>`
    - Class CSS `joinchat_force_show`, to show always.
        e.g. `<mark class="has-inline-color has-luminous-vivid-amber-color" style="background-color:rgba(0, 0, 0, 0)"><footer class="joinchat_force_show">…</mark>`

|  | **Show Chat Window** | **Open WhatsApp** |
|---|---|---|
| **url** | `?joinchat` or `#joinchat` |  |
| **click** | `href="#joinchat"` or `class="joinchat_open"` | `href="#whatsapp"` or `class="joinchat_app"` |
| **scroll** | `class="joinchat_show"` or `class="joinchat_force_show"` |  |

Joinchat Triggers Summary

## 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](https://docs.join.chat/app/uploads/2022/06/cleanshot-2022-06-23-at-11.36.27.jpg)Once the item has been added, click on **"Save menu"**.

![cleanshot 2022 06 23 at 11.39.23](https://docs.join.chat/app/uploads/2022/06/cleanshot-2022-06-23-at-11.39.23.jpg)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](https://docs.join.chat/app/uploads/2022/06/cleanshot-2022-06-23-at-11.42.20.jpg)Once the item has been added, click on ****"Save menu"****.

![cleanshot 2022 06 23 at 11.44.47](https://docs.join.chat/app/uploads/2022/06/cleanshot-2022-06-23-at-11.44.47.jpg)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](/wp/#whatsapp), 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](https://docs.join.chat/app/uploads/2022/06/cleanshot-2022-06-23-at-12.05.39.jpg)Continue scrolling and you will see the result 👇

Open the WhatsApp chat window… **¡NOW!** 💥