Skip to content

In App Message

The MovableInk SDK supports showing HTML based MI Content as In App Messages.

Implementation

MIClient.showInAppBrowser(
    activity,
    "https://mi.example.com/p/rp/abcd12345.html",
    listener = object : MovableInAppClient.OnUrlLoadingListener {
        override fun onButtonClicked(buttonID: String) {
            // User interacted with a link that has a buttonID
        }
    },
)

Note the link ends with .html. When exporting your image links from Studio, make sure to change the suffix (png -> html) when using it as an In App Message in the SDK.

Customization

In Studio, when setting up buttons for your In App Messages, there are a few options that you can use on your clickthrough links to customize the In App Message experience.

Deeplinking

If you want a link from within an In-App Message to deeplink into some content on your app, you should have an in-app scheme setup and use that scheme for the link. your-scheme://your_path

For example, for our app, we set up a URL Scheme of inkentertainment. This is set up within your manifest file. Checkout the Android Documentation for more details

In our app, we've setup links that match /media/:id to open our Media Details page. To have the button open this page in our app, we'll use the URL inkentertainment://media/1. This will instruct the system to notify our app to handle this URL.

If you need a link within your In-App Message to override the current frame where the In-App Message is showing, you can use the InFrame query parameter on your click-through url.

https://example.com?inFrame

Tapping on a link with the inFrame parameter will instruct the SDK to open that link in place.

If you need link to close the In-App Message UI and show an In-App Browser, you can use the InAppBrowser query param.

https://example.com?inAppBrowser

Tapping on a link with the inAppBrowser parameter will instruct the SDK to open that link within an In-App Browser.

If you wish to use your own In-App Browser UI instead of the one the SDK provides, you can TODO.

Do not use both inFrame and inAppBrowser on your links.

By default, any links that are not app scheme links or contain the InFrame or InAppBrowser parameters that the user interacts with in an In App Message will close the In App Message UI and open the link in the users Default Browser.

Will open in default users browser externally
https://example.com
http://google.com

Will not open externally
myapp://terms_of_service
https://example.com?InFrame
https://google.com?InAppBrowser
https://google.com?InAppBrowser&buttonID=0

buttonID

You can use the buttonID parameter to be notified via the handler when a user interacts with a link that contains a buttonID value. This is useful if you need to log an event to any Analytics tools you may use.

inkentertainment://media/7?buttonID=0

analytics_identifier

You can use the analytics_identifier parameter to be notified via the handler when a user interacts with a link that contains a analytics_identifier value. This is useful if you need to log an event to any Analytics tools you may use.

inkentertainment://media/7?analytics_identifier=name

You can also append some options to the MovableInk Link that you use for your In-App Message.

Dismiss

In Designer, you should setup a button with the clickthrough of dismiss://. When the user clicks this button, the In App Message will be dismissed. If you need to know when the user dismisses the In App Message via this button, you should set an analytics_identifier, such as dismiss://?analytics_identifier=dismissed.

Braze

If you are already using Braze for In-App Messages, you can still use MovableInk driven messages and still log your impressions and button clicks to Braze for analytics.

In Braze, when creating an In-App Message Campaign, select Custom Code as the message type and insert an empty script.

<script>
</script>

BrazeInAppMessageSetup

Switch to the Settings Tab, right side of Compose, and add a new Key Value Pair.

Set the Key to mi_link Set the Value to your MI HTML Link, such as https://mi.example.com/p/rp/abcd12345.html

BrazeInAppMessageSettings

Set up the rest of your campaign as you normally would. To show this In App Message, we'll need to be notified of an incoming message and discard it, passing along the link to the SDK to take over. In your code-base you will need to implement an in-app message manager listener - a class that implements IInAppMessageManagerListener

More information on implementing a custom listener can be found here

//sample in-app message manager listener
private const val KEY_MI_LINK = "mi_link"
class BrazeListener(activity: Activity) : IInAppMessageManagerListener {
    private val activity = activity

    override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
        if (inAppMessage.extras.containsKey(KEY_MI_LINK)) {
         /*  let the MovableInk SDK handle this.
            Log the impression to Braze, ask MIClient to show the message, and return .discard to
            notify the Braze SDK that we don't want it to show anything.*/
            val movableLink = inAppMessage.extras[KEY_MI_LINK] as String
            MIClient.showInAppBrowser(
                activity,
                movableLink,
                listener = object : MovableInAppClient.OnUrlLoadingListener {
                    override fun onButtonClicked(value: String) {
                        // log button clicks to braze
                        inAppMessage.logButtonClick(value)
                    }
                },
            )
        }
        return InAppMessageOperation.DISCARD
    }
}

Logging impressions and button clicks back to Braze may take a minute or two to show up on their side.

Salesforce Marketing Cloud

Salesforce Marketing Cloud does not support HTML based In App Messages, so you'll need to use the MovableInk SDK to show the message. You can still use SFMC's Journey Builder to decide when to show the message.

In SFMC Content Builder, create a new Mobile App/In-App Message. In the Content section, set the Title to mi_link:YOUR_LINK, for example, mi_link:https://www.example.com/p/rp/12345.html.

SFMC_Example

In Journey Builder, create a new Journey to show the In App Message.

Once your in app message is created, you can ask the MovableInk SDK to show it instead of the SFMC SDK. The SFMC SDK has an EventListener that you need to setup in order to receive the shouldShowMessage(message:) callback.

SFMCSdk.requestSdk { sdk ->
    sdk.mp {
    it.inAppMessageManager.setInAppMessageListener(object : InAppMessageManager.EventListener {
        override fun shouldShowMessage(message: InAppMessage): Boolean {
            if (message["title"] is Map<*, *>) {
                val title = message["title"] as Map<*, *>
                val text = title["text"] as String

                if (text.startsWith("mi_link:")) {
                val miLink = text.drop("mi_link:".length)

                MIClient.showInAppBrowser(
                    activity,
                    miLink,
                    listener = object : MovableInAppClient.OnUrlLoadingListener {
                        override fun onButtonClicked(buttonID: String) {
                            // User interacted with a link that has a buttonID
                        }
                    },
                )

                return false
                }
            }

            return true
            }

            override fun didShowMessage(message: InAppMessage) = Unit
            override fun didCloseMessage(message: InAppMessage) = Unit
        })
    }
}

SFMC without MovableInk SDK

If you want to show an In App Message in SFMC without using the MovableInk SDK, we have sample apps that you can use as a reference.

The sample app is available on Github.

Unfortunately, SFMC doesn't currently expose an API to notify them that we've shown the message ourselves, so it'll try again on the next app boot. To solve this, we store the message id locally and check against that to determine if we've seen a message or not.

If you have multiple journeys running at the same time, it's important to use priorities to ensure the user gets the right message.

From SFMC's docs:

What’s In-App Message Priority and How Do I Know Which Message Shows First?

Priority determines which in-app message displays when more than one message is available. A priority 1 message displays first. The next time the user opens the app, the next highest priority is displayed. If no message priority is set or multiple messages have the same priority, the next message displayed is the message with the most recent last modified date for the activity.

Because of this limitation, users may become stuck on a high priority message and never see a lower priority message. You should utilize filters in your Journey to ensure you are targeting the correct users.

Don't see your Marketing Cloud Provider?

If we don't support your Marketing Cloud Provider, reach out to your Movable Ink client experience team at MovableInk to let us know so that we can see how we can support it.

Our team will do some research to see if we can support your provider. We typically try and see if there's any way to to use the provider's SDK to forward the message to the MovableInk SDK in some fashion.