Skip to content

인앱 메시지 템플릿 만들기

템플릿 > 인앱 메시지 템플릿을 사용하여 인앱 및 인브라우저 메시지 레이아웃의 재사용 가능한 라이브러리를 구축할 수 있습니다. 드래그 앤 드롭 편집기에서 디자인을 저장하거나, 기존 편집기를 위한 색상 프로필 및 CSS 템플릿 자산을 생성할 수 있습니다.

1단계: 인앱 메시지 템플릿 열기

Braze 대시보드에서 템플릿 > 인앱 메시지 템플릿으로 이동합니다.

2단계: 템플릿 생성 방법 선택

템플릿을 추가하는 방법은 목표에 따라 다릅니다.

목표 수행 방법
드래그 앤 드롭 레이아웃을 재사용하기 위해 저장 드래그 앤 드롭 인앱 메시지 작성기에서 편집기를 종료한 후 Save as template을 선택합니다(먼저 Campaign을 시작하거나 초안으로 저장해야 합니다). 템플릿은 다음 메시지를 위해 템플릿 > 인앱 메시지 템플릿에 표시됩니다.
색상 프로필 또는 CSS 템플릿 생성(기존 편집기) 인앱 메시지 템플릿 페이지에서 + Create를 선택한 다음 Color Profile 또는 CSS Template을 선택합니다. 자세한 내용은 색상 프로필 및 CSS 템플릿을 참조하세요.
Braze 템플릿 커스터마이즈 드래그 앤 드롭 편집기에서 인앱 메시지를 생성하고, Braze 템플릿을 선택한 후 커스터마이즈한 다음 Save as template을 선택합니다. 각 Braze 템플릿에 대한 설명은 인앱 메시지 템플릿을 참조하세요.

3단계: 템플릿 관리

템플릿 > 인앱 메시지 템플릿에서 필터, 검색하거나 템플릿을 열어 편집할 수 있습니다. 다른 템플릿 유형과 마찬가지로 템플릿을 복제하거나 아카이브할 수 있습니다. 템플릿 및 미디어 워크플로에 대한 개요는 템플릿을 참조하세요.

템플릿에 접근하려면 권한이 필요합니다. 예를 들어, 인앱 메시지 템플릿을 보거나 편집하려면 “Access Campaigns, Canvases, Cards, Content Blocks, Feature Flags, Segments, Media Library, Locations, Promotion Codes, and Preference Centers” 또는 이에 상응하는 세부 권한을 부여하세요. 자세한 내용은 사용자 권한을 참조하세요.

색상 프로필 및 CSS 템플릿 생성

기존 템플릿을 편집하거나 + Create를 선택하고 Color Profile 또는 CSS Template을 선택하여 인앱 메시지를 위한 새 템플릿을 만들 수 있습니다.

색상 프로필

HEX 색상 코드를 입력하거나 색상 상자를 선택하고 색상 선택기에서 색상을 선택하여 메시지 템플릿의 색상 구성을 커스터마이즈할 수 있습니다. 기존 편집기에서 새 인앱 메시지를 만들 때 이 프로필을 기본값으로 적용하려면 Use as default profile을 선택합니다.

완료되면 Save Color Profile을 선택합니다.

인앱 메시지 색상 프로필 템플릿 편집기.

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가 포함된 모달(웹 전용)

웹 전용 CSS 포함 웹 모달 메시지를 사용하도록 선택한 경우, 자체 템플릿을 적용하거나 제공된 공간에 직접 CSS를 작성할 수 있습니다. 이 공간에는 메시지 미리보기에 표시된 CSS가 이미 채워져 있지만, 필요에 맞게 조정할 수 있습니다.

자체 템플릿을 적용하려면 Apply Template을 선택하고 인앱 메시지 템플릿 갤러리에서 선택합니다. 옵션이 없는 경우 템플릿 > 인앱 메시지 템플릿의 CSS 템플릿 빌더를 사용하여 CSS 템플릿을 추가할 수 있습니다.
New Stuff!