Skip to content

アプリ内メッセージのカスタマイズ

Braze SDKのアプリ内メッセージをカスタマイズする方法を学習。

前提条件

この機能を使用する前に、Android Braze SDKを統合する必要があります。 You’ll also need to set up push notifications.

Setting custom manager listeners

While the BrazeInAppMessageManager listener can automatically handle the display and lifecycle of in-app messages, you’ll need to implement a custom manager listener if you’d like to fully customize your messages.

The Braze SDK has a default DefaultHtmlInAppMessageActionListener class that is used if no custom listener is defined and takes appropriate action automatically. If you require more control over how a user interacts with different buttons inside a custom HTML in-app message, implement a custom IHtmlInAppMessageActionListener class.

Step 1: Implement the custom manager listener

Step 1.1: Implement IInAppMessageManagerListener

Create a class that implements IInAppMessageManagerListener .

The callbacks in your IInAppMessageManagerListener will also be called at various points in the in-app message lifecycle. For example, if you set a custom manager listener when an in-app message is received from Braze, the beforeInAppMessageDisplayed() method will be called. If your implementation of this method returns InAppMessageOperation.DISCARD , that signals to Braze that the in-app message will be handled by the host app and should not be displayed by Braze. If InAppMessageOperation.DISPLAY_NOW is returned, Braze will attempt to display the in-app message. This method should be used if you choose to display the in-app message in a customized manner.

IInAppMessageManagerListener also includes delegate methods for message clicks and buttons, which can be used in cases like intercepting a message when a button or message is clicked for further processing.

Step 1.2: Hook into IAM view lifecycle methods (optional)

The IInAppMessageManagerListener interface has in-app message view methods called at distinct points in the in-app message view lifecycle. These methods are called in the following order:

  1. beforeInAppMessageViewOpened : Called just before the in-app message is added to the activity’s view. The in-app message is not yet visible to the user at this time.
  2. afterInAppMessageViewOpened : Called just after the in-app message is added to the activity’s view. The in-app message is now visible to the user at this time.
  3. beforeInAppMessageViewClosed : Called just before the in-app message is removed from the activity’s view. The in-app message is still visible to the user at this time.
  4. afterInAppMessageViewClosed : Called just after the in-app message is removed from the activity’s view. The in-app message is no longer visible to the user at this time.

Note that the time between afterInAppMessageViewOpened and beforeInAppMessageViewClosed is when the in-app message view is on screen, visible to the user.

Create a class that implements IHtmlInAppMessageActionListener .

The callbacks in your IHtmlInAppMessageActionListener will be called whenever the user initiates any of the following actions inside the HTML in-app message:

  • Clicks on the close button
  • Fires a custom event
  • Clicks on a URL inside HTML in-app message

Step 2: Instruct Braze to use the custom manager listener

After you create IInAppMessageManagerListener, call BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener() to instruct BrazeInAppMessageManager to use your custom IInAppMessageManagerListener instead of the default listener. Do this in your Application.onCreate() before any other calls to Braze, so the custom listener is set before any in-app messages are displayed.

Altering in-app messages before display

When a new in-app message is received, and there is already an in-app message being displayed, the new message will be put onto the top of the stack and can be displayed at a later time.

However, if there is no in-app message being displayed, the following delegate method in IInAppMessageManagerListener will be called:

The InAppMessageOperation() return value can control when the message should be displayed. The suggested usage of this method would be to delay messages in certain parts of the app by returning DISPLAY_LATER when in-app messages would be distracting to the user’s app experience.

InAppMessageOperation return value Behavior
DISPLAY_NOW The message will be displayed
DISPLAY_LATER The message will be returned to the stack and displayed at the next available opportunity
DISCARD The message will be discarded
null The message will be ignored. This method should NOT return null

See InAppMessageOperation.java for more details.

On Android, this is done by calling logClick and logImpression on in-app messages and logButtonClick on immersive in-app messages.

After your IHtmlInAppMessageActionListener is created, call BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener() to instruct BrazeInAppMessageManager to use your custom IHtmlInAppMessageActionListener instead of the default action listener.

We recommend setting your IHtmlInAppMessageActionListener in your Application.onCreate() before any other calls to Braze. This will set the custom action listener before any in-app message is displayed:

Setting custom factories

You can override a number of defaults through custom factory objects. These can be registered with the Braze SDK as needed to achieve the desired results. However, if you decide to override a factory, you’ll likely need to explicitly defer to the default or reimplement the functionality provided by the Braze default. The following code snippet illustrates how to supply custom implementations of the IInAppMessageViewFactory and the IInAppMessageViewWrapperFactory interfaces.

In-app message types

In-app message types

Braze in-app message types are versatile enough to cover most custom use cases. However, if you want to fully define the visual appearance of your in-app messages instead of using a default type, Braze makes this possible by setting a custom view factory.

The BrazeInAppMessageManager automatically handles placing the in-app message model into the existing activity view hierarchy by default using DefaultInAppMessageViewWrapper . If you need to customize how in-app messages are placed into the view hierarchy, you should use a custom IInAppMessageViewWrapperFactory .

In-app messages have preset animation behavior. Slideup messages slide into the screen; full and modal messages fade in and out. If you want to define custom animation behaviors for your in-app messages, Braze makes this possible by setting up a custom animation factory.

Step 1: Implement the factory

Create a class that implements IInAppMessageViewFactory :

Create a class that implements IInAppMessageViewWrapperFactory and returns an IInAppMessageViewWrapper .

This factory is called immediately after the in-app message view is created. The easiest way to implement a custom IInAppMessageViewWrapper is just to extend the default DefaultInAppMessageViewWrapper :

Create a class that implements IInAppMessageAnimationFactory :

Step 2: Instruct Braze to use the factory

After your IInAppMessageViewFactory is created, call BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory() to instruct BrazeInAppMessageManager to use your custom IInAppMessageViewFactory instead of the default view factory.

How it works

The slideup in-app message view implements IInAppMessageView . The full and modal type message views implement IInAppMessageImmersiveView . Implementing one of these classes allows Braze to add click listeners to your custom view where appropriate. All Braze view classes extend Android’s View class.

Implementing IInAppMessageView allows you to define a certain portion of your custom view as clickable. Implementing IInAppMessageImmersiveView allows you to define message button views and a close button view.

After your IInAppMessageViewWrapper is created, call BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory() to instruct BrazeInAppMessageManager to use your custom IInAppMessageViewWrapperFactory instead of the default view wrapper factory.

We recommend setting your IInAppMessageViewWrapperFactory in your Application.onCreate() before any other calls to Braze. This will set the custom view wrapper factory before any in-app message is displayed:

Once your IInAppMessageAnimationFactory is created, call BrazeInAppMessageManager.getInstance().setCustomInAppMessageAnimationFactory() to instruct BrazeInAppMessageManager to use your custom IInAppMessageAnimationFactory instead of the default animation factory.

We recommend setting your IInAppMessageAnimationFactory in your Application.onCreate() before any other calls to Braze. This will set the custom animation factory before any in-app message is displayed.

Custom styles

Braze UI elements come with a default look and feel that matches the Android standard UI guidelines and provides a seamless experience. This reference article covers custom in-app messaging styling for your Android or FireOS application.

Setting a default style

You can see default styles in the Braze SDK’s styles.xml file:

If you would prefer, you can override these styles to create a look and feel that better suits your app.

To override a style, copy it in its entirety to the styles.xml file in your project and make modifications. The whole style must be copied over to your local styles.xml file for all attributes to be correctly set. Note that these custom styles are for changes to individual UI elements, not wholesale changes to layouts. Layout-level changes need to be handled with custom views.

Customizing the font

Braze allows setting a custom font using the font family guide. To use it, override the style for message text, headers, and button text and use the fontFamily attribute to instruct Braze to use your custom font family.

For example, to update the font on your in-app message button text, override the Braze.InAppMessage.Button style and reference your custom font family. The attribute value should point to a font family in your res/font directory.

Here is a truncated example with a custom font family, my_custom_font_family, referenced on the last line:

Aside from the Braze.InAppMessage.Button style for button text, the style for message text is Braze.InAppMessage.Message and the style for message headers is Braze.InAppMessage.Header. If you want to use your custom font family across all possible in-app message text, you can set your font family on the Braze.InAppMessage style, which is the parent style for all in-app messages.

Message dismissals

Disabling back button dismissals

By default, the hardware back button dismisses Braze in-app messages. This behavior can be disabled on a per-message basis via BrazeInAppMessageManager.setBackButtonDismissesInAppMessageView() .

In the following example, disable_back_button is a custom key-value pair set on the in-app message that signifies whether the message should allow for the back button to dismiss the message:

Enabling outside tap dismissals

By default, dismissing the modal using an outside tap is set to false. Setting this value to true will result in the modal in-app message being dismissed when the user taps outside of the in-app message. This behavior can be toggled on by calling:

Customizing the orientation

To set a fixed orientation for an in-app message, first set a custom in-app message manager listener. Then, call setOrientation() on the IInAppMessage object in the beforeInAppMessageDisplayed() delegate method:

For tablet devices, in-app messages will appear in the user’s preferred orientation style regardless of actual screen orientation.

Disabling dark theme

By default, IInAppMessageManagerListener’s beforeInAppMessageDisplayed() checks the system settings and conditionally enables dark theme styling on the message with the following code:

To change this, you can call enableDarkTheme at any step in the pre-display process to implement your own conditional logic.

Customizing the Google Play review prompt

Due to the limitations and restrictions set by Google, custom Google Play review prompts are not currently supported by Braze. While some users have been able to integrate these prompts successfully, others have shown low success rates due to Google Play quotas . Integrate at your own risk. Refer to documentation on Google Play in-app review prompts .

前提条件

この機能を使用する前に、Swift Braze SDKを統合する必要があります。

UI デリゲートの設定(必須)

アプリ内メッセージの表示をカスタマイズし、さまざまなライフサイクルイベントに対応するには、BrazeInAppMessageUIDelegate を設定する必要があります。これは、トリガーされたアプリ内メッセージペイロードの受信と処理、表示ライフサイクルイベントの受信、および表示タイミングの制御に使用されるデリゲートプロトコルです。BrazeInAppMessageUIDelegate を使用するには、次の操作を行う必要があります。

  • デフォルトのBrazeInAppMessageUI 実装をinAppMessagePresenterとして使用します。
  • プロジェクトにBrazeUI ライブラリを含めます。

ステップ1:BrazeInAppMessageUIDelegate プロトコルを実装する

まず、BrazeInAppMessageUIDelegate プロトコルと、対応する必要なメソッドを実装します。以下の例では、このプロトコルをアプリケーションの AppDelegate クラスに実装しています。

ステップ2:delegate オブジェクトを割り当てます

delegate オブジェクトをBrazeInAppMessageUI インスタンスに割り当ててから、このアプリ内メッセージUI をinAppMessagePresenter として割り当てます。

オン・クリック動作

Braze.InAppMessage オブジェクトには対応する ClickAction が含まれ、これによってクリック時の動作が定義されます。

クリックアクションのタイプ

Braze.InAppMessageclickAction プロパティは .none にデフォルト設定されていますが、次のうちいずれかの値に設定できます。

ClickAction クリック時動作
.url(URL, useWebView: Bool) 指定されたURLを外部ブラウザで開く。useWebViewtrue に設定されていれば、ウェブビューで開く。
.newsFeed メッセージがクリックされるとニュースフィードが表示され、メッセージは解除される。

注:ニュースフィードは非推奨になります。詳しくはマイグレーション・ガイドをチェックしてほしい。
.none クリックするとメッセージが却下されます。

クリック時の動作をカスタマイズする

この動作をカスタマイズするために、以下のサンプルを参照して clickAction プロパティを変更できます。

inAppMessage(_:prepareWith:) メソッドは、Objective-C では利用できません。

カスタム動作の処理

アプリ内メッセージがクリックされると、次の BrazeInAppMessageUIDelegate デリゲートメソッドが呼び出されます。アプリ内メッセージボタンと HTML アプリ内メッセージボタン(リンク)のクリックについては、ボタン ID がオプションのパラメータとして提供されます。

このメソッドは、Braze がクリックアクションを実行し続けるかどうかを示すブール値を返します。

モーダル解雇のカスタマイズ

外側のタップで閉じる操作を有効にするため、カスタマイズするアプリ内メッセージの種類の Attributes 構造体で dismissOnBackgroundTap プロパティを変更できます。

たとえば、モーダル画像のアプリ内メッセージに対してこの機能を有効にする場合は、以下を設定します。

Attributes によるカスタマイズは Objective-C では使用できません。

デフォルト値は false です。これにより、ユーザーがアプリ内メッセージの外側をタップしたときにモーダルアプリ内メッセージが閉じられるかどうかが決まります。

DismissModalOnOutsideTap 説明
true モーダルアプリ内メッセージは、外部タップで閉じられます。
false デフォルトでは、モーダルアプリ内メッセージは外部タップをしても閉じられません。

アプリ内メッセージのカスタマイズの詳細については、こちらの記事 を参照してください。

メッセージの方向をカスタマイズする

アプリ内メッセージの向きをカスタマイズできます。すべてのメッセージに新しいデフォルトの方向を設定したり、1 つのメッセージにカスタムの方向を設定したりできます。

すべてのアプリ内メッセージのデフォルトの方向を選択するには、inAppMessage(_:prepareWith:) メソッドを使用して、preferredOrientation プロパティをPresentationContext に設定します。

たとえば、縦向きをデフォルトの方向に設定するには、次のようにします。

単一メッセージの方向を設定するには、Braze.InAppMessageorientation プロパティを変更します。

アプリ内メッセージが表示された後、メッセージが表示されている間にデバイスの向きが変更されると、メッセージがデバイスと共に回転します(メッセージのorientation 設定でサポートされている場合)。

また、メッセージを表示するには、アプリ内メッセージのorientation プロパティでデバイスの方向をサポートする必要があります。また、preferredOrientation 設定が適用されるのは、Xcodeのターゲットの設定の [導入情報] セクションで、アプリケーションでサポートされているインターフェイスの向きにその向きが含まれている場合に限られます。

Xcodeでサポートされているオリエンテーション

表示タイミングのカスタマイズ

利用可能なアプリ内メッセージをユーザーエクスペリエンスの特定のポイントで表示するかどうかをコントロールできます。全画面でのゲーム中や読み込み画面など、アプリ内メッセージを表示させたくない状況がある場合は、保留中のアプリ内メッセージを遅延させるか、破棄することができます。アプリ内メッセージのタイミングをコントロールするには、inAppMessage(_:displayChoiceForMessage:) デリゲートメソッド を使用して BrazeInAppMessageUI.DisplayChoice プロパティを設定します。

次のうちいずれかの値を返すよう BrazeInAppMessageUI.DisplayChoice を設定します。

ディスプレイの選択 動作
.now メッセージはすぐに表示される。これはデフォルト値です。
.reenqueue メッセージは表示されず、スタックの一番上に戻される。
.later メッセージは表示されず、スタックの一番上に戻される。(非推奨、.reenqueue を使用してください)
.discard メッセージは破棄され、表示されない。

ステータスバーの非表示

FullFullImage、および HTML アプリ内メッセージについて、SDK ではステータスバーがデフォルトで非表示になります。他の種類のアプリ内メッセージでは、ステータスバーは変更されません。この動作を設定するには、inAppMessage(_:prepareWith:) デリゲートメソッド を使用して PresentationContextstatusBarHideBehavior プロパティを設定します。このフィールドの値は次のうちいずれかになります。

ステータスバー非表示の動作 説明
.auto メッセージ・ビューはステータス・バーの非表示状態を決定する。
.hidden ステータスバーは常に隠す。
.visible 常にステータスバーを表示する。

ダークモードを無効にする

ユーザーデバイスでダークモードが有効になっているときにアプリ内メッセージでダークモードスタイルが採用されないようにするには、inAppMessage(_:prepareWith:) デリゲートメソッド を実装します。メソッドに渡される PresentationContext には、表示される InAppMessage オブジェクトの参照が含まれます。各 InAppMessage に、darklight のモードテーマを含む themes プロパティがあります。themes.dark プロパティを nil に設定すると、Braze では自動的にライトテーマを使用してアプリ内メッセージが表示されます。

ボタンがあるアプリ内メッセージの種類では、buttons プロパティに追加の themes オブジェクトがあります。ボタンでダークモードのスタイルが採用されないようにするには、map(_:) を使用して dark テーマがない light テーマのボタンの新しい配列を作成できます。

App Store レビュープロンプトのカスタマイズ

キャンペーンでアプリ内メッセージを使用して、App Store レビューをユーザーに依頼できます。

ステップ1:アプリ内メッセージデリゲートの設定

まず、アプリで BrazeInAppMessageUIDelegate を設定します。

ステップ 2:デフォルトの App Store レビューメッセージを無効にする

次に、inAppMessage(_:displayChoiceForMessage:) デリゲートメソッド を実装して、デフォルトの App Store レビューメッセージを無効にします。

ステップ 3: ディープリンクの作成

ディープリンク処理コードで、次のコードを追加して {YOUR-APP-SCHEME}:app-store-review ディープリンクを処理します。SKStoreReviewController を使用するには StoreKit をインポートする必要があることに注意してください。

ステップ4: クリック時のカスタム動作の設定

次に、以下を使用してアプリ内メッセージングキャンペーンを作成します。

  • キーと値のペア "AppStore Review" : "true"
  • ディープリンク {YOUR-APP-SCHEME}:app-store-review を使用して、クリック時動作を [アプリにディープリンクする] に設定します。

Prerequisites

Before you can use this feature, you’ll need to integrate the Web Braze SDK.

Custom styles

Braze UI elements come with a default look and feel that create a neutral in-app message experience and aim for consistency with other Braze mobile platforms. The default Braze styles are defined in CSS within the Braze SDK.

Setting a default style

By overriding selected styles in your application, you can customize our standard in-app message types with your own background images, font families, styles, sizes, animations, and more.

For instance, the following is an example override that will cause an in-app message’s headers to appear italicized:

See the JSDocs for more information.

Customizing the z-index

By default, in-app messages are displayed using z-index: 9001. This is configurable using the inAppMessageZIndex initialization option in the scenario that your website styles elements with higher values than that.

Customizing message dismissals

By default, when an in-app message is showing, pressing the escape button or a click on the grayed-out background of the page will dismiss the message. Configure the requireExplicitInAppMessageDismissal initialization option to true to prevent this behavior and require an explicit button click to dismiss messages.

To set your in-app message links to open in a new tab, set the openInAppMessagesInNewTab option to true to force all links from in-app message clicks open in a new tab or window.

Prerequisites

Before you can use this feature, you’ll need to integrate the React Native Braze SDK.

Methods for logging

You can use these methods by passing your BrazeInAppMessage instance to log analytics and perform actions:

Method Description
logInAppMessageClicked(inAppMessage) Logs a click for the provided in-app message data.
logInAppMessageImpression(inAppMessage) Logs an impression for the provided in-app message data.
logInAppMessageButtonClicked(inAppMessage, buttonId) Logs a button click for the provided in-app message data and button ID.
hideCurrentInAppMessage() Dismisses the currently displayed in-app message.
performInAppMessageAction(inAppMessage) Performs the action for an in-app message.
performInAppMessageButtonAction(inAppMessage, buttonId) Performs the action for an in-app message button.

Handling message data

In most cases, you can use the Braze.addListener method to register event listeners to handle data coming from in-app messages.

Additionally, you can access the in-app message data in the JavaScript layer by calling the Braze.subscribeToInAppMessage method to have the SDKs publish an inAppMessageReceived event when an in-app message is triggered. Pass a callback to this method to execute your own code when the in-app message is triggered and received by the listener.

To customize how message data is handled, refer to the following implementation examples:

To enhance the default behavior, or if you don’t have access to customize the native iOS or Android code, we recommend that you disable the default UI while still receiving in-app message events from Braze. To disable the default UI, pass false to the Braze.subscribeToInAppMessage method and use the in-app message data to construct your own message in JavaScript. Note that you will need to manually log analytics on your messages if you choose to disable the default UI.

To include more advanced logic to determine whether or not to show an in-app message using the built-in UI, implement in-app messages through the native layer.

Implement the IInAppMessageManagerListener as described in our Android article on Custom Manager Listener. In your beforeInAppMessageDisplayed implementation, you can access the inAppMessage data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.

For more on these values, see our Android documentation.

Overriding the default UI delegate

By default, BrazeInAppMessageUI is created and assigned when you initialize the braze instance. BrazeInAppMessageUI is an implementation of the BrazeInAppMessagePresenter protocol and comes with a delegate property that can be used to customize the handling of in-app messages that have been received.

  1. Implement the BrazeInAppMessageUIDelegate delegate as described in our iOS article here .

  2. In the inAppMessage(_:displayChoiceForMessage:) delegate method, you can access the inAppMessage data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.

For more details on these values, see our iOS documentation .

To use this delegate, assign it to brazeInAppMessagePresenter.delegate after initializing the braze instance.

Overriding the default native UI

If you wish to fully customize the presentation of your in-app messages at the native iOS layer, conform to the BrazeInAppMessagePresenter protocol and assign your custom presenter following the sample below:

表示動作のカスタマイズ

実行時のアプリ内メッセージの表示動作は、次の方法で変更できます。

カスタムリスナーの設定

ユーザーがアプリ内メッセージを操作する方法をより細かくコントロールする必要がある場合は、BrazeInAppMessageListener を使用してそれを Appboy.AppboyBinding.inAppMessageListener に割り当てます。使用しないデリゲートについては、単に null のままにしておくことができます。

「このページはどの程度役に立ちましたか?」
New Stuff!