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.
  • Tested up to version: 5.4.1.

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 the 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. Chat delay. Time in seconds (0 off) for the chat window to automatically display after the delay.
  4. Notification balloon. (On / Off) displays a warning balloon instead of opening the chat window for a “less intrusive” mode.
  5. 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.

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

πŸ‘‰Go to the Advanced 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.

  • Depending on your content. Options: Visible / Not visible / Inherit

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

– At the 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 page or entry.
  3. Finally click on Update.

– WooCommerce

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

πŸ‘‰Go to the Advanced tab to set the visibility settings and configure where Join.chat appears in your store:

  • Shop. Options: Visible / Not visible / Inherit
  • β€” Product page. Options: Visible / Not visible / Inherit
  • β€” Cart. Opciones: Options: Visible / Not visible / Inherit
  • β€” Checkout. Options: Visible / Not visible / Inherit
  • β€” My Account. Options: Visible / Not visible / Inherit

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

πŸ‘‰Go to the WooCommerce tab to set your store’s basic values:

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 a 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 on the products on offer. 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} (Discount percentage).
    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.


Behavior

The plugin has a number of behaviors in a given situation or in general.

Button

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

Tooltip

  • CONDITIONS:
    • “Tooltip” defined
    • The Chat Window will not be automatically displayed
  • BEHAVIOR:
    • It shows up every time.
    • The tooltip is not shown again if we have discarded it (launch WhastApp or close the Chat Window).

Chat Window

  • CONDITIONS:
    • “Call to action” defined
    • “Chat delay” greater than zero
    • “Warning balloon” unchecked
  • BEHAVIOR:
    • From the second visit, the Chat Window is displayed after the X seconds of “Chat Delay”.
    • The Chat Window is not shown again if we have discarded it (launch WhastApp or close the Chat Window).

Notification Balloon

  • CONDITIONS:
    • “Call to action” defined
    • “Chat delay” greater than zero
    • “Warning balloon” marked
  • BEHAVIOR:
    • Always displayed after the X seconds of “Chat Delay”.
    • The balloon is not shown again if we have discarded it (launch WhastApp or close the Chat Window).

NOTE: Each Call to Action (CTA) is discarded independently, i.e. if there is a different CTA on a page, the Tooltip, Chat Window or Balloon, as appropriate, will be displayed.