Setting up Joinchat

Components

To help you understand how Joinchat 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> Joinchat. 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. Test Number. Click on this button and check that everything is working correctly.
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 Joinchat 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.
9. QR Code. (On / Off) to offer users who are viewing the web page on desktop an alternative QR code to the click, which can be scanned from the cell phone. This makes it easier for people who do not have certain applications installed on their desktop computers to launch them from the cell phone easily and instantly. To display the code, just hover the mouse pointer over the button and wait a moment.
   

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} (Joinchat), {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 Joinchat logo, WhatsApp, or a custom text.
   🚧 From version 4.1 of Joinchat 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 Joinchat 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 Joinchat Metabox where you can modify the Phone, as well as the Call to Action, Message and Joinchat display options for this particular publication.
3. Finally click on Update.

At category or tag page level

1. To modify the general settings on the archive page of a category or tag, go to its listing and edit it.
2. In the form you will find the Joinchat section where you can modify the Phone, as well as the Call to Action, the Message and the Joinchat Display Options for that particular category or tag.
3. Finally click on Update.

By default, Joinchat can be customized in WooCommerce blog and product tag and category taxonomies. With the filter 'joinchat_taxonomies_meta_box' you can add other “Custom Taxonomies”.

WooCommerce

If you have the WooCommerce plugin installed you can configure Joinchat 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.

Product button. You can add a contact button on the product sheets of your store.

1. Select the Button Position you prefer, “Don’t show” keeps the button disabled. Any of the other options will show a green WhatsApp button, the text of the button must be defined in the Button text field.
   

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

Advanced

Under the Advanced tab you can configure some special features:

1. Opt-in. This is the consent of users to receive messages from a company. You must include a text explaining how you will use the data you will collect, including a link to the Legal Notice or Use Policy. For more information, please read the official WhatsApp guidelines carefully. Opt-in Required. If you check this option the user will be obliged to check an acceptance box, since the possibility of contact will not be enabled without this requirement and no user will be able to start the chat unless they have checked the Opt-in.
2. Conversions. From here you can add the Google ads conversion tag, so it will be sent automatically when you start the chat.