인앱 메시지 사용자 지정
Braze SDK의 인앱 메시지를 사용자 지정하는 방법을 알아보세요.
Prerequisites
이 기능을 사용하려면 먼저 Android Braze SDK를 통합해야 합니다. You’ll also need to set up in-app messages.
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:
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.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.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.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.
Implementation of these methods is not required. They’re only provided to track and inform the in-app message view lifecycle. You can leave these method implementations empty.
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public class CustomHtmlInAppMessageActionListener implements IHtmlInAppMessageActionListener {
private final Context mContext;
public CustomHtmlInAppMessageActionListener(Context context) {
mContext = context;
}
@Override
public void onCloseClicked(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
Toast.makeText(mContext, "HTML In App Message closed", Toast.LENGTH_LONG).show();
BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
}
@Override
public boolean onCustomEventFired(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
Toast.makeText(mContext, "Custom event fired. Ignoring.", Toast.LENGTH_LONG).show();
return true;
}
@Override
public boolean onOtherUrlAction(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
Toast.makeText(mContext, "Custom url pressed: " + url + " . Ignoring", Toast.LENGTH_LONG).show();
BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
return true;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class CustomHtmlInAppMessageActionListener(private val mContext: Context) : IHtmlInAppMessageActionListener {
override fun onCloseClicked(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle) {
Toast.makeText(mContext, "HTML In App Message closed", Toast.LENGTH_LONG).show()
BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
}
override fun onCustomEventFired(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
Toast.makeText(mContext, "Custom event fired. Ignoring.", Toast.LENGTH_LONG).show()
return true
}
override fun onOtherUrlAction(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
Toast.makeText(mContext, "Custom url pressed: $url . Ignoring", Toast.LENGTH_LONG).show()
BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
return true
}
}
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:
1
2
3
4
@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
return InAppMessageOperation.DISPLAY_NOW;
}
1
2
3
override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
return InAppMessageOperation.DISPLAY_NOW
}
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
for more details.
If you choose to DISCARD
the in-app message and replace it with your in-app message view, you will need to log in-app message clicks and impressions manually.
On Android, this is done by calling logClick
and logImpression
on in-app messages and logButtonClick
on immersive in-app messages.
Once an in-app message has been placed on the stack, you can request for it to be retrieved and displayed at any time by calling BrazeInAppMessageManager.getInstance().requestDisplayInAppMessage()
. This method requests Braze to display the next available in-app message from the stack.
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:
1
BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(new CustomHtmlInAppMessageActionListener(context));
1
BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(CustomHtmlInAppMessageActionListener(context))
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
1
2
3
4
5
6
7
8
class BrazeDemoApplication : Application(){
override fun onCreate() {
super.onCreate()
registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener(true, true))
BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapperFactory())
BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory(CustomInAppMessageViewFactory())
}
}
In-app message types
1
2
3
4
5
6
7
8
9
public class BrazeDemoApplication extends Application {
@Override
public void onCreate{
super.onCreate();
registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener(true, true));
BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapperFactory());
BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory(new CustomInAppMessageViewFactory());
}
}
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
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class CustomInAppMessageViewFactory implements IInAppMessageViewFactory {
@Override
public View createInAppMessageView(Activity activity, IInAppMessage inAppMessage) {
// Uses a custom view for slideups, modals, and full in-app messages.
// HTML in-app messages and any other types will use the Braze default in-app message view factories
switch (inAppMessage.getMessageType()) {
case SLIDEUP:
case MODAL:
case FULL:
// Use a custom view of your choosing
return createMyCustomInAppMessageView();
default:
// Use the default in-app message factories
final IInAppMessageViewFactory defaultInAppMessageViewFactory = BrazeInAppMessageManager.getInstance().getDefaultInAppMessageViewFactory(inAppMessage);
return defaultInAppMessageViewFactory.createInAppMessageView(activity, inAppMessage);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class CustomInAppMessageViewFactory : IInAppMessageViewFactory {
override fun createInAppMessageView(activity: Activity, inAppMessage: IInAppMessage): View {
// Uses a custom view for slideups, modals, and full in-app messages.
// HTML in-app messages and any other types will use the Braze default in-app message view factories
when (inAppMessage.messageType) {
MessageType.SLIDEUP, MessageType.MODAL, MessageType.FULL ->
// Use a custom view of your choosing
return createMyCustomInAppMessageView()
else -> {
// Use the default in-app message factories
val defaultInAppMessageViewFactory = BrazeInAppMessageManager.getInstance().getDefaultInAppMessageViewFactory(inAppMessage)
return defaultInAppMessageViewFactory!!.createInAppMessageView(activity, inAppMessage)
}
}
}
}
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
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public class CustomInAppMessageViewWrapper extends DefaultInAppMessageViewWrapper {
public CustomInAppMessageViewWrapper(View inAppMessageView,
IInAppMessage inAppMessage,
IInAppMessageViewLifecycleListener inAppMessageViewLifecycleListener,
BrazeConfigurationProvider brazeConfigurationProvider,
Animation openingAnimation,
Animation closingAnimation, View clickableInAppMessageView) {
super(inAppMessageView,
inAppMessage,
inAppMessageViewLifecycleListener,
brazeConfigurationProvider,
openingAnimation,
closingAnimation,
clickableInAppMessageView);
}
@Override
public void open(@NonNull Activity activity) {
super.open(activity);
Toast.makeText(activity.getApplicationContext(), "Opened in-app message", Toast.LENGTH_SHORT).show();
}
@Override
public void close() {
super.close();
Toast.makeText(mInAppMessageView.getContext().getApplicationContext(), "Closed in-app message", Toast.LENGTH_SHORT).show();
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class CustomInAppMessageViewWrapper(inAppMessageView: View,
inAppMessage: IInAppMessage,
inAppMessageViewLifecycleListener: IInAppMessageViewLifecycleListener,
brazeConfigurationProvider: BrazeConfigurationProvider,
openingAnimation: Animation,
closingAnimation: Animation, clickableInAppMessageView: View) :
DefaultInAppMessageViewWrapper(inAppMessageView,
inAppMessage,
inAppMessageViewLifecycleListener,
brazeConfigurationProvider,
openingAnimation,
closingAnimation,
clickableInAppMessageView) {
override fun open(activity: Activity) {
super.open(activity)
Toast.makeText(activity.applicationContext, "Opened in-app message", Toast.LENGTH_SHORT).show()
}
override fun close() {
super.close()
Toast.makeText(mInAppMessageView.context.applicationContext, "Closed in-app message", Toast.LENGTH_SHORT).show()
}
}
Create a class that implements IInAppMessageAnimationFactory
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class CustomInAppMessageAnimationFactory implements IInAppMessageAnimationFactory {
@Override
public Animation getOpeningAnimation(IInAppMessage inAppMessage) {
Animation animation = new AlphaAnimation(0, 1);
animation.setInterpolator(new AccelerateInterpolator());
animation.setDuration(2000L);
return animation;
}
@Override
public Animation getClosingAnimation(IInAppMessage inAppMessage) {
Animation animation = new AlphaAnimation(1, 0);
animation.setInterpolator(new DecelerateInterpolator());
animation.setDuration(2000L);
return animation;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class CustomInAppMessageAnimationFactory : IInAppMessageAnimationFactory {
override fun getOpeningAnimation(inAppMessage: IInAppMessage): Animation {
val animation: Animation = AlphaAnimation(0, 1)
animation.interpolator = AccelerateInterpolator()
animation.duration = 2000L
return animation
}
override fun getClosingAnimation(inAppMessage: IInAppMessage): Animation {
val animation: Animation = AlphaAnimation(1, 0)
animation.interpolator = DecelerateInterpolator()
animation.duration = 2000L
return animation
}
}
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.
We recommend setting your IInAppMessageViewFactory
in your Application.onCreate()
before any other calls to Braze. This will set the custom view factory before any in-app message is displayed.
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:
1
BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapper());
1
BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapper())
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style name="Braze"/>
<style name="Braze.InAppMessage"/>
<style name="Braze.InAppMessage.Header">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">match_parent</item>
<item name="android:padding">0.0dp</item>
<item name="android:background">@android:color/transparent</item>
<item name="android:textColor">@color/com_braze_inappmessage_header_text</item>
<item name="android:textSize">20.0sp</item>
<item name="android:lineSpacingMultiplier">1.3</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_centerHorizontal">true</item>
</style>
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.
You can customize some colors directly in your Braze campaign without modifying the XML. Keep in mind, colors set in the Braze dashboard will override colors you set anywhere else.
Customizing the font
You can set a custom font by locating the typeface in the res/font
directory. 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:
1
2
3
4
5
6
7
<style name="Braze.InAppMessage.Button">
<item name="android:layout_height">wrap_content</item>
...
<item name="android:paddingBottom">15.0dp</item>
<item name="android:fontFamily">@font/my_custom_font_family</item>
<item name="fontFamily">@font/my_custom_font_family</item>
</style>
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.
As with other custom styles, the entire style must be copied over to your local styles.xml
file for all attributes to be correctly set.
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener(new DefaultInAppMessageManagerListener() {
@Override
public void beforeInAppMessageViewOpened(View inAppMessageView, IInAppMessage inAppMessage) {
super.beforeInAppMessageViewOpened(inAppMessageView, inAppMessage);
final Map<String, String> extras = inAppMessage.getExtras();
if (extras != null && extras.containsKey("disable_back_button")) {
BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(false);
}
}
@Override
public void afterInAppMessageViewClosed(IInAppMessage inAppMessage) {
super.afterInAppMessageViewClosed(inAppMessage);
BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(true);
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener(object : DefaultInAppMessageManagerListener() {
override fun beforeInAppMessageViewOpened(inAppMessageView: View, inAppMessage: IInAppMessage) {
super.beforeInAppMessageViewOpened(inAppMessageView, inAppMessage)
val extras = inAppMessage.extras
if (extras != null && extras.containsKey("disable_back_button")) {
BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(false)
}
}
override fun afterInAppMessageViewClosed(inAppMessage: IInAppMessage) {
super.afterInAppMessageViewClosed(inAppMessage)
BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(true)
}
})
Note that if this functionality is disabled, the host activity’s hardware back button default behavior will be used instead. This may lead to the back button closing the application instead of the displayed in-app 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:
1
BrazeInAppMessageManager.getInstance().setClickOutsideModalViewDismissInAppMessageView(true)
Customizing the orientation
To set a fixed orientation for an in-app message, first set a custom in-app message manager listener. Then, update the orientation on the IInAppMessage
object in the beforeInAppMessageDisplayed()
delegate method:
1
2
3
4
5
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
// Set the orientation to portrait
inAppMessage.setOrientation(Orientation.PORTRAIT);
return InAppMessageOperation.DISPLAY_NOW;
}
1
2
3
4
5
override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
// Set the orientation to portrait
inAppMessage.orientation = Orientation.PORTRAIT
return InAppMessageOperation.DISPLAY_NOW
}
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:
1
2
3
4
5
6
7
@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
if (inAppMessage instanceof IInAppMessageThemeable && ViewUtils.isDeviceInNightMode(BrazeInAppMessageManager.getInstance().getApplicationContext())) {
((IInAppMessageThemeable) inAppMessage).enableDarkTheme();
}
return InAppMessageOperation.DISPLAY_NOW;
}
1
2
3
4
5
6
override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
if (inAppMessage is IInAppMessageThemeable && ViewUtils.isDeviceInNightMode(BrazeInAppMessageManager.getInstance().applicationContext!!)) {
(inAppMessage as IInAppMessageThemeable).enableDarkTheme()
}
return InAppMessageOperation.DISPLAY_NOW
}
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.
Prerequisites
이 기능을 사용하려면 먼저 Swift Braze SDK를 통합해야 합니다.
UI 델리게이트 설정(필수)
인앱 메시지 표시를 사용자 지정하고 다양한 수명 주기 이벤트에 반응하려면 다음을 설정해야 합니다. BrazeInAppMessageUIDelegate
. 트리거된 인앱 메시지 페이로드 수신 및 처리, 디스플레이 수명 주기 이벤트 수신, 디스플레이 타이밍 제어에 사용되는 델리게이트 프로토콜입니다. BrazeInAppMessageUIDelegate
을 사용하려면 다음을 수행해야 합니다:
- 기본
BrazeInAppMessageUI
구현을inAppMessagePresenter
. - 프로젝트에
BrazeUI
라이브러리를 포함하세요.
1단계: BrazeInAppMessageUIDelegate
프로토콜 구현
먼저 BrazeInAppMessageUIDelegate
프로토콜과 원하는 모든 해당 메서드를 구현하십시오. 다음 예제에서는 애플리케이션의 AppDelegate
클래스에서 이 프로토콜을 구현합니다.
1
2
3
extension AppDelegate: BrazeInAppMessageUIDelegate {
// Implement your protocol methods here.
}
1
2
3
4
5
6
7
@interface AppDelegate () <BrazeInAppMessageUIDelegate>
@end
@implementation AppDelegate
// Implement your protocol methods here.
@end
2단계: delegate
객체 할당
이 인앱 메시지 UI를 inAppMessagePresenter
로 할당하기 전에 BrazeInAppMessageUI
인스턴스에 delegate
객체를 할당합니다.
1
2
3
let inAppMessageUI = BrazeInAppMessageUI()
inAppMessageUI.delegate = self
AppDelegate.braze?.inAppMessagePresenter = inAppMessageUI
1
2
3
BrazeInAppMessageUI *inAppMessageUI = [[BrazeInAppMessageUI alloc] init];
inAppMessageUI.delegate = self;
AppDelegate.braze.inAppMessagePresenter = inAppMessageUI;
일부 위임 메서드가 언어 런타임과의 매개변수 비호환성으로 인해 Objective-C에서 사용할 수 없습니다.
인앱 메시지 UI 대리자의 단계별 구현에 대해서는 이 튜토리얼을 참조하십시오.
클릭 시 동작
각 Braze.InAppMessage
오브젝트에는 해당 ClickAction
이 포함되어 있으며, 이는 클릭 시 동작을 정의합니다.
클릭 작업 유형
Braze.InAppMessage
의 clickAction
속성정보에서 기본값은 .none
이지만 다음 값 중 하나로 설정할 수 있습니다.
ClickAction |
클릭 시 동작 |
---|---|
.url(URL, useWebView: Bool) |
외부 브라우저에서 지정된 URL을 엽니다. useWebView 을 true 으로 설정하면 웹 보기로 열립니다. |
.newsFeed |
메시지를 클릭하면 뉴스피드가 표시되고 메시지가 해제됩니다. 참고: 뉴스피드는 더 이상 사용되지 않습니다. 자세한 내용은 마이그레이션 가이드를 확인하세요. |
.none |
클릭하면 메시지가 삭제됩니다. |
버튼이 포함된 인앱 메시지의 경우 버튼 텍스트를 추가하기 전에 클릭 동작이 추가되면 clickAction
메시지도 최종 페이로드에 포함됩니다.
클릭 시 동작 사용자 지정
이 동작을 사용자 지정하려면 다음 샘플을 참조하여 clickAction
속성정보를 수정할 수 있습니다.
1
2
3
4
5
6
7
8
func inAppMessage(
_ ui: BrazeInAppMessageUI,
prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
if let newUrl = URL(string: "{your-url}") {
context.message.clickAction = .url(newUrl, useWebView: true)
}
}
inAppMessage(_:prepareWith:)
메서드는 Objective-C에서 사용할 수 없습니다.
사용자 지정 동작 처리하기
다음 BrazeInAppMessageUIDelegate
위임 메서드가 인앱 메시지를 클릭할 때 호출됩니다. 인앱 메시지 버튼 및 HTML 인앱 메시지 버튼(링크)을 클릭한 경우 버튼 ID가 선택적 매개변수로 제공됩니다.
1
2
3
4
5
6
7
func inAppMessage(
_ ui: BrazeInAppMessageUI,
shouldProcess clickAction: Braze.InAppMessage.ClickAction,
buttonId: String?,
message: Braze.InAppMessage,
view: InAppMessageView
) -> Bool
1
2
3
4
5
6
- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
url:(NSURL *)uri
buttonId:(NSString *)buttonId
message:(BRZInAppMessageRaw *)message
view:(UIView *)view;
이 메서드는 Braze에서 클릭 동작을 계속 실행할지 여부를 나타내는 부울 값을 반환합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
func inAppMessage(
_ ui: BrazeInAppMessageUI, shouldProcess clickAction: Braze.InAppMessage.ClickAction,
buttonId: String?, message: Braze.InAppMessage, view: InAppMessageView
) -> Bool {
guard let buttonId,
let idInt = Int(buttonId)
else { return true }
var button: BrazeKit.Braze.InAppMessage.Button? = nil
switch message {
case .modal(let modal):
button = modal.buttons[idInt]
case .modalImage(let modalImage):
button = modalImage.buttons[idInt]
case .full(let full):
button = full.buttons[idInt]
case .fullImage(let fullImage):
button = fullImage.buttons[idInt]
default:
break
}
print(button?.id)
print(button?.text)
print(button?.clickAction)
return true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
url:(NSURL *)uri
buttonId:(NSString *)buttonId
message:(BRZInAppMessageRaw *)message
view:(UIView *)view {
NSInteger buttonInt = [buttonId integerValue];
if (message.type == BRZInAppMessageRawTypeFull || message.type == BRZInAppMessageRawTypeModal) {
BRZInAppMessageRawButton *button = message.buttons[buttonInt];
NSLog(@"%ld", (long)button.identifier);
NSLog(@"%@", button.text);
NSLog(@"%ld", (long)button.clickAction);
}
return YES;
}
모달 해지 사용자 지정
외부 탭 해제 기능을 활성화하려면 사용자 지정하려는 인앱 메시지 유형의 Attributes
구조에서 dismissOnBackgroundTap
속성정보를 수정하면 됩니다.
예를 들어 Modal 이미지 인앱 메시지에 이 기능을 사용하려면 다음과 같이 구성할 수 있습니다.
1
BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true
Attributes
을 통한 사용자 지정은 Objective-C에서 사용할 수 없습니다.
기본값은 false
입니다. 사용자가 인앱 메시지 외부를 클릭할 때 Modal 인앱 메시지의 해제 여부를 결정합니다.
DismissModalOnOutsideTap |
설명 |
---|---|
true |
Modal 인앱 메시지는 외부를 탭하면 해제됩니다. |
false |
기본 Modal 인앱 메시지는 외부를 탭해도 해제되지 않습니다. |
인앱 메시지 사용자 지정에 대한 자세한 내용은 이 문서를 참조하세요.
메시지 방향 사용자 지정
인앱 메시지의 방향을 사용자 지정할 수 있습니다. 모든 메시지에 대해 새로운 기본 방향을 설정하거나 단일 메시지에 대해 사용자 지정 방향을 설정할 수 있습니다.
모든 인앱 메시지의 기본 방향을 선택하려면 다음과 같이 inAppMessage(_:prepareWith:)
메서드를 사용하여 PresentationContext
에서 preferredOrientation
속성을 설정합니다.
예를 들어 세로 방향을 기본 방향으로 설정합니다:
1
2
3
4
5
6
func inAppMessage(
_ ui: BrazeInAppMessageUI,
prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
context.preferredOrientation = .portrait
}
1
2
3
4
- (void)inAppMessage:(BrazeInAppMessageUI *)ui
prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
context.preferredOrientation = BRZInAppMessageRawOrientationPortrait;
}
단일 메시지의 방향을 설정하려면 Braze.InAppMessage
의 orientation
속성을 수정합니다:
1
2
3
4
5
6
7
8
// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = .any
// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = .portrait
// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = .landscape
1
2
3
4
5
6
7
8
// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = BRZInAppMessageRawOrientationAny;
// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = BRZInAppMessageRawOrientationPortrait;
// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = BRZInAppMessageRawOrientationLandscape;
인앱 메시지가 표시된 후 메시지가 표시되는 동안 디바이스 방향이 변경되면 메시지가 디바이스와 함께 회전합니다(메시지의 orientation
구성에서 지원되는 경우).
메시지가 표시되려면 인앱 메시지의 orientation
속성에서 디바이스 방향도 지원해야 합니다. 또한 preferredOrientation
설정은 Xcode에서 대상 설정의 배포 정보 섹션 아래 애플리케이션이 지원하는 인터페이스 방향에 포함된 경우에만 적용됩니다.
방향은 메시지의 프레젠테이션에만 적용됩니다. 기기의 방향이 바뀌면 메시지 보기가 지원하는 방향 중 하나를 채택합니다. 작은 기기(iPhone, iPod Touch)에서는 모달 또는 전체 인앱 메시지에 가로 방향을 설정하면 콘텐츠가 잘릴 수 있습니다.
디스플레이 타이밍 사용자 지정
사용자 경험의 특정 시점에 사용 가능한 인앱 메시지 표시 여부를 제어할 수 있습니다. 전체 화면으로 게임을 하거나 로딩 화면에서 인앱 메시지가 나타나지 않도록 하고 싶다면 보류 중인 인앱 메시지를 지연시키거나 삭제할 수 있습니다. 인앱 메시지의 타이밍을 제어하려면 inAppMessage(_:displayChoiceForMessage:)
delegate method를 사용하여 BrazeInAppMessageUI.DisplayChoice
속성을 설정하십시오.
1
2
3
4
func inAppMessage(
_ ui: BrazeInAppMessageUI,
displayChoiceForMessage message: Braze.InAppMessage
) -> BrazeInAppMessageUI.DisplayChoice
1
- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui displayChoiceForMessage:(BRZInAppMessageRaw *)message
다음 값 중 하나를 반환하도록 BrazeInAppMessageUI.DisplayChoice
을(를) 구성하십시오:
디스플레이 선택 | 동작 |
---|---|
.now |
메시지는 즉시 표시됩니다. 이것은 기본값입니다. |
.reenqueue |
메시지는 표시되지 않고 스택의 맨 위로 다시 배치됩니다. |
.later |
메시지는 표시되지 않고 스택의 맨 위로 다시 배치됩니다. (사용되지 않음, .reenqueue 을(를) 사용하십시오) |
.discard |
메시지는 폐기되며 표시되지 않습니다. |
샘플( InAppMessageUI
)은 Swift Braze SDK 리포지토리 및 Objective-C에서 확인할 수 있습니다.
상태 표시줄 숨기기
Full
, FullImage
, HTML
의 인앱 메시지에서 SDK는 기본적으로 상태 표시줄을 숨깁니다. 다른 유형의 인앱 메시지에서 상태 표시줄은 그대로 유지됩니다. 이 동작을 구성하려면 inAppMessage(_:prepareWith:)
위임 메서드를 사용하여 PresentationContext
에서 statusBarHideBehavior
속성정보를 설정합니다. 이 필드는 다음 값 중 하나를 사용합니다:
상태 표시줄 숨기기 동작 | 설명 |
---|---|
.auto |
메시지 보기에서 상태 표시줄 숨김 상태를 결정합니다. |
.hidden |
항상 상태 표시줄을 숨기십시오. |
.visible |
항상 상태 표시줄을 표시합니다. |
다크 모드 비활성화
사용자 기기에 다크 모드가 켜져 있는 경우 인앱 메시지에 다크 모드 스타일이 적용되지 않도록 하려면 inAppMessage(_:prepareWith:)
위임 메서드를 구현합니다. 메서드에 전달된 PresentationContext
에는 표시할 InAppMessage
오브젝트에 대한 참조가 포함되어 있습니다. 각 InAppMessage
에는 dark
및 light
모드 테마를 포함하는 themes
속성정보가 있습니다. themes.dark
속성정보를 nil
로 설정하면 Braze가 인앱 메시지를 라이트 테마로 자동 표시합니다.
버튼이 있는 인앱 메시지 유형에는 buttons
속성정보에 추가 themes
오브젝트가 있습니다. 버튼이 다크 모드 스타일을 채택하지 않도록 하려면 map(_:)
을 사용하여 light
테마가 적용되고 dark
테마가 적용되지 않은 새 버튼 배열을 생성할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
func inAppMessage(
_ ui: BrazeInAppMessageUI,
prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
switch context.message {
case .slideup:
guard var slideup = context.message.slideup else { return }
slideup.themes.dark = nil
context.message.slideup = slideup
case .modal:
guard var modal = context.message.modal else { return }
modal.themes.dark = nil
modal.buttons = modal.buttons.map {
var newButton = $0
newButton.themes = .init(themes: ["light": $0.themes.light])
return newButton
}
context.message.modal = modal
case .modalImage:
guard var modalImage = context.message.modalImage else { return }
modalImage.themes.dark = nil
modalImage.buttons = modalImage.buttons.map {
var newButton = $0
newButton.themes = .init(themes: ["light": $0.themes.light])
return newButton
}
context.message.modalImage = modalImage
case .full:
guard var full = context.message.full else { return }
full.themes.dark = nil
full.buttons = full.buttons.map {
var newButton = $0
newButton.themes = .init(themes: ["light": $0.themes.light])
return newButton
}
context.message.full = full
case .fullImage:
guard var fullImage = context.message.fullImage else { return }
fullImage.themes.dark = nil
fullImage.buttons = fullImage.buttons.map {
var newButton = $0
newButton.themes = .init(themes: ["light": $0.themes.light])
return newButton
}
context.message.fullImage = fullImage
default:
break
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
- (void)inAppMessage:(BrazeInAppMessageUI *)ui
prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
switch (context.message.type) {
case BRZInAppMessageRawTypeSlideup: {
NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
[updatedThemes removeObjectForKey:@"dark"];
context.message.themes = updatedThemes;
break;
}
case BRZInAppMessageRawTypeModal:
case BRZInAppMessageRawTypeFull:
{
NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
[updatedThemes removeObjectForKey:@"dark"];
context.message.themes = updatedThemes;
NSMutableArray *updatedButtons = [NSMutableArray arrayWithCapacity:context.message.buttons.count];
for (BRZInAppMessageRawButton *button in context.message.buttons) {
BRZInAppMessageRawButtonTheme *lightTheme = BRZInAppMessageRawButtonTheme.defaultLight;
BRZInAppMessageRawButton *newButton = [button mutableCopy];
newButton.textColor = lightTheme.textColor;
newButton.backgroundColor = lightTheme.backgroundColor;
newButton.borderColor = lightTheme.borderColor;
[updatedButtons addObject:newButton];
}
context.message.buttons = updatedButtons;
break;
}
default:
break;
}
}
앱 스토어 리뷰 프롬프트 사용자 지정
캠페인에서 인앱 메시지를 사용하여 사용자에게 앱 스토어 리뷰를 요청할 수 있습니다.
이 예제 프롬프트는 Braze의 기본 동작을 재정의하기 때문에 구현된 경우 노출 횟수를 자동으로 추적할 수 없습니다. 자체 분석을 기록해야 합니다.
1단계: 인앱 메시지 위임자를 설정합니다
먼저, 앱에서 BrazeInAppMessageUIDelegate
을 설정하세요.
2단계: 기본 App Store 리뷰 메시지 비활성화
다음으로, 기본 App Store 리뷰 메시지를 비활성화하기 위해 inAppMessage(_:displayChoiceForMessage:)
위임 메서드를 구현합니다.
1
2
3
4
5
6
7
8
9
func inAppMessage(_ ui: BrazeInAppMessageUI, displayChoiceForMessage message: Braze.InAppMessage) -> BrazeInAppMessageUI.DisplayChoice {
if message.extras["AppStore Review"] != nil,
let messageUrl = message.clickAction.url {
UIApplication.shared.open(messageUrl, options: [:], completionHandler: nil)
return .discard
} else {
return .now
}
}
1
2
3
4
5
6
7
8
9
- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui
displayChoiceForMessage:(BRZInAppMessageRaw *)message {
if (message.extras != nil && message.extras[@"AppStore Review"] != nil) {
[[UIApplication sharedApplication] openURL:message.url options:@{} completionHandler:nil];
return BRZInAppMessageUIDisplayChoiceDiscard;
} else {
return BRZInAppMessageUIDisplayChoiceNow;
}
}
3단계: 딥링크를 생성합니다
딥링크 처리 코드에서 {YOUR-APP-SCHEME}:app-store-review
딥링크를 처리하기 위해 다음 코드를 추가합니다. StoreKit
를 가져와서 SKStoreReviewController
를 사용해야 합니다.
1
2
3
4
5
6
7
8
func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
let urlString = url.absoluteString.removingPercentEncoding
if (urlString == "{YOUR-APP-SCHEME}:app-store-review") {
SKStoreReviewController.requestReview()
return true;
}
// Other deep link handling code…
}
1
2
3
4
5
6
7
8
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
NSString *urlString = url.absoluteString.stringByRemovingPercentEncoding;
if ([urlString isEqualToString:@"{YOUR-APP-SCHEME}:app-store-review"]) {
[SKStoreReviewController requestReview];
return YES;
}
// Other deep link handling code…
}
4단계: 커스텀 클릭 시 동작 설정
다음으로, 다음을 사용하여 인-앱 메시징 캠페인을 만드십시오:
- 키-값 쌍
"AppStore Review" : "true"
- 클릭 시 동작이 ‘앱으로 딥링크’로 설정되며 딥링크
{YOUR-APP-SCHEME}:app-store-review
를 사용합니다.
Apple은 사용자당 연간 최대 세 번으로 App Store 리뷰 요청을 제한하므로 캠페인에서도 사용자당 연간 세 번으로 한도를 제한해야 합니다.
사용자는 App Store 리뷰 프롬프트를 끌 수도 있습니다. 결과적으로, 커스텀 리뷰 프롬프트는 기본 App Store 리뷰 프롬프트의 표시를 보장하지 않으며 직접적으로 리뷰를 요청해서는 안 됩니다.
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:
1
2
3
body .ab-in-app-message .ab-message-header {
font-style: italic;
}
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.
1
2
3
4
braze.initialize("YOUR-API-KEY", {
baseUrl: "YOUR-API-ENDPOINT",
inAppMessageZIndex: 12000
});
This feature is only available for Web Braze SDK v3.3.0 and later.
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.
1
2
3
4
5
import * as braze from "@braze/web-sdk";
braze.initialize("YOUR-API-KEY", {
baseUrl: "YOUR-API-ENDPOINT",
requireExplicitInAppMessageDismissal: true
});
Opening links in a new tab
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.
1
braze.initialize('api-key', { openInAppMessagesInNewTab: true} );
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Braze from "@braze/react-native-sdk";
// Option 1: Listen for the event directly via `Braze.addListener`.
//
// You may use this method to accomplish the same thing if you don't
// wish to make any changes to the default Braze UI.
Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => {
console.log(event.inAppMessage);
});
// Option 2: Call `subscribeToInAppMessage`.
//
// Pass in `false` to disable the automatic display of in-app messages.
Braze.subscribeToInAppMessage(false, (event) => {
console.log(event.inAppMessage);
// Use `event.inAppMessage` to construct your own custom message 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.
Since this is an advanced customization option, note that overriding the default Braze implementation will also nullify the logic to emit in-app message events to your JavaScript listeners. If you wish to still use Braze.subscribeToInAppMessage
or Braze.addListener
as described in Accessing in-app message data, you will need to handle publishing the events yourself.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// In-app messaging
@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
WritableMap parameters = new WritableNativeMap();
parameters.putString("inAppMessage", inAppMessage.forJsonPut().toString());
getReactNativeHost()
.getReactInstanceManager()
.getCurrentReactContext()
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("inAppMessageReceived", parameters);
// Note: return InAppMessageOperation.DISCARD if you would like
// to prevent the Braze SDK from displaying the message natively.
return InAppMessageOperation.DISPLAY_NOW;
}
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.
-
Implement the
BrazeInAppMessageUIDelegate
delegate as described in our iOS article here. -
In the
inAppMessage(_:displayChoiceForMessage:)
delegate method, you can access theinAppMessage
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui
displayChoiceForMessage:(BRZInAppMessageRaw *)message {
// Convert the message to a JavaScript representation.
NSData *inAppMessageData = [message json];
NSString *inAppMessageString = [[NSString alloc] initWithData:inAppMessageData encoding:NSUTF8StringEncoding];
NSDictionary *arguments = @{
@"inAppMessage" : inAppMessageString
};
// Send to JavaScript.
[self sendEventWithName:@"inAppMessageReceived" body:arguments];
// Note: Return `BRZInAppMessageUIDisplayChoiceDiscard` if you would like
// to prevent the Braze SDK from displaying the message natively.
return BRZInAppMessageUIDisplayChoiceNow;
}
To use this delegate, assign it to brazeInAppMessagePresenter.delegate
after initializing the braze
instance.
BrazeUI
can only be imported in Objective-C or Swift. If you are using Objective-C++, you will need to handle this in a separate file.
1
2
3
4
5
6
7
8
@import BrazeUI;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
Braze *braze = [BrazeReactBridge initBraze:configuration];
((BrazeInAppMessageUI *)braze.inAppMessagePresenter).delegate = [[CustomDelegate alloc] init];
AppDelegate.braze = braze;
}
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:
1
2
3
4
BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
Braze *braze = [BrazeReactBridge initBraze:configuration];
braze.inAppMessagePresenter = [[MyCustomPresenter alloc] init];
AppDelegate.braze = braze;
표시 동작 사용자 지정
다음을 통해 런타임에 인앱 메시지의 표시 동작을 변경할 수 있습니다:
1
2
3
4
5
6
7
8
// Sets in-app messages to display immediately when triggered.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_NOW);
// Sets in-app messages to display at a later time and be saved in a stack.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_LATER);
// Sets in-app messages to be discarded after being triggered.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISCARD);
사용자 지정 리스너 설정
사용자가 인앱 메시지와 상호 작용하는 방식을 더 잘 제어해야 하는 경우 BrazeInAppMessageListener
를 사용하여 Appboy.AppboyBinding.inAppMessageListener
에 할당합니다. 사용하지 않으려는 위임의 경우 null
로 남겨두면 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
BrazeInAppMessageListener listener = new BrazeInAppMessageListener() {
BeforeInAppMessageDisplayed = BeforeInAppMessageDisplayed,
OnInAppMessageButtonClicked = OnInAppMessageButtonClicked,
OnInAppMessageClicked = OnInAppMessageClicked,
OnInAppMessageHTMLClicked = OnInAppMessageHTMLClicked,
OnInAppMessageDismissed = OnInAppMessageDismissed,
};
Appboy.AppboyBinding.inAppMessageListener = listener;
public void BeforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
// Executed before an in-app message is displayed.
}
public void OnInAppMessageButtonClicked(IInAppMessage inAppMessage, InAppMessageButton inAppMessageButton) {
// Executed whenever an in-app message button is clicked.
}
public void OnInAppMessageClicked(IInAppMessage inAppMessage) {
// Executed whenever an in-app message is clicked.
}
public void OnInAppMessageHTMLClicked(IInAppMessage inAppMessage, Uri uri) {
// Executed whenever an HTML in-app message is clicked.
}
public void OnInAppMessageDismissed(IInAppMessage inAppMessage) {
// Executed whenever an in-app message is dismissed without a click.
}