Knowledge base | mouseflow

Olark Integration

With Mouseflow, it's easy to seamlessly integrate into chat software like Olark. You can do the integration both ways, either adding the playback URL to the chat session inside Olark, or add customer details from Olark into the Mouseflow session. Let's go through both options here.

Adding the playback URL to Olark

Olark has a JavaScript API that lets you add custom fields to the chat session. The code below shows you how to add the playback URL as a custom field in Olark.

<script type="text/javascript">
    window._mfq = window._mfq || [];
    _mfq.push(
        olark('api.visitor.updateCustomFields', {
            mouseflowPlaybackUrl: 'https://app.mouseflow.com/websites/' + 
                mouseflow.websiteId + '/recordings/' + mouseflow.getSessionId() + '/play'
        });
    );
</script>

What happens in the code is the following:

  1. We make sure the _mfq variable is available. This is the variable that is used to communicate with the Mouseflow object.
  2. We call _mfq.push( ... ) to make sure the inner function is called when Mouseflow's context is fully loaded.
  3. We call olark('api.visitor.updateCustomFields', name: value) to add a new custom field to olark. The name is mouseflowPlaybackUrl, and the value is the URL of the playback (requires that you are logged into your Mouseflow account)

Adding customer data from Olark into Mouseflow

Olark has a way to get customer details through their JavaScript API. We'll show you how to use this data to send to Mouseflow. See the code example below.

<script type="text/javascript">
    window._mfq = window._mfq || [];
    olark('api.visitor.getDetails', function(details) {
    if (details && details.emailAddress)
        _mfq.push(["setVariable", "olark_email", details.emailAddress]);
});
</script>

The above code checks if the Olark session has an email address registered, and if so, adds it as a custom variable to Mouseflow. You can see the full details object here (see right-side column). To enhance this integration further, you can use the above email address to identify the user directly in Mouseflow. This is done like this:

<script type="text/javascript">
    window._mfq = window._mfq || [];
    olark('api.visitor.getDetails', function(details) {
        if (details && details.emailAddress)
            _mfq.push(["identify", details.emailAddress]);
    });
</script>