Send Web In-App Messages

Mixpanel enables you to create and send rich messages to users browsing your website. If you are using our in-app messages product, there are three 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 message on the Messages tab of the Mixpanel website.

Integration

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

Creating a Web In-App Message

Using Mixpanel you can contact your users directly through your app with in-app messages. Select Web from the pop-up window to see the following form:

Screen_Shot_2018-08-22_at_11.01.25_AM.png

Select the size of your message, either Takeover or Mini, and the color of the message, either Light or Dark. Insert an image into your message and write your message directly into the preview image.

You can also choose to add an A/B test (link to A/B Test overview doc) to your push notification by selecting “ADD AN A/B TEST” button.

Customizing Display of an In-App Message

In JavaScript, Mixpanel web in-app messages 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 message. Since the message 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 message.

<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 messages will replace content that is wrapped in {{}}. For example, if you add a Location property to your user profiles, you can send messages 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!

Style Web In-App Messages with CSS

With web in-app messages, you can use our native JavaScript library to deploy targeted messages to your users within their browser. By simply integrating Mixpanel with JavaScript you can start sending these messages to your users with profiles in Mixpanel.

These in-app messages require you to do the following to send a message:

  1. Create a web in-app messages in Mixpanel through the Messages tab
  2. Target specific users who should receive the message
  3. Identify the user on their browser

Once you have the message ready and call mixpanel.identify for the user, the in-app will be displayed overlaying your site!

Customizing Web In-App Messages

Of special interest is the ability to customize these messages so they match the look and feel of one's website. Since users will experience these on your site, you will want to be sure you customize the in-app in such a way that it looks good on your site.

The Mixpanel web in-app is made of up multiple JavaScript elements which can be modified by adding CSS styling to your site. These will be applied to the Mixpanel in-app when it is delivered to the user. You can see the main div elements broken down by id in the diagram below.

2015-04-17_20_39_11.934991-In-App_Notifications.png

Looking at the diagram in detail, you will see each element of the message has its own DOM element which can be modified. These can be changed to your liking to create the pixel-perfect message styling you desire.

Example of Customizing a Web In-App Message

Let's imagine we wanted to do the following:

  1. Change the color and fonts used for the main message text
  2. Remove the "Powered by Mixpanel" text

To do this, we would create custom CSS to place on our page to make these changes. For this example, we would place the following code on the page:

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

Once we have this code on our site, the in-app will be automatically modified when it is displayed to the user:

2015-04-17_21_00_03.057449-InApp_new.png 

By modifying other elements you can continue to customize the message to the point where it looks right with the styling and feel of your site.

If you have any issues sending web in-app messages or can't get the styling just right, please send us an email at support@mixpanel.com and we can help get your messages sending as you desire. 

Schedule a Web In-App Message

When a user triggers the people method that sends an update to Mixpanel's backend, once the update has been ingested and added to a user's profile, the profile is then added to the list of target profiles for the in-app campaign. From there, the notification is effectively "queued-up" while active, and the delivery itself is triggered by the user arriving on the site and triggering a mixpanel.identify() call. 

By default, in-app messages can accommodate a delivery upon the loading of a page (there's no issue with calling .identify() upon say, any pageload within an authenticated session alongside the mixpanel.init() call). 

With the above in mind, it's not deterministically possible to trigger an in-app notification to be delivered and displayed as soon as a user performs an action (or fails to) as a function (or independent) of time that results in them meeting a targeting criteria. As described above, there is a decent amount of communication between the user's device and Mixpanel that must occur before a campaign is prepared for the respective user to be delivered, and before you can call identify() to check and pull campaigns from our undocumented /decide API.

To get around this issue, Mixpanel recommends placing a 3-second (or more) timeout using setTimeout() in your code to invoke a second mixpanel.identify(). This allows a sufficient amount of time for the update to be delivered and processed so that /decide will have the campaign ready to be 'pulled'.

One crucial thing to note, however - calling identify() sets a flag on the page that effectively disables the default /decide check behavior from subsequent identify() methods for in-app notifications. As such, you will need to manually reset that flag to force another check. To illustrate this -

mixpanel.identify(); // checks for notifications
mixpanel.identify(); // does NOT check for notifications
mixpanel._flags.identify_called = false;
mixpanel.identify(); //checks for notifications

Given that you can only access flags with the non-minified version of Mixpanel's library, you will need to include the non-minified version of our library on your single page application, and change the CDN URL in your Mixpanel snippet:

"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";

to

"//cdn.mxpnl.com/libs/mixpanel-2-latest.js";

which simply involves removing the string '.min' from the URL.

Once that's done, you will call the first identify() to flush the People update to Mixpanel, then the method that switches the flag mentioned previously:

mixpanel._flags.identify_called = false;

and create the delay using the timeout mentioned previously before calling the second identify() method to allow time for the property to be added to the user and for the profile to be targeted. Any in-apps your user is targeted with should subsequently appear.

Is this article helpful?
2 out of 6 found this helpful

Comments

0 comments

Article is closed for comments.