Sending Web in-app notifications

Introduction

Mixpanel enables you to create and send rich notifications to users browsing your website. If you are using our in-app notifications product, there are 3 things you need to make sure of.

  1. Include the latest version of the Mixpanel JavaScript library on your website.
  2. Make sure you are identifying your users in your website's JavaScript code.
  3. Create a web in-app notification on the Notifications tab of the Mixpanel website.

Integration

The Mixpanel JavaScript library will automatically check for a notification when you identify the current user on your site. If a notification is available for the current user that they haven't already seen, it will be displayed immediately in an overlay view.

That's it, you're done!

Customizing display of an in-app notification

In JavaScript, Mixpanel web in-app notifications will always render when your webpage is loaded at the point which you call identify within the JavaScript library. At this time there is no means to control when the in-app is displayed besides calling identify at a specific point on your site.

You do have the ability to customize the look and feel of the Mixpanel web in-app notification. Since the notification is made of up multiple JavaScript elements with CSS styling, the in-app can be modified by adding CSS styling to your site. These will be applied to the Mixpanel web in-app when it is delivered to an end user. As an example of this, you could change the font of the notification.

<style type="text/css">
  #mixpanel-notification-content{
    font-size: 20px;
    font-family: Impact;
    font-style: bold;
  }
</style>

If you want further insight on specifically how this can be done, please see detailed instructions here.

Using profile properties

Just like emails, in-app notifications will replace content wrapped in {{}}. For example, if you add a Location property to your user profiles, you can send notifications like this:

Come and visit us at our {{ ${Location} }} office!

A user with a profile property Location: Asheville will get the following message:

Come and visit us at our Asheville office!
If some of your profiles have a value, but others don't, you can use a fallback value:

Come and visit us at our {{ ${Location} | fallback:"nearest" }} office!

Profiles without a Location property will receive this message:

Come and visit us at our nearest office!