Automatically capture custom user data (SDK)

Why use the Mava web chat SDK?

Automatically capturing your user information is a great way of reducing friction for your customers when opening a ticket, as well as helping your team securely identify a customer and gather key pieces of information relevant to helping that customer.

For example, when a customer who's logged into your website or web app you can automatically pull key pieces of user information, such as their login email, account number or subscription tier. This information can then be displayed on the right hand side of your teams Mava inbox under User or Ticket details.

Before you get started

  • Setup will require basic web development knowledge and access to your organizations code base

  • Setup can be completed by a developer in 10-30 minutes

Details

  • Installation Method: Add via a script tag (no npm package yet)

  • Scope: Frontend only

  • Compatibility: Uses the same script as the WebChat Widget

Mava SDK can be used to ingest any User details (attributes) at any time during their interaction with your web-app or site.

How to add the Mava SDK

Update you webchat script

The Mava SDK can be added to your site by updating your existing web chat script tag within your website <head> element, or by adding a new WebChat Integration and updating the following field: enable-sdk=”true" . This will need to be on every page you intend to use the SDK, and will set the Mava class on the window object.

Example web chat script below shows where you should add the enable-sdk=”true” field to your code:

<head>
<!-- Mava Widget --> 
<script defer src="https://widget.mava.app" widget-version="v2" id="MavaWebChat" data-token="YOUR-TOKEN" enable-sdk="true" >
</script>
</head>

(Please Note: to find the unique code script for your Mava webchat, that includes your data token, please review the Webchat setup page)

Add trusted domains

For security, we require you to add your trusted domains and subdomains before you can collect data with the SDK.

Within the Webchat setup page you'll be able to add a list your trusted domains and subdomains separated by commas. To mark all subdomains, use an asterisk as a placeholder like this: *.example.com.

Default attribute list

Once you've updated the webchat script and added your trusted domains and subdomains, you're now ready to send any user attributes.

Note: at the moment, you can only add "User Attributes" via the SDK, not "Ticket Attributes"

Default attributes are as follows:

emailAddress

Discord ID

Telegram Username

User ID

Company Name

Full Name

Phone Number

Users on a Diamond or Whale plan are able to create fully custom attributes on the Ticket & User Attributes page.

Send custom user attributes

For email you can run the following functions:

window.Mava.initialize();
 window.Mava.identify({ emailAddress: 'replace-with-customer-email' });

You must call initialize before using identify. There is no need to pass any parameters to initialize, as it uses the data-token added to the existing Mava WebChat Widget.

You can also send any other default or custom attributes to Mava as follows. For example, if you created a custom attribute called 'Customer Tier' you could call the following:

window.Mava.initialize();
 window.Mava.identify({ customAttributes: [{ label: 'Customer Tier', value: 'Gold' }] })

Or if you wanted to send the phone number:

window.Mava.initialize();
 window.Mava.identify({ customAttributes: [{ label: 'Phone Number', value: 'replace-with-customer-phone-number' }] })

(Please Note: The attributes are case sensitive and are all strings)

Where to identify users? Best practice

We advise identifying a user when they first sign up for your service. Later, when we have finished adding custom fields. You should also be able to add other attributes / information you want to store, by calling identify again with any number of custom attributes.

Updating attributes in channels aside from web chat

To update user attributes in tickets from other channels, you can use the chatbot builder for users to manually enter data, or the API to automatically inject data.

PreviousWeb Chat SetupNextAutomatically open the web chat on page load

Last updated

Was this helpful?