アプリ内メッセージテンプレートの作成

テンプレート > アプリ内メッセージテンプレートを使用して、アプリ内メッセージやブラウザ内メッセージのレイアウトの再利用可能なライブラリーを構築できます。ドラッグ＆ドロップエディターからデザインを保存したり、従来のエディター用のカラープロファイルやCSSテンプレートアセットを作成したりできます。

ステップ 1:アプリ内メッセージテンプレートを開く

Brazeダッシュボードで、テンプレート > アプリ内メッセージテンプレートに移動します。

ステップ 2:テンプレートの作成方法を選択する

テンプレートの追加方法は目的によって異なります。

ステップ 3:テンプレートを管理する

テンプレート > アプリ内メッセージテンプレートで、テンプレートのフィルタリング、検索、または編集のために開くことができます。他のテンプレートタイプと同様に、テンプレートを複製したりアーカイブしたりできます。テンプレートとメディアのワークフローの概要については、テンプレートを参照してください。

テンプレートにアクセスするには権限が必要です。たとえば、「Campaigns、Canvases、カード、Content Blocks、フィーチャーフラグ、Segments、メディアライブラリ、ロケーション、プロモーションコード、およびユーザー設定センターへのアクセス」またはそれに相当する詳細な権限を付与して、アプリ内メッセージテンプレートの表示や編集を行えるようにします。詳細については、ユーザー権限を参照してください。

カラープロファイルとCSSテンプレートの作成

既存のテンプレートを編集するか、+ 作成を選択してカラープロファイルまたはCSSテンプレートを選択し、アプリ内メッセージ用の新しいテンプレートを作成できます。

カラープロファイル

メッセージテンプレートの配色は、HEXカラーコードを入力するか、色付きのボックスを選択してカラーピッカーで色を選択することでカスタマイズできます。従来のエディターで新しいアプリ内メッセージを作成する際にこのプロファイルをデフォルトで適用したい場合は、デフォルトプロファイルとして使用を選択します。

完了したらカラープロファイルを保存を選択します。

CSSテンプレート

WebモーダルのCSS用に完全なCSSテンプレートをカスタマイズできます。

CSSテンプレートに名前を付けてタグを設定し、デフォルトテンプレートにするかどうかを選択します。用意されたスペースに独自のCSSを記述できます。このスペースにはメッセージプレビューに表示されるCSSがあらかじめ入力されており、必要に応じて調整できます。

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
.ab-message-header, .ab-message-text {
  color: #333333;
  text-align: center;
}

.ab-message-header {
  font-size: 20px;
  font-weight: bold;
}

.ab-message-text {
  font-size: 14px;
  font-weight: normal;
}

.ab-close-button svg {
  fill: #9b9b9b;
}

.ab-message-button {
  border: 1px solid #1b78cf;
  font-size: 14px;
  font-weight: bold;
}
.ab-message-button:first-of-type {
  background-color: white;
  color: #1b78cf;
}
.ab-message-button:last-of-type, .ab-message-button:first-of-type:last-of-type {
  background-color: #1b78cf;
  color: white;
}

.ab-background {
  background-color: white;
}

.ab-icon {
  background-color: #0073d5;
  color: white;
}

.ab-page-blocker {
  background-color: rgba(51, 51, 51, .75);
}

背景色からフォントサイズ、太さなど、すべてを編集できます。

CSSを使用したモーダル（Webのみ）

Web専用のCSS付きWebモーダルメッセージを使用する場合、独自のテンプレートを適用するか、用意されたスペースに独自のCSSを記述できます。このスペースにはメッセージプレビューに表示されるCSSがあらかじめ入力されていますが、必要に応じて調整できます。

独自のテンプレートを適用する場合は、テンプレートを適用を選択し、アプリ内メッセージテンプレートギャラリーから選択します。オプションがない場合は、テンプレート > アプリ内メッセージテンプレートのCSSテンプレートビルダーを使用してCSSテンプレートを追加できます。