Documentation for Join.chat plugin

Content

Introduction

What is Join.chat?

It is a free plugin for WordPress that allows you to connect in one click the pages of a website with the WhatsApp profile of the different support agents of the web project.

Why Join.chat?

  • It is very simple and intuitive to use by users and easy to install by support agents (less than 2 minutes).
  • It improves the assistance and support by WhatsApp between suppliers and users/customers.
  • Increases the conversion rate. Attracts direct attention by impacting in a non-intrusive way.

System requirements

To get the best experience with the latest available Join.chat update, we suggest the following:

  • PHP version: 5.3 or higher.
  • Compatible with WordPress version 3.0.1 or higher.
  • Compatible with WooCommerce version 3.0 or higher.
  • Tested up to version: 5.5.3.

This documentation assumes that you have already installed WordPress on your website.


Installing Join.chat

Thank you for choosing our plugin. This document will guide you through the entire installation process on your WordPress site.

— Option 1. Downloading the ZIP file

  1. Download Join.chat WP Plugin, for free from the WordPress repository from this link.
  2. Go to the WordPress control panel and click on Plugins> Add New. Choose the zip file you just downloaded. Click Install, then click Activate.

— Option 2. From the WordPress control panel

  1. You can install Join.chat WP Plugin, directly from the WordPress control panel.
  2. From the left side menu go to Plugins> Add New. In the search field on the right, type “joinchat”. Search for our plugin in the results and click Install, then Activate.
Installing Joinchat Wordpress Admin

Configure Join.chat

Components

To help you understand how Join.chat works, we want to show you an outline of all the elements that make up our plugin, so you’ll know what we mean at all times.

  1. Button
  2. Notification Balloon
  3. Tooltip
  4. Chat Window
  5. Call to action (CTA)
  6. Start WhatsApp button

At a general level

In the WordPress side menu, go to Settings> Join.chat. In the General tab you can set the basic values for the plugin:

Button. Set the contact number and where and how you want the WhatsApp button to be displayed.

  1. Telephone. Contact phone number (If you have purchased Random Phone Add-on you will be able to add multiple phone numbers, see the Add-on documentation) Choose the country flag and enter the phone number.
  2. Message. Predefined text of the first message sent by the user through WhatsApp. You can use the {SITE} {URL} {TITLE} variables. For example: Hello I was watching {TITLE} and I need:
  3. Mobile only. (Activation / Deactivation) to only show the button on mobiles.
  4. Position on screen. You can choose between Left and Right.
  5. Image. Image that replaces the default icon. The new image will alternate with the Join.chat logo. Supports files, JPG, PNG, GIF (even animated). Click the Select Image button and select a button image from your media library.
  6. Tooltip. Short text displayed next to the WhatsApp button. For example. 💬Do you need help?
  7. Button delay. Time from when the page is opened until the WhatsApp button is displayed. Value set in seconds.
  8. WhatsApp Web. (Enable / Disable) to open WhatsApp Web directly on the desktop.

Chat window. If you define a “Call to Action” a window simulating a chat will be displayed before WhatsApp is started. You can introduce yourself, offer help, or even advertise to your users.

  1. Call to Action. CTA window that defines text to encourage users to contact WhatsApp. You can write text with formatting styles as in WhatsApp: italic_ black ~blackened~. Even use emoji icons and ASCII code. You can use the dynamic variables that will be replaced by the values of the page the user is visiting: {SITE} (Join.chat), {URL} (https://join.chat/example) {TITLE} (Page title).
    For example: Hello 👋. Tell me, how can I help you? (If you have purchased CTA Extras Add-on you can add videos, images, animated gifs and much more, see the Add-on documentation)
  2. Start WhatsApp Button. Text of the WhatsApp start button in the chat window. For example: Start Chat
  3. Theme color. Choose the color you want from the color palette or write it in hex code.
  4. Dark Mode. (Yes / No / Auto) Displays the chat window in a range of dark colors. If it’s on automatic, it detects the device’s dark mode settings.
  5. Logo. You can choose to display the Join.chat logo, WhatsApp, or a custom text.
    🚧 From version 4.1 of Join.chat the options to customize header are included in the free plugin.
  6. Chat delay. Time in seconds (0 off) for the chat window to automatically display after the delay.
  7. Visits. Number of visits to the page from which the chat window is automatically displayed. Indicated to avoid the confluence of Join.chat with the warning of cookies and modal popup windows.
  8. Notification balloon. (On / Off) displays a warning balloon instead of opening the chat window for a “less intrusive” mode.

Click the Save Changes button to set the new values indicated.

👉 Go to the Visibility tab to set the visibility settings.. Here you can configure on which pages the WhatsApp button will be visible. Click on the Restore Default Visibility link to return to the initial values:

Global. Visible (On / Not visible (Off)

  • Front page. Options: Visible / Not visible / Inherit
  • Blog page. Options: Visible / Not visible / Inherit
  • 404 page. Options: Visible / Not visible / Inherit
  • Search results. Options: Visible / Not visible / Inherit
  • Archives. Options: Visible / Not visible / Inherit
  • — Date archives. Options: Visible / Not visible / Inherit
  • — Author archives. Options: Visible / Not visible / Inherit
  • Singular. Options: Visible / Not visible / Inherit
  • — Page. Options: Visible / Not visible / Inherit
  • — Post. Options: Visible / Not visible / Inherit

Customized content types.

Customized content types.

  • Portfolio. Options: Visible / Not visible / Inherit

Wooomerce.

  • Shop. Options: Visible / Not visible / Inherit
  • — Product page. Options: Visible / Not visible / Inherit
  • — Cart. Options: Visible / Not visible / Inherit
  • — Checkout. Options: Visible / Not visible / Inherit
  • — My account. Archives. Options: Visible / Not visible / Inherit

Click the Save Changes button to set the new values indicated.

At a page level

  1. To change the general settings on a specific page or entry, go to that page and edit it.
  2. On the right side you will find the Join.chat Metabox where you can modify the Phone, as well as the Call to Action, Message and Join.chat display options for this particular publication.
  3. Finally click on Update.
Configure and customize Join.chat in the metabox on the right side of any Entry, Page, Product or Custom Post Type by editing the post in the control panel.

WooCommerce

If you have the WooCommerce plugin installed you can configure Join.chat in your shop as well.

👉 Go to the WooCommerce tab to set up the settings for Product Calls to Action and for Products on Sale, as well as for Product Messages. This will save you a lot of time and make you more productive by using variables (remember that you can define specific texts on each product page).

Product chat window. You can define different texts for the chat window on the product pages.

  1. Call to action for products. CTA window that defines text to encourage users to contact WhatsApp. You can write text with formatting styles as in WhatsApp: italic_ black ~blackened~. Even use emoji icons and ASCII code. You can use the dynamic variables that will be replaced by the values of the product page the user visits: {PRODUCT} (Product name), {SKU} (ABC98798) {PRICE} (Product price).
    For example: ¡This *{PRODUCT}* can be yours for only *{PRICE}*!
  2. Call to action for products on sale. It is the same as the previous case, but it will only work for products on sale. You can use the dynamic variables that will be replaced by the values of the product page the user visits: {REGULAR} (Normal price), {PRICE} (Discounted price), {DISCOUNT} (Percentage discount).
    For example: ¡Save *{DISCOUNT}* on *{PRODUCT}*. It can be yours for just ~{REGULAR}~ *{PRICE}*.
  3. Message for products. Predefined text of the first message sent by the user through WhatsApp. You can use the {SITE} {URL} {TITLE} variables. For example: Hello {SITE}. I have a question about {PRODUCT} - {SKU}

Click the Save Changes button to set the new values indicated.

Catalog, cart and checkout pages. You can modify the Join.chat settings for these pages by editing the page in the Join.chat Metabox (as in the previous section “At a page level“).


Behavior

The plugin has a series of behaviors depending on the configuration and user interaction.

NOTE 1: When interacting with a Call to Action (close the chat window or open WhatsApp) it is considered as “seen” and will no longer show itself automatically.

NOTE 2: Each Call to Action (CTA) is independent. For example, the general CTA can be “seen” but on other pages have different CTAs that will be shown depending on the configuration.

Button

  • CONDITIONS:
    • “Telephone” defined
    • “Visibility” set to ‘show’
  • BEHAVIOR:
    • The button always appears after the seconds of “Button Delay”.

Tooltip

  • CONDITIONS:
    • “Tooltip” defined
  • BEHAVIOR:
    • Displayed if the Chat Window is not automatically displayed.
    • It’s not automatically shown again if it’s “seen”.

Chat Window

  • CONDITIONS:
    • “Call to Action” defined
    • “Chat Delay” greater than zero
    • Notification Balloon unchecked
  • BEHAVIOR:
    • From the number of “Visits” the Chat Window is displayed after the seconds of “Chat Delay”.
    • It’s not automatically shown again if it’s “seen”.

Notification Balloon

  • CONDITIONS:
    • “Call to Action” defined
    • “Chat Delay” greater than zero
    • “Notification Balloon” marked
  • BEHAVIOR:
    • It is displayed after the seconds of “Chat Delay”.
    • It’s not automatically shown again if it is “seen”.

Triggers

In addition to the behavior defined by the settings you can also interact with Join.chat on your pages in two ways:

  1. Adding anchor links:
    • #joinchat to display the chat window (or launch WhatsApp if there is no CTA) on click.
    • #whatsapp to launch WhatsApp directly on click.
  2. Adding CSS classes in your HTML:
    • joinchat_open to display the chat window (or launch WhatsApp if there is no CTA) on click.
    • joinchat_close to hide the chat window on click.
    • 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).

This works with your phone settings and message with dynamic variables, even on pages without Join.chat visible.

Anchor example: <a href="#whatsapp">Contact us</a>
Class example: <img src="contact.jpg" class="joinchat_open" alt="Contact us">


Translations

Join.chat is compatible with WPML and Polylang allowing to translate to each language the texts that you configure in the general settings:

  1. Set the general Join.chat settings in the main language of the site.
  2. According to the plugin:
    WPML. Go to WPML> String Translation and filter the strings by the “Join.chat” domain.
    Polylang. Go to Languages> String translation and filter the strings by the “Join.chat” group.
  3. Update string translations for each language and save.

More information about string translation for WPML and Polylang.


Integration with analytical tags

It’s important to know how users interact with your site and where they contact most through WhatsApp. Join.chat automatically recognizes if Google Analytics, Google Tag Manager and Facebook Pixel are present on your site and sends an event when the user launches WhatsApp.

Google Analytics

It is compatible with Global Site Tag (gtag.js) and Universal Analtics (analytics.js). An event is sent with the parameters:

action: 'click'
category: 'JoinChat'
label: WhatsApp contact url

If the Universal Analytics global object does not use the default name ‘ga’, through the PHP 'joinchat_get_settings', you can pass the parameter ‘ga_tracker’ with the custom name.
🌟 Since version 4.1.5 it is compatible with the MonsterInsights plugin that uses the global object ‘__gaTracker’.

add_filter( 'joinchat_get_settings', function( $settings ){
 $settings['ga_tracker'] = 'my_custom_GA_name';
 return $settings;
} );

Google Tag Manager

A custom event is launched with the parameters:

event: 'JoinChat'
eventAction: 'click'
eventLabel: url de contacto de WhatsApp 

Facebook Pixel

A “Custom Event” is sent with the name 'JoinChat' and the parameters:

eventAction: 'click'
eventLabel: WhatsApp contact url 

Other integrations

Join.chat triggers 'joinchat:open' event before launching WhatsApp which can be used to add your custom tracking code (or other needs). The event is passed two parameters: an object with the WhastApp link and another one with the Join.chat configuration.

Example for conversion of Google Ads:

jQuery(function($){
 $(document).on('joinchat:open', function (event, args, settings) {
 // Your staff...
 // Note: args.link is the link to open, you can change it
 // but only wa.me, whastapp.com or current domain are allowed.

 // e.g.: Google Ads conversion
  gtag('event', 'conversion', {
 'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL',
  'value': 1.0,
  'currency': 'USD',
  });
 });
});

🍪 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.