커스텀 HTML 인앱 메시지

📘

HTML 인앱 메시지를 사용하려면 아래 버전 이상의 SDK를 사용해야 합니다.

웹앱 연동 기능을 사용 중이라면 웹과 앱 모두 최소 지원 버전을 만족해야 합니다.

SDK지원 버전
JavaScript11.55.0
React11.55.0
Android2.66.0
iOS3.2.0
Flutter2.30.0
React Native3.33.0

🚧

커스텀 HTML 인앱 메시지는 Javascript를 실행할 수 있습니다.

의도치 않은 동작을 수행하지 않도록 명확한 검수 과정을 거쳐서 이용하세요.

핵클은 커스텀 HTML 인앱 메시지 내의 잘못 작성된 스크립트로 인해 발생한 문제를 책임지지 않습니다.

HTML 인앱 메시지

Hackle은 두 가지 방식으로 인앱 메시지 캠페인을 생성할 수 있습니다.

  • 템플릿 기반 인앱 메시지 (모달, 배너, 바텀시트)
  • Custom HTML 인앱 메시지

HTML을 기반으로 핵클의 인앱 메시지를 생성해요


강력해진 메시지 커스터마이즈

🧑‍🔬 기존 템플릿 기반 핵클의 인앱 메시지보다 강력한 커스터마이즈 기능을 제공합니다.

설문조사 / PNG 이미지 / 동영상 첨부 등

다양한 레이아웃의 인앱 메시지를 만들 수 있어요.

HTML 인앱 메시지는 템플릿으로 표현하기 어려운 다양한 온사이트 마케팅 시나리오에 활용할 수 있어요.

  • 풀스크린 이벤트 배너
    시즌 프로모션, 한정 할인 등 화면 전체를 활용한 강렬한 비주얼로 전환율을 높일 수 있어요.
  • 룰렛 · 스크래치 이벤트
    당첨 애니메이션, 쿠폰 즉시 발급 등 사용자가 직접 참여하는 인터랙티브한 이벤트를 만들 수 있어요.
  • 동영상 팝업
    신규 기능 소개, 브랜드 영상 등 영상 콘텐츠로 메시지 전달력을 높일 수 있어요
  • 온보딩 튜토리얼
    신규 사용자에게 서비스 핵심 기능을 단계별로 안내하는 멀티 스텝 가이드를 만들 수 있어요.
  • 쿠폰 · 혜택 안내
    쿠폰 코드 복사, 혜택 확인 등 사용자가 바로 행동할 수 있는 UI를 구성할 수 있어요.
  • 공지 · 업데이트 알림
    앱 업데이트, 서비스 점검, 약관 변경 등 중요한 정보를 놓치지 않게 전달할 수 있어요.

내 서비스 무드와 어울리는 인앱 메시지를 만들 수 있어요.

🎨 내 서비스 무드와 어울리는 디자인 요소를 적용해보세요.

  • 사용자 지정 웹 폰트를 사용할 수 있어요.
  • 버튼 Radius, 모달 위치 등 모든 CSS를 자유롭게 적용할 수 있어요.

커스텀 HTML 메시지 작성을 위한 내용은 JavaScript Bridge 문서 에서 확인하세요



FAQ

인앱 메시지가 너무 늦게 나타나요.

인앱 메시지에서 사용 중인 미디어, 에셋 파일들을 점검해보세요. 고해상도 이미지, 용량이 큰 GIF 등이 인앱 메시지 안에서 사용되고 있을 경우 영향을 줄 수 있습니다. 불러와야할 에셋이 많을수록 인앱 메시지가 사용자에게 표시 되는데까지 소요되는 시간이 늘어나게 됩니다.

  1. 시스템 글꼴을 사용하거나 웹 폰트의 로드 방식을 개선하세요.
  2. 이미지와 같은 파일의 크기를 작게 유지하세요.
  3. 무거운 스크립트가 실행되지 않도록 주의하세요.
타 솔루션에서 사용하던 HTML을 그대로 사용할 수 있나요?

네.

타사에서 사용하던 bridge 혹은 JavaScriptInterface를 핵클이 제공하는 Bridge로 변경하여 사용해주세요.

인앱 메시지 안의 한글이 깨져서 보여요.

인코딩의 문제일 확률이 높습니다. https://www.w3schools.com/tags/att_meta_charset.asp 와 같이 head 태그에 인코딩을 명시해주세요. 핵클 템플릿 예시에서도 확인 가능해요. https://docs-kr.hackle.io/docs/in-app-message-html-template

배너/플로팅 버튼 UI도 가능한가요?

HTML 인앱 메시지가 보여지고 있는 동안에는 기존 본문과의 상호작용이 어렵습니다.

때문에 배너나 플로팅 버튼은 인앱 메시지와 기존 본문 모두 사용 상호작용이 가능해야하므로 HTML 인앱 메시지로 구성하기에 적합하지 않습니다.

즉, 모달처럼 오버레이를 두어 사용자가 인앱 메시지를 우선적으로 처리하게끔 구성하시는 것을 권장합니다.

(Browser) 인앱 메시지가 보이는 동안 스크롤을 막을 수 있나요?

인앱 메시지가 떠 있는 동안 기존 본문의 스크롤을 막고 싶으면, 해당 내용을 코드로 구현해야 합니다.

window.parent.document 에 접근이 가능하니 overflow css를 제어하세요.