カスタムスタイル

Braze UI要素には、ニュートラルなアプリ内メッセージエクスペリエンスを実現し、他のBrazeモバイルプラットフォームとの一貫性を保つことを目的としたデフォルトのルックアンドフィールが付属しています。Braze のデフォルトスタイルは、Braze SDK 内の CSS で定義されます。

アプリケーションで選択したスタイルをオーバーライドすることで、独自の背景画像、フォントファミリ、スタイル、サイズ、アニメーションなどを使用して、標準のアプリ内メッセージタイプをカスタマイズできます。

たとえば、以下はアプリ内メッセージのヘッダーを斜体で表示するオーバーライドの例です。

1
2
3
  body .ab-in-app-message .ab-message-header {
    font-style: italic;
  }

詳細については、JSDocs を参照してください。

アプリ内メッセージのデフォルト Z インデックス

デフォルトでは、z-index: 9001アプリ内メッセージはを使用して表示されます。これは、ウェブサイトがそれよりも高い値を持つ要素のスタイルを設定するシナリオでは、inAppMessageZIndex 初期化オプションを使用して設定できます。

1
2
3
4
braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    inAppMessageZIndex: 12000
});