Joinchat

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

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 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 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';
});

Depending on your Joinchat settings, two cookies may be needed. They are first-party cookies and don'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.