인앱 메시지 템플릿 만들기

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

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

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

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

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

3단계: 템플릿 관리

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

템플릿에 접근하려면 권한이 필요합니다. 예를 들어, 인앱 메시지 템플릿을 보거나 편집하려면 “Campaigns, Canvases, Cards, Content Blocks, 기능 플래그, Segments, 미디어 라이브러리, 위치, 프로모션 코드 및 환경설정 센터에 접근” 또는 이에 상응하는 세부 권한을 부여하세요. 자세한 내용은 사용자 권한을 참조하세요.

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

기존 템플릿을 편집하거나 + 생성을 선택하고 색상 프로필 또는 CSS 템플릿을 선택하여 인앱 메시지를 위한 새 템플릿을 만들 수 있습니다.

색상 프로필

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

완료되면 색상 프로필 저장을 선택합니다.

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가 이미 채워져 있지만, 필요에 맞게 조정할 수 있습니다.

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