내장 편집기에서 인앱 메시지 만들기

새 템플릿 추가하기

콘텐츠 → 인앱으로 이동하여 템플릿 추가를 클릭합니다:

템플릿 이름을 입력하고 새 템플릿 만들기를 선택한 후 템플릿 추가를 클릭합니다:

기본 템플릿을 기반으로 새 인앱 메시지 페이지를 만들거나 빈 템플릿을 선택하여 처음부터 시작할 수 있습니다.

콘텐츠 추가하기

레이아웃

필요한 콘텐츠 블록을 템플릿 본문으로 끌어다 놓아 템플릿 레이아웃을 정의합니다. 이미지, 텍스트, 버튼, 구분선, 채울 수 있는 양식, HTML 블록 및 메뉴를 추가할 수 있습니다.

한 행에 두 개 이상의 콘텐츠 요소를 배치하려면 열 요소를 템플릿에 추가합니다. 필요한 블록 유형을 선택하고 각 열에 콘텐츠를 추가합니다:

레이아웃의 배경색을 변경하려면 바깥쪽 여백을 클릭합니다. 전체 레이아웃이 선택되었는지 확인하고 색상을 선택합니다:

전체 레이아웃이 선택된 경우, 패딩 설정을 편집하고 배경 이미지를 업로드할 수도 있습니다.

세로 및 가로 모드 인앱 메시지 만들기

Pushwoosh는 세로 및 가로 방향 모두에서 인앱 메시지 콘텐츠를 만들 수 있는 유연성을 제공합니다. 이를 통해 모든 기기에서 캠페인이 시각적으로 매력적이고 효과적이도록 보장합니다.

세로 모드 인앱 메시지

일반적으로 모바일 기기에서 사용되는 세로 방향으로 디자인된 인앱 메시지를 만들려면 편집기에서 모바일 탭으로 이동합니다. 여기에서 스마트폰 화면에 적합한 수직 레이아웃에 맞게 콘텐츠를 디자인할 수 있습니다.

가로 모드 인앱 메시지

일반적으로 더 넓은 화면에 선호되는 가로 방향 인앱 메시지의 경우 편집기 내의 데스크톱 탭으로 이동합니다. 여기에서 더 넓은 수평 공간을 활용하도록 인앱 메시지를 구성할 수 있습니다.

가로 모드 인앱 메시지에 열 추가하기

가로 모드 인앱 메시지에 열을 추가해야 하는 경우 먼저 열 요소를 추가합니다. 필요한 열의 수와 레이아웃을 정의합니다.

열이 있는 가로 모드 인앱 메시지를 디자인한 후 모바일 탭으로 전환합니다. 설정 패널 하단에 있는 반응형 디자인 섹션으로 스크롤하여 모바일에서 쌓지 않기 옵션을 활성화합니다.

Pushwoosh는 또한 인앱 메시지에서 열 레이아웃을 혼합하고 일치시킬 수 있습니다. 특정 열은 수직으로 쌓이도록 구성하고 다른 열은 수평으로 유지하도록 할 수 있습니다. 이렇게 하려면 각 열 블록을 필요에 맞게 조정합니다.

콘텐츠 요소

제목

제목의 글꼴, 색상, 텍스트 정렬, 줄 높이 및 패딩 매개변수를 편집할 수 있습니다.

AI를 사용하여 제목 텍스트를 생성하여 시간을 절약할 수도 있습니다. 스마트 제목 섹션의 버튼을 클릭하고 몇 가지 키워드를 입력한 다음 제안 받기를 클릭합니다:

텍스트

텍스트는 제목과 동일한 방식으로 사용자 정의할 수 있습니다. 글꼴, 색상, 텍스트 정렬, 줄 높이 및 패딩 매개변수를 변경할 수 있습니다.

스마트 텍스트 옵션을 사용하여 텍스트를 향상시킬 수도 있습니다:

이미지

이미지를 추가하려면 이미지 블록을 클릭하고 파일을 편집기 패널로 드래그합니다:

또는 파일을 업로드하는 대신 이미지 URL을 지정할 수 있습니다.

AI 이미지 생성을 실험해 볼 수도 있습니다. 이렇게 하려면 매직 이미지 섹션의 버튼을 클릭하고 만들고 싶은 이미지를 설명한 다음 이미지 생성을 클릭합니다:

작업 섹션에서 이미지를 클릭했을 때 수행되어야 할 작업을 설정할 수 있습니다. 웹사이트(또는 앱 내 페이지로의 딥 링크)를 열거나 팝업을 닫을 수 있습니다. 또한 사용자 정의 JavaScript 핸들러 속성을 삽입하여 이미지 클릭 작업을 설정할 수 있습니다. 작업이 필요하지 않은 경우 이 설정을 무시합니다.

버튼

템플릿에 버튼이 추가되면 텍스트, 색상, 패딩 및 테두리를 사용자 정의할 수 있습니다.

AI가 버튼 텍스트를 만드는 데 도움을 줄 수 있습니다. 스마트 버튼 섹션의 버튼을 클릭하고 키워드를 입력한 다음 제안 받기를 클릭하기만 하면 됩니다:

버튼을 클릭한 후 수행되어야 할 작업을 지정하려면 작업 섹션으로 이동하여 필요한 옵션을 선택합니다. 웹사이트를 열거나 팝업을 닫을 수 있습니다. 또한 사용자 정의 JavaScript 핸들러 속성을 삽입하여 버튼 클릭 작업을 설정할 수 있습니다.

구분선

구분선은 콘텐츠 블록 사이에 배치할 수 있는 선입니다. 이를 사용하여 템플릿을 구조화하고 가장 중요한 블록을 강조할 수 있습니다. 구분선의 너비, 선 유형, 정렬 및 패딩 설정을 변경할 수 있습니다.

양식

양식을 사용하면 사용자의 이메일, 전화번호, 선호도 및 향후 커뮤니케이션에 유용할 수 있는 기타 정보를 수집할 수 있습니다. 이 요소는 표준 HTML 양식으로 구성됩니다: 데이터는 URL 필드에 지정된 주소로 GET 또는 POST 요청으로 전송됩니다.

필드 이름을 클릭하여 매개변수를 구성합니다:

필드 유형: 필드에서 전송되어야 하는 데이터 유형;
필드 이름: 필드의 데이터가 전달되는 매개변수 이름;
필드 레이블: 필드 위에 표시되는 텍스트;
플레이스홀더 텍스트;
양식을 제출하는 데 필드가 필요한지 여부를 나타내는 확인란.

필드 유형, 이름, 레이블 및 플레이스홀더 설정을 보여주는 양식 필드 매개변수 구성

다른 필드를 추가하려면 새 필드 추가를 클릭하고 데이터 유형을 선택합니다:

다양한 데이터 유형으로 추가 양식 필드를 만들기 위한 새 필드 추가 인터페이스

너비, 정렬, 필드 간 간격, 버튼 텍스트, 색상 및 글꼴과 같은 양식 매개변수를 사용자 정의할 수 있습니다.

HTML

HTML 블록을 사용하면 템플릿에 사용자 정의 HTML 코드를 추가할 수 있습니다.

이는 대화형 또는 시각적으로 매력적인 요소로 인앱 메시지를 향상시키는 데 특히 유용할 수 있습니다. 예를 들어, 설문조사를 위한 사용자 정의 양식을 만들고 싶다면 HTML 블록을 사용하여 직접 디자인한 양식을 포함할 수 있습니다.

양식을 설정한 후 Pushwoosh 내에서 직접 통계를 추적하여 결과 및 사용자 상호 작용을 쉽게 분석할 수 있습니다. 이를 구현하려면 개발팀의 도움이 필요하며, 이 링크를 공유해 주세요.

기본 템플릿에는 사용자 정의 설문조사 양식이 있는 사전 디자인된 인앱 메시지 템플릿이 있습니다. 이를 참조하거나 자신만의 설문조사 양식의 시작점으로 사용할 수 있습니다.

또한, 더 매력적인 사용자 경험을 위해 비디오를 삽입하여 인앱 메시지를 향상시킬 수 있습니다. 다음은 HTML을 사용하여 YouTube 비디오를 삽입하는 방법의 예입니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>