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 Joinchat Settings > Advanced > 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 Joinchat Settings > Advanced > 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:
- 01Add an anchor link to #whatsapp (open WhatsApp directly) or #joinchat (show chat window). e.g.: add in your menu a custom link with the URL #whatsapp
- 02Add a css class to any element, joinchat_app (open WhatsApp 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/TranslatePress translations
Joinchat settings are saved in your site’s main language. For other languages translation go to your multilanguage plugin on string translations, filter strings group by “Joinchat” on WPML/Polylang or filter by “JC” on TranslatePress. Then update the strings for each language.
Google Tag with multiple destinations
Joinchat since 5.1 can detect multiple destinations in Google Tag and send events to all of them.
Google Analytics 4 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 your site don’t have standard names for data layer (‘dataLayer’) you can set your custom names with this PHP filter. Also can set a different event name for GA4 :
// Rename GA4 event / Rename dataLayer name add_filter( 'joinchat_get_settings', function( $settings ){ $settings['ga_event'] = 'myGA4Event'; $settings['data_layer'] = 'dataLayerCustom'; return $settings; } ); // Disable GA4 event add_filter( 'joinchat_get_settings', function( $settings ){ $settings['ga_event'] = false; return $settings; } );
Joinchat is compatible with plugins MonsterInsights – Google Analytics Dashboard for WordPress , Google Tag Manager for WordPress and PixelYourSite 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 can be used without any cookies .
Depending on your Joinchat settings, browser storage may be needed. Joinchat uses localStorage (or sessionStorage when cookieless mode is enabled) and doesn’t collect personal data.
- joinchat_views is a visits counter to control when to show chat window.
- joinchat_hashes saves when a user has interacted with a CTA to prevent automatically show that CTA again.
You can view in your Settings > Privacy > Policy Guide the suggested text by Joinchat.
To ensure a non-persistent data mode, you can use Joinchat Premium privacy controls or add this snippet to force cookieless mode (sessionStorage only):
add_filter( 'joinchat_get_settings', function( $settings ){ $settings['cookieless'] = true; return $settings; } );
