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.

Web in-app messages will send once per user, but users with multiple devices may receive the notification multiple times. 

Mixpanel can also send mobile in-app messages

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_2019-09-10_at_11.32.00_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 to your push notification by selecting ADD AN A/B TEST button.

Save a draft of your message at any time in this process by clicking the Save button at the top of the page.

Screen_Shot_2019-09-10_at_11.18.24_AM.png

You can view all of your saved drafts by clicking on the Drafts tab of the main Messages page.

Screen_Shot_2019-03-20_at_12.59.26_PM.png

Note

Add images.mxpnl.com to your img-src tag Content Security Policy header so that popup windows will not be suppressed.

Customizing Display of an In-App Message

In JavaScript, Mixpanel web in-app messages will render when your webpage is loaded at the point which you call identify within the JavaScript library. You can choose to have your in-app message display when an event is triggered. Learn more here.

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.

For web in-apps, the dimensions of the viewport are 328 x 245, but the Mixpanel server does save the image in the original resolution. Therefore, you could use 656 x 490 to support 2x (retina) resolutions.

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.

Picture1.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:

picture_2.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.

Targeting Users

After submitting the form for your message design and content, you will then need to define the targeting criteria for the users who will receive the message.

A message's targeting criteria can contain one or more filters. Each filter can contain one or more conditions.

First, select an event, people property, or cohort from the first drop-down list.

Screen_Shot_2019-09-10_at_11.11.03_AM.png

You can add as many of these targeting filters as you like, which creates groups to target. Add more filters by clicking the + button.

You can then select whether you want to target customers that match all or only some of the filters you chose.

MessagesGroupUngroup.gif

Note

Mixpanel evaluates cohorts every 5-30 minutes based on the size of the cohort, and updates in-app message deliveries as needed.

For example: At 7:15pm, when Mixpanel evaluates the targeting criteria, a user meets the criteria and the message is set to be delivered to them. At 7:16pm, the user does something that makes them ineligible for the cohort. Mixpanel won't update the cohort until the next time it evaluates the cohort. At that time, the user will no longer receive the in-app message. There is, however, a risk that the user may see the in-app message between time 7:16-7:30pm.

Filtering by Events

If you select an event, you will be able to choose when or how frequently that event was performed or not performed by the users you are targeting.

MessagesTargetEvent.gif

You can filter deeper by event or people property by clicking the + Filter button.

You can also choose to add conditions to this targeting event by clicking the + Condition button in the top right of the group. This will serve as a second event target.

MessagesTargetEventCondition.png

You can then select whether you want your targeting users to do both the targeting event and the condition, either or, or to perform the targeting event and then the condition.

MessagesTargetConditionOrAndAll.png

Filtering by Property

If you select a people property, you will be able to choose the specifics of that property depending on the property type (date, string, list, etc.). For example, “First App Open” is a date property, so you will be able to choose when “First App Open” occurred.

MessagesTargetProperty.gif

You can select people property filters by clicking the + Filter button.

You can also choose to add one or more conditions to the property filter by clicking the + Condition button at the top right of the group. This will serve as a second property filter.

MessagesTargetPropertyCondition.png

You can then select whether you want your targeted users to have both the targeting property and the condition, or one or the other.

Filtering by Cohort

If you select a cohort, you will be able to select whether you want to target users in or not in the cohort.

MessagesTargetCohort.gif

You can select people property filters for that cohort by clicking the + Filter button.

Event-Triggered In-App Messages

Install the latest SDKs

You will need to install the following version of Javascript or higher to access this functionality:

If you would prefer to keep the old functionality, refer to the Scheduling section below.

After submitting the form for your message design and content, as well as your targeting criteria, you can choose the event trigger option on the delivery settings page to send an in-app message when a user triggers a specific event.

For example, you can send a message saying “Congratulations” when a user triggers an event such as a “level-up” in a game.

This feature is only compatible with events captured by Mixpanel’s client-side SDKs (JavaScript). The event-triggering event must be from the same SDK as the message for the message to be sent. For example, if you're sending a web in-app message, the triggering event can't come from an Android event. An in-app message won't show on any web device since the event is exclusive to the Android SDK.

Check the box beside Display messages when users perform… and then select the trigger event.

Screen_Shot_2019-09-10_at_11.34.49_AM.png

You can filter the message by an event property. This will cause the in-app message to send when the trigger event is performed and the trigger event has a particular property tied to it.

MessagesInAppEventTrigger2.png

Note that:

  • In-app messages cannot be triggered by custom events.
  • The in-app message only sends the first time the event is triggered (no recurrence).
  • You can only use one event and one event property.

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.

Note that users will receive an in-app message more than once if they use multiple devices.

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?
5 out of 13 found this helpful

Comments

0 comments

Article is closed for comments.