March 30, 2023

Joinchat Plugin

WhatsApp, Messenger, Telegram, Phone call… capture users through their favorite Apps and turn into clients

🎉 Chat with your website visitors through their favorite chat applications. Place a floating button at the bottom of your site and give the best support to your customers.

The best WordPress plugin for WhatsApp, with more than 400,000 installations worldwide.

Documentation | Premium | Support

⌁ What you can do with Joinchat (formerly WAme) ✅

🛎 Insert a contact button for WhatsApp on your website.

Set your ‘WhatsApp’ or ‘WhatsApp Business’ number and let your visitors contact you easily:

🧩 NEW!! WhatsApp Contact Button Block with optional QR Code

📱 On mobile, launch WhatsApp mobile app

💻 On desktop, launch WhatsApp desktop app or WhatsApp Web

🤳 On desktop, show QR Code to scan from phone

Customize your logo, profile picture or even an animated gif.

Define in which pages or zones it should appear, the delay time, if you want it to the right or to the left, only on mobile phones or also on the desktop.

You can define a tooltip or a call to action to capture the user’s interest, the limit is set by your creativity.

📝 Settings at page or archive level.

You can change main settings on every Post, Page, Product or CPT and for Tag or Category archive pages.

Editing your posts in the right side in the Joinchat metabox or editing your tags or categories in the Joinchat section, you can modify Phone, CTA, Start Message and Visibility options.

🔴 Show a notification.

Use a balloon on the button to get the visitor’s attention.

In this way, you ensure that you do not miss any important message you want to give them, surprise them in a less intrusive way.

📯 Create call-to-action messages.

To get users to start the chat, use custom CTAs on each page, product or section.

Welcome them, help them and offer them offers or promotions. Read more

💬 Customize conversation start messages.

Set the first message so that the visitor can start the conversation immediately.

Use our “Dynamic Variables” and you will know what page the visitor is coming from or what product they are looking at when they start the chat.

✅ Opt-in text.

Opt-in is a users’ consent to receive messages from a business.

Write a text with the conditions under which the visitor contacts you (or other info that you consider important).

You can make it mandatory and disable contact until the user accepts it.

🛒 Integration with WooCommerce.

Define CTAs and Custom Start Messages for shop page, product pages and for products on sale.

Add a WhatsApp Contact Button directly on your product page next to the “Add to cart” button or choose the best position, even on products without a price.

🧩 WhatsApp Contact Button Block (min WP 5.9).

Add beautiful and customizable WhatsApp contact buttons in the Block Editor.

Ready to use patterns with different styles are also included.

Enable QR Code on desktop to allow your visitors to scan it and start messaging from their phone.

You can define phone and initial message of the button or use the post/general Joinchat settings (ideal for Reusable Blocks).

🃏 Dynamic Variables.

Use variables in your CTAs and Start Messages that change dynamically for each page:

{SITE} ➡ Website title
{TITLE} ➡ Current page title
{URL} ➡ Current page url
{HREF} ➡ Current page url (full with query params)
{PRODUCT} ➡ Product name (Woo)
{SKU} ➡ Product SKU (Woo)
{REGULAR} ➡ Product regular price (Woo)
{PRICE} ➡ Product current price (Woo)
{DISCOUNT} ➡ Product percent discount when is on sale (Woo)

📈 Analytics Integration.

Automatically send events to Google Analytics, Google Tag Manager and Facebook Pixel when the user opens WhatsApp.

Google Analytics 4 integration with the recommended "generate_lead" event.

Google Ads conversion, just add your Conversion ID and Conversion Label.

You can also create your own custom events or add event parameters. View FAQs / Read more

🍾 Chat Triggers.

Any element in your page can be a chat trigger, eg: it can launch WhatsApp from a link or show the Joinchat CTA when the user scrolls to the footer.

On click:

class "joinchat_app" direct launch WhatsApp
class "joinchat_open" opens Joinchat CTA
link href "#whatsapp" direct launch WhatsApp
link href "#joinchat" opens Joinchat CTA

On scroll (when element appears on screen):

class "joinchat_show" opens Joinchat CTA (first time)
class "joinchat_force_show" opens Joinchat CTA (always)

Set custom phone and initial message for direct WhatsApp triggers:

data-phone="99999999"
data-message="Only for this trigger message".

💱 Multi-Language & RTL Support.

To be able to support all your users, wherever they are. Our plugin is compatible with WPML and Polylang and also RTL languages are supported.

Direct link to edit translations when a translatable field is changed.

🌈 Theme Colors & 🌚 Dark Mode.

You choose a color and we customize the entire visual theme of the widget. With Dark Mode display the chat window with dark colors and white text. From settings you can activate it or leave it automatic and detects devices’ configuration.

⚡ Fast & Light.

Only load what need when needed. Joinchat is lightweight and follow best coding practices. See tests report

🔕 No distractions.

Joinchat integrates with all major Visual Editors and Page Builders and will not appear when editing a page.

Supported editors: Beaver Builder, Brizy Page Builder, Elementor, Oxygen Builder, Page Builder by SiteOrigin, Visual Composer and WP Page Builder.

👨‍💻 Developer friendly.

Fully extensible, with lots of filters and actions to extend its functionality or change behavior.

⌁ PREMIUM ADD-ONS 🍡

Extend Joinchat with awesome features:

🤹🏻‍♂️ Create Support Agents.

Managing multiple WhatsApp accounts has never been easier. Add multiple phone numbers and monitor their availability, even if your employees are out of the office, your website users will know how long it will be before they are back up and running!

🎲 Avoid Overloading.

Avoid delays in support chats. Joinchat allows you to add as many phone numbers as you want. We distribute customer chats evenly among each of your support agents, so you never have to worry about bottlenecks or dropped calls again.

📡 Don’t Miss a Chat.

This feature will allow you to add more chat apps to the basic plugin, in addition to WhatsApp. You can now add Telegram, Facebook Messenger, SMS, phone call, Skype and FaceTime.

🥁 Convincing Calls to Action.

Use our embed tool to beautifully design the content that appears in the chat window. Drive your leads from landings to sales and conversion pages. Add links, images, animated GIFs, buttons or even embedded content from other platforms, surveys, chatbots, forms…

👉 Upgrade Joinchat Now

🧪 Try Joinchat

Do you want to test the Joinchat configuration panel without installing it? You can try it in a WordPress on the fly demo

⌁ If you like Joinchat 😍

Please leave us a ★★★★★ rating. We’ll thank you.
Help us with the translation in your language
Visit our blog and find tips and tricks at join.chat.
Follow @joinchatnow on twitter.

Installation

Upload the entire creame-whatsapp-me folder to the /wp-content/plugins/ directory.
Activate the plugin through the ‘Plugins’ menu in WordPress.

Screenshots

Real example
Real example
Real example
Real example
Real example
Real example
Product Button example
General settings
Visibility settings
WooCommerce settings
Advanced settings
Page settings

FAQ

I can’t see the button or it’s over / under another thing

You can change the position of the button so that nothing covers it by adding this CSS in Appearance > Customize > Custom CSS:

.joinchat { z-index:999999; }

Higher values of z-index are above, the default value is 9000.

If you need to move up:

/* always */ .joinchat { --bottom: 60px; } /* mobile only */ @media (max-width: 480px), (orientation: landscape) and (max-height: 480px) { .joinchat { --bottom: 60px; } }

Change button size

You can change the button size by adding this CSS in Appearance > Customize > Custom CSS:

/* always */ .joinchat { --s: 50px; } /* mobile only */ @media (max-width: 480px), (orientation: landscape) and (max-height: 480px) { .joinchat { --s: 40px; } }

For WooCommerce Product Button you can change size with:

.joinchat__woo-btn { --s: 50px; }

Shortcodes / Triggers

Joinchat does not provide any shortcodes, but you can easily link to WhatsApp in two ways:

Add an anchor link to #whatsapp (open WhastApp directly) or #joinchat (show chat window).
e.g.: add in your menu a custom link with the URL #whatsapp
Add a css class to any element, joinchat_app (open WhastApp directly) or joinchat_open (show chat window).
e.g.: <img src="contact.jpg" class="joinchat_open" alt="Contact">

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

For custom direct WhatsApp links you can add data-phone and data-message attributes.
e.g.: <a href="#whatsapp" data-phone="99999999" data-message="I want to chat">Chat now!</a>

Disable enhanced telephone input

Joinchat uses International Telephone Input library to facilitate and validate the introduction of the phone number in the format of each country. If you have problems with your phone number or you want to write it directly without any changes you can disable it with this filter (remember follow WhatsApp guidelines):

add_filter( 'joinchat_enhanced_phone', '__return_false' );

Allow other roles to change settings

By default Joinchat settings can only be edited by users with manage_options capability (administrator).
You can change the required capability with the filter "joinchat_capability".

// e.g. allow shop managers: add_filter( 'joinchat_capability', function(){ return 'manage_woocommerce'; } ); // e.g. allow editors: add_filter( 'joinchat_capability', function(){ return 'edit_pages'; } );

Since v4.4 Joinchat menu is placed as direct menu in your wp-admin but you can change it with the filter "joinchat_submenu":

// Show as submenu under Settings (also require "manage_options" capability) add_filter( 'joinchat_submenu', '__return_true' );

Disable Gutenberg sidebar

The block editor evolves quickly and errors can occur that we have not anticipated.

If you have any errors with Gutenberg and Joinchat or simply prefer the old Joinchat metabox you can use this filter:

add_filter( 'joinchat_gutenberg_sidebar', '__return_false' );

WPML/Polylang translations

Joinchat settings are saved in your site’s main language. For other languages translation go to WPML/Polylang Settings > String translations, filter strings group by “Joinchat” and update the strings for each language.

Google Analytics integration

Joinchat sends a custom event when user launch WhatsApp.

If Google Analytics 4 (gtag.js) is detected, use the recommended 'generate_lead' event:

gtag('event', 'generate_lead', { event_category: 'JoinChat', event_action: 'whatsapp: 99999999999', event_label: destination_url, chat_channel: 'whatsapp', chat_id: '99999999999', is_mobile: 'yes' | 'no', });

If Universal Analtics (analytics.js) is detected:

ga('send', 'event', 'JoinChat', 'whatsapp: 99999999999', destination_url);

If your site don’t have standard names for UA tracker (‘ga’) or data layer (‘dataLayer’) you can set your custom names with this PHP filter. Also can set a different event name for GA4:

add_filter( 'joinchat_get_settings', function( $settings ){ $settings['ga_tracker'] = 'gaCustom'; $settings['ga_event'] = 'myGA4Event'; $settings['data_layer'] = 'dataLayerCustom'; return $settings; } );

Joinchat is compatible with plugins MonsterInsights – Google Analytics Dashboard for WordPress and Google Tag Manager for WordPress custom names.

Google Tag Manager integration

Joinchat sends a 'JoinChat' event if GTM is detected when user launch WhatsApp:

dataLayer.push({ event: 'JoinChat', event_action: 'whatsapp: 99999999999', event_label: destination_url, chat_channel: 'whatsapp', chat_id: '99999999999', is_mobile: 'yes' | 'no', page_location: current_url, page_title: page_title, });

Facebook Pixel integration

Joinchat sends a 'JoinChat' custom event if Facebook Pixel is detected when user launch WhatsApp:

fbq('trackCustom', 'JoinChat', { event_action: 'whatsapp: 99999999999', event_label: destination_url, chat_channel: 'whatsapp', chat_id: '99999999999', is_mobile: 'yes' | 'no', page_location: current_url, page_title: page_title, });

Custom Events / add Event Parameters

Joinchat triggers custom events before launch WhatsApp 'joinchat:open' and before send analytics events 'joinchat:event'.

You can use them to extend them to your needs, add extra functions, cancel events or add extra parameters.

// e.g.: Send webhook to Zapier jQuery(document).on('joinchat:event', function (event, params) { jQuery.post('https://hooks.zapier.com/hooks/catch/123456/xxxxxx/', params ); }); // e.g.: Add user_is_logged param for GA4/GTM event jQuery(document).on('joinchat:event', function (event, params) { params.user_is_logged = document.body.classList.contains('logged-in') ? 'yes' : 'no'; });

What about GDPR?

Joinchat don’t use cookies and don’t collect personal data.

Joinchat save two localStorage variables for proper operation:

joinchat_views is a visits counter to control when to show chat window.
joinchat_hashes if you set a Call To Action (CTA), when user launch WhatsApp or close Chat Window the CTA hashed is saved to prevent show automatically that CTA again.

Changelog

4.5.20

NEW: WooCommerce product variable {SKU} now works with variable products.
CHANGE Better optimization reduce script size.
FIX Joinchat lite script allow GA4 event name param “ga_event”.

4.5.19

NEW: Not display on editing with major visual editors and page builders. Added new editors in addition to Elementor.

4.5.18

FIX Removed WooCommerce product metabox introduced in v4.5.17.
FIX Correct currency symbol for products on WhastApp message.

4.5.17

FIX Remove “Close” aria-label attribute.
CHANGED Refactor filter ‘joinchat_custom_post_types’.

4.5.16

FIX Product Button don’t appears when are products list before the single product template.
FIX On multi-language prevent return old cached translations on empty settings.
UPDATED International Telephone Input library.

4.5.15

NEW: Added new locations for WooCommerce Product Button.
CHANGE Prevent launch WhatsApp from triggers or Product Button if Opt-in is required (need approval consent).
FIX Elementor 3.5 Finder deprecation message.

4.5.14

CHANGE Delay ‘message_send’ replace variables until used (fix conflict with Rank Math).
CHANGE Optimized variable replacement, runs only when needed.

4.5.13

FIX Tooltip text is cut off when there is an image emoji.
FIX PHP notice undefined ‘title’ introduced in v4.5.12.

4.5.12

FIX Unescape help dynamic vars on post/term metabox.
CHANGED Better get title for dynamic var {TITLE}.

4.5.11

CHANGED Better Joinchat script initialization for deferred or async load by optimizers.

4.5.10

NEW: GA4 “generate_lead” event can now be changed to a custom event.
CHANGED default z-index to 9000 for compatibility with major cookies plugins.

4.5.9

FIX Product Button should not appear on related products.

4.5.8

Unify all occurrences of the plugin name to “Joinchat”.

4.5.7

NEW: Added “Test Number” button for phone input.
CHANGED Reduded delay for QR tooltip.
UPDATED International Telephone Input library.
Reduce size of QR generator script.

4.5.6

FIX Joinchat sidebar for Gutenberg only must be loaded on public CPTs.

4.5.5

FIX WhatsApp Web always deactivated in frontend.

4.5.4

FIX Allows Google Ads conversion ID of 11 characters.

4.5.3

FIX PHP warning introduced in v4.5.2.

4.5.2

FIX Joinchat integration with Gutenberg only loads for WordPress 5.9 or higher.

4.5.1

FIX PHP error introduced in v4.5
CHANGED Bump min PHP version to 5.5.

4.5

NEW: Added Gutenberg native support.
NEW: WhastApp Contact Button Block.
NEW: Native Joinchat sidebar on Block Editor.
NEW: Direct WhatsApp triggers can use custom phone and initial message.
NEW: Triggers also fire analytics events even without the Joinchat floating button.
CHANGED Bump min WordPress version to 4.4 and tested up to 6.0.
CHANGED Can change default “JoinChat” event name via javascript event.
CHANGED Improved interface to enter phone with country code and Google Ads conversion ID.

4.4.3

Minor CSS fixes and optimizations.

4.4.2

NEW Optimized CSS for only button without Call to Action (only 2.5kB).
NEW Compatible with Perfect Brands for WooCommerce for brand custom settings.
NEW Compatible with Google Tag Manager for WordPress custom DataLayer name.
NEW Don’t load on Elementor Site Builder previews.
FIX badge animation don’t show error introduced in v4.4.0.
CHANGED optimized render without unused elements.

4.4.1

FIX Google Ads conversion field is too short.

4.4

NEW: Display QR Code on desktop to scan with phone.
NEW: Opt-in text for user consent (optional or required).
NEW: WooCommerce Product Button for product pages.
NEW: Dynamic variable {HREF} for full URL with query params.
NEW: Google Ads conversion.
NEW: Better analytics events with more info.
NEW: Allow direct show button without animation setting Button Delay as “-1”.
TIP: Easier configuration, double click to apply the example settings in placeholders.
CHANGED default z-index is 9999.
CHANGED allow set empty CTA for products with {} in main settings.
CHANGED GA4 custom ‘JoinChat’ event now is ‘generate_lead’ recommended event.

4.3.2

Styles minor improvements, fix tooltip align.

4.3.1

FIX empty phone notice dismiss.

4.3

NEW: Customize in category/tag archive page.
UPDATED styles for better browsers support.
UPDATED International Telephone Input library.

4.2

NEW: Now can change default role allowed to configure Join.chat global settings.
NEW: Now can show Join.chat as a direct menu in wp-admin.
NEW: link to update translatable settings when changed.
NEW: Accessibility: disable animations for devices with Reduced Motion preference.
FIX Elementor 3.5 Finder deprecation message.
FIX WPML ensure translations are registered in default site language.
Styles minor improvements.

4.1.15

NEW: WordPress 5.8 tested & updated.
FIX RTL text align right.
FIX Send event to all GA4 properties.
Prevent faux WhatsApp clicks when chat window is showed automatically

4.1.14

NEW: Enhanced telephone input scripts now are included in plugin and self-hosted.

4.1.13

NEW: Add Thank you page in WooCommerce visibility options.
SECURE frontend escape html output.

4.1.12

NEW: Add integration with Elementor Finder.
NEW: Add compatibility with Storefront theme mobile toolbar.
Better dependency loading.

4.1.11

FIX some CSS optimizers break message bubble style.
FIX PHP notice undefined ‘telephone’.

4.1.10

NEW: Add support to new Elementor landing pages.
FIX fallback for browsers that don’t support CSS “clamp()” (i.e Edge for Android)

4.1.9

SECURE escape input values on wp-admin (thanks to Camilo @camilo517)
NEW can pass custom data layer name for gtag.js and GTM with filter joinchat_get_settings
FIX also send Google Analytics 4 event when Universal Analytics and GA4 are present

4.1.8

Front script better settings validation
FIX error with some prices on variable replacement
Bump required minimun WordPress version to 3.5

4.1.7

FIX jQuery 3 deprecation warnings for event shorthands
FIX JSON error with “"” on variable replacement
FIX Don’t load public hooks on wp-login.php page

4.1.6

FIX minor css error introduced in v4.1.5

4.1.5

NEW: Add links to WhastApp with #joinchat or #whatsapp in your href. CSS triggers and links work on all pages, even without Join.chat visible.
NEW: Analytics event compatible with Google Analytics Dashboard Plugin for WordPress by MonsterInsights custom tracker name
Load images when show button for better Page speed.

4.1.4

NEW: PHP 8 & WordPress 5.6 tested & updated
Cleaner placeholder on telephone field
Added lazy loading attribute for image

4.1.3

NEW: Ensure chatbox header is allways visible on mobile with better height control
NEW: WooCommerce, use custom Join.chat settings on shop page for all shop catalog pages

4.1.2

SECURE window.open with ‘noopener’
FIX PHP error undefined get_col_charset() on old WordPress versions

4.1.1

FIX error on prices with ‘$’

4.1

NEW: Use custom text on chat window header
Added ‘joinchat_app’ class trigger that opens WhatsApp
Added Telephone to translatable fields
Added ‘joinchat_disable_thumbs’ filter
FIX updated style regex patterns
FIX hide on mobile when user fill forms

4.0.10

NEW: show tooltip on hover button
NEW: hide on mobile when user fill forms
CHANGED by default clear all plugin data on uninstall.
FIX remove unnecessary get option ‘whatsappme’

4.0.9

FIX notification balloon text color white
New js event ‘joinchat:starting’

4.0.8

FIX WP Super Cache clear cache error on save
Image thumbnail fallback if possible

4.0.7

FIX WP Super Cache clear cache error on save

4.0.6

Minor changes: better encode emoji detection, check WooCommerce version, css fixes and improvements

4.0.5

NEW: Clear third party cache plugins on settings save.
FIX php error on image resize.
UPDATED International Telephone Input library to v.17.

4.0.4

Better public settings JSON output
Re-fix WAme deactivate

4.0.3

Fix WAme deactivate

4.0.2

Encode emojis if DB not support utf8mb4.
Better update from WAme (no manual activation required).

4.0.1

minor fixes.

4.0.0

NEW: Join.chat brand.
NEW: Widget theme color.
NEW: CSS class triggers to open chat window.
Lighter, reduced assets size and deleted images.

CHANGED for SEO: All analytics events change from WhatsAppMe to JoinChat.

CHANGED for Devs: All css classes, actions and filters change from wame or whatsappme to joinchat.

See changelog.txt for older changelog