Customize In-App message templates - [Sample: iOS, Android]

In this tutorial, we'll explain how to customize Leanplum In-App messages.

The built-in in-app messaging templates are open-source. You can modify them, delete them, or create your own. The dashboard will reflect your new templates the next time you run your app. 

Once the Messages are created or customized, they can be synced with the Leanplum Dashboard just like Variables, running the app in Development mode and registering the device as a Test Device in the Dashboard. 

In-App Messages customization slightly differs depending on the platform. 

iOS

Files LPMessageTemplates.h and LPMessageTemplates.m come with the SDK. Download the SDK, unzip and just put those file into your project. Then, initialize them before the [Leanplum start] call with:

[LPMessageTemplates sharedTemplates];

Study LPMessageTemplates.m to see how the messages are implemented.

To define a new template, use the method:

[Leanplum defineAction:ofKind:withArguments:withResponder:] 

Here's how it works:

  • defineAction: The name of the action or message type you are defining.
  • ofKind: One or more action kinds OR'ed together. kLeanplumActionKindMessage will appear in the Message Type list for creating message campaigns. kLeanplumActionKindAction will appear in the dropdown when choosing an action within a message.
  • withArguments: A list of LPActionArg objects, with each one being an argument that the marketer can fill out on the dashboard. For example, Title, Accept action, or Color.
  • withResponder: A block that accepts an LPActionContext and returns a BOOL whether the action was handled or not. You may decide not to handle the action based on some additional logic defined in the responder. From the context, you can access the values for any argument you defined in the template, as well as some other special methods:
    • [LPActionContext runActionNamed:]: Runs another action when this action is done. The action name should correspond to a named LPActionArg of kind Action.
    • [LPActionContext runTrackedActionNamed:]: Runs another action and tracks an event that the action occurred.
    • [LPActionContext track:withValue:andParameters:]: Tracks an event associated with the current action.
    • [LPActionContext muteFutureMessagesOfSameKind]: Don't show the current message campaign again on this device. For example, if you have a survey popup every 10th session, you may want the ability for the user to decide to remind them later, which simply dismisses the message, or the option to never see this survey again.

Sample

The project sample can be found here

In this sample we are adding a new In-App message, specifically a 3-button Confirm message.

First, open the AppDelegate.m and import the LPMessageTemplate class. Then put [LPMessageTemplates sharedTemplates] before [Leanplum start];

Open LPMessageTemplates.m and check where in the sample the "#### example" comment is placed - you will find the code parts being added to create the new In-App message and check the comments describing the code parts being added.

Once done, build and run the project. 

After the device is registered as a Test Device, the 3-button message will be added to the available messages on the Dashboard.

 

Android

  1. Download the Leanplum Android SDK zip archive, if you haven't already. Refer to the Setup page for Install the SDK manually and follow Step 1 to download.
  2. Unzip the archive and look for src/com/leanplum/customtemplates.
  3. Add all of these files to your project, preserving the directory structure com/leanplum/customtemplates.
  4. Initialize them in your Application class (and before calling Leanplum.start()):
    com.leanplum.customtemplates.MessageTemplates.register(getApplicationContext());

Study the provided files to see how the messages are implemented. To define a new template, use the methodLeanplum.defineAction(). Here's how it works:

  • name: The name of the action or message type you are defining.
  • kind: One or more action kinds OR'ed together. Leanplum.ACTION_KIND_MESSAGE will appear in the Message Type list for creating message campaigns. Leanplum.ACTION_KIND_ACTION will appear in the dropdown when choosing an action within a message.
  • args: An ActionArgs instance, defining the options that the marketer can fill out on the dashboard. For example, Title, Accept action, or Color.
  • responder: A callback that accepts an ActionContext and returns a boolean whether the action was handled or not. You may decide not to handle the action based on some additional logic defined in the responder. From the context, you can access the values for any argument you defined in the template, as well as some other special methods:
    • ActionContext.runActionNamed(): Runs another action when this action is done. The action name should correspond to a named action argument defined within ActionArgs.
    • ActionContext runTrackedActionNamed(): Runs another action and tracks an event that the action occurred.
    • ActionContext.track(): Tracks an event associated with the current action.
    • ActionContext.muteFutureMessagesOfSameKind(): Don't show the current message campaign again on this device. For example, if you have a survey popup every 10th session, you may want the ability for the user to decide to remind them later, which simply dismisses the message, or the option to never see this survey again.

Sample

The project sample can be found here.

In this sample we are also adding a new In-App message, specifically a 3-button Confirm message.

Download the Android SDK from the Leanplum SDK Setup page and extract the archive. com/leanplum/customtemplates has been copied from the Android SDK folder and added to the project and in the Application class, before Leanplum.start, com.leanplum.customtemplates.MessageTemplates.register(getApplicationContext()); is placed. 

Unlike the iOS Message Templates, in Android every template is included in its own class.

Create a new class specific to the new Message Template. In the sample we've called it 'Confirm3Buttons'. The class name is also going to be what will be displayed in the Message menu in the Message composition screen.

Open the Confirm3Buttons class and check where in the sample the "#### example" comments are placed - you will find the code parts being added to create the new In-App message and check the comments describing the code parts being added.

Last step is to register the newly added In-App message. Open MessageTemplates class and add 

Confirm3Buttons.register(currentContext);

in the 'register' function. 


Was this article helpful?
Have more questions? Submit a request