Hide web chat icon

Why hide the web chat icon and use a custom launch event?

If the Mava web chat icon is blocking content on your website for desktop or mobile users you can hide it by default and add a custom launch event as outlined in the previous section. This enables you to configure the Mava web chat to only open if, for example, a user presses a button or link on your site.

Advantages:

  • Chat icon will no longer be blocking content on your site

  • Can be configured so the chat icon is only hidden on mobile devices, but remains visible on larger screens

Disadvantages:

  • With a less prominent support icon, users may find it harder to contact your support team

  • You'll have to manually configure an unread message icon to alert users to new unread messages

  • We recommend using the Mava SDK or 'Request users email' setting to capture the users details so they receive a response via email if they abandon the chat before your team replies.

  • Requires developer resources, implementation time c.10-30 minutes

Method

To hide the launcher add data-hide-mava-launcher="true" to existing widget script that should be within your website <head> element. 

<script src="https://widget.mava.app" data-hide-mava-launcher="true" />

The most common use case for this is for use on responseive sites when the screen size is smaller (e.g mobile view) and screen real estate is limited. For example you can construct the script element as outlined below, ensuring that the launcher is only displayed on screens greater than 768px in width.


const script = document.createElement('script');
script.id = 'MavaWebChat';
script.setAttribute('widget-version', 'v2');
script.setAttribute('data-token', 'YOUR_TOKEN');

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (windowWidth < 768) {
   script.setAttribute('data-hide-mava-launcher', 'true');
}

window.document.head.appendChild(script);

Combining the with custom launch events from the previous section, you can hide the Mava web chat icon on mobile and use a custom launcher instead, giving you a lot of flexibility on how you use the widget.

How to display unread message notifications

If you choose to hide the default web chat launcher, users won’t see the unread message indicator when your team responds, provided their chat window is closed.

To address this, you can use the following functions to both retrieve the current unread message count and register a callback function that triggers when the unread message count changes

Retrieves the current unread messages count:

window.MavaGetUnreadMessageCount

Registers a callback function to execute when there’s a change in unread message count:

window.MavaRegisterUnreadNotificationCallback

PreviousCreate custom launch eventNextDelay script load

Last updated

Was this helpful?