# In-App Message

The in-app message is an on-site channel that displays content to users when they access an app or website. It can be used for various purposes, such as directing customers to a specific page or encouraging them to take a particular action.

{% hint style="info" %}
The in-app message feature is available from mobile SDK version 1.7.0 or above.
{% endhint %}

## Creating In-App Messages

When creating in-app messages, you can easily get started using a variety of pre-built templates we made for you. 

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FMLxR4vGXnZ1Zi4qLFSeU%2FGroup%2040.png?alt=media&#x26;token=337ae0bf-74e6-4a80-9b79-fbc5c719d69c" alt=""><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>

After choosing your template, you can easily define in-app message groups and actions.

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FMsVLZ8k5nWrZf10kIyDN%2FIn%20app_create%402x.png?alt=media&#x26;token=62b1e834-0fa0-48b8-91e3-0eed46d05d11" alt=""><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>

### Display Methods and Grouping

You can manage your in-app messages by grouping them based on the timing of their display. Here are examples:

* When customers access the home screen (e.g., home)
* When customers access the My Page section (e.g., my page)
* When customers make a purchase (e.g., complete\_purchase)
* When customers create content (e.g., complete\_write)

Once the in-app message groups are made, developers can call the 'displayInApp' function at the intended timing within the service to display the appropriate in-app message for the current device. For more details (**mobile**, **web**), refer to the platform-specific SDK references.

{% hint style="info" %}
If the app is WebView-based, the 'displayInApp' function should be executed on the web, and **the bridge code must be integrated into the current WebView** beforehand.
{% endhint %}

```javascript
// Execute the following function when accessing the home screen:
FlareLane.displayInApp("home");
```

### How to Customize Action Buttons

For the buttons in the in-app messages, you can set the following actions:

<table><thead><tr><th width="142">Name</th><th>Details</th></tr></thead><tbody><tr><td>URL</td><td>Specify the destination URL, such as an HTTPS link or deep-link, that will be accessed when clicked.</td></tr><tr><td>Customized Action</td><td>Implement the action to be performed on click using an SDK function. (Requires implementation of <code>setInAppMessageActionHandler</code>)</td></tr><tr><td>Close</td><td>You can also set an option to "Do not show again for N days."</td></tr><tr><td>Opt-in Request</td><td>Display a prompt for push notification permission or redirect to the settings page.</td></tr></tbody></table>

### Send Test Messages

To test the in-app message on an actual device, click the **Send to Test Device** button on the in-app message details page.

The sent message will then be displayed on the device once with the highest priority. At this step, the "Do not show again..." prompt will be overridden.

### Display Order

In-app messages within the same group will be displayed according to their priority in the following order:

1. If there's an in-app message with the highest priority for that device (e.g., a test message or an in-app message from a customer journey automation), it will be displayed first.
2. Messages will then be shown in order of priority (High > Medium > Low).
3. The messages with identical priority will be shown in order of creation date, with older messages displayed first.

***

## Creating Custom In-App Messages

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FE3bMqlC5ZvcHQVC9vzLN%2FGroup%2035.png?alt=media&#x26;token=07665687-d845-45c5-8c68-faefa0d411fe" alt=""><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>

If you need a unique in-app message design and functionality, you can create an HTML-based in-app message yourself.

You have the flexibility to design the UI by writing HTML code, and after implementing click listeners for the provided buttons, you can integrate the script as follows:

| Function                             | Explanation and Example                           |
| ------------------------------------ | ------------------------------------------------- |
| FlareLaneIAM.trackEvent(name, data)  | Trigger an event.                                 |
| FlareLaneIAM.setTags(tags)           | Integrate tags.                                   |
| FlareLaneIAM.openUrl(url)            | Open a specific URL.                              |
| FlareLaneIAM.requestPushPermission() | Request permission for push notification opt-ins. |
| FlareLaneIAM.executeAction(actionId) | Perform a custom action.                          |

***

## Performance

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FF5smN4940R5AzOVw8mmO%2FGroup%2036.png?alt=media&#x26;token=9ad832ad-84c5-4eb0-8ebb-0b08cdc7594a" alt=""><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>

### Metrics (Event-Based)

You can measure the count of events regardless of user ID.

<table><thead><tr><th width="171">Metrics</th><th>Details</th></tr></thead><tbody><tr><td>Impressions</td><td>Total impressions during the period</td></tr><tr><td>Clicks</td><td>Total clicks during the period</td></tr><tr><td>Click Rate</td><td>Clicks / Impressions</td></tr><tr><td>Conversions</td><td>Total click to conversion count during the period</td></tr><tr><td>Conversion Rate</td><td>Conversions / Clicks</td></tr><tr><td>Total Revenue</td><td>Total conversion > purchase amount during the period</td></tr></tbody></table>

### Metrics (User-Based)

You can calculate a unique user count based on members who have a valid user ID.

<table><thead><tr><th width="171">Metrics</th><th>Details</th></tr></thead><tbody><tr><td>Users Reached</td><td>Unique users with impressions during the period</td></tr><tr><td>Clicks</td><td>Total clicks during the period</td></tr><tr><td>Click Rate</td><td>Clicks / Impressions</td></tr><tr><td>Conversions</td><td>Total click to conversion count during the period</td></tr><tr><td>Conversion Rate</td><td>Conversions / Clicks</td></tr><tr><td>Total Revenue</td><td>Total conversion > purchase amount during the period</td></tr></tbody></table>

## Display Types

{% hint style="info" %}
The image dimensions listed are the minimum size. For better quality, please use images that are at least twice as large.
{% endhint %}

### Bottom Sheet

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FJrIfNXEUJ4qVN68JN3Vl%2FGroup%2052.png?alt=media&#x26;token=2464ff78-e7fa-4690-9958-bf43a4ba7104" alt=""><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>

### Modal

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FjH4EeaDGmwpMYP99O58Y%2FGroup%2054.png?alt=media&#x26;token=b87d6ad3-4c6c-4db8-9ce7-5b71e1af1430" alt=""><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>

### Full Screen

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FuILsgpvUEp5Db5L95AzE%2FGroup%2053.png?alt=media&#x26;token=4d05ec68-9582-4563-a177-5f730b488c9f" alt=""><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>