In-App Message Event Listener

This feature is supported in JavaScript SDK version 11.37.0 and above.

Interfaces

HackleInAppMessageListener

interface HackleInAppMessageListener {
  beforeInAppMessageOpen?(inAppMessage: HackleInAppMessage): void
  afterInAppMessageOpen?(inAppMessage: HackleInAppMessage): void
  beforeInAppMessageClose?(inAppMessage: HackleInAppMessage): void
  afterInAppMessageClose?(inAppMessage: HackleInAppMessage): void
  onInAppMessageClick?(
    inAppMessage: HackleInAppMessage,
    view: HackleInAppMessageView,
    action: HackleInAppMessageAction
  ): boolean
}

onInAppMessageClick

You can control In-App Message behavior through the boolean value returned by the onInAppMessageClick method.

• Returning true overrides the existing In-App Message action.

  • For example, if the existing In-App Message click action was Do not show for a day, that action will not execute.

• Returning false keeps the existing In-App Message action as-is.

When calling view.close() inside onInAppMessageClick

If view.close() is called inside the listener, it is treated the same as returning true.

onInAppMessageClick: (message, view, action) => {
  view.close();

  // return false를 하더라도 true한 것과 동일하게 처리됨.
  return false;
},

HackleInAppMessage

interface HackleInAppMessage {
  key: number
}

• Returns the key of the In-App Message.

HackleInAppMessageView

interface HackleInAppMessageView {
  close(): void
  inAppMessage: HackleInAppMessage // 11.48.0+
}

• You can directly close the In-App Message from within a listener function by calling close().

HackleInAppMessageAction

type HackleInAppMessageActionType = "CLOSE" | "LINK"
type HackleInAppMessageActionLinkTarget = "CURRENT" | "NEW_TAB" | "NEW_WINDOW"

interface HackleInAppMessageAction {
  type: HackleInAppMessageActionType
  close?: {
    hideDurationMillis: number | null
  }
  link?: {
    url: string
    target: HackleInAppMessageActionLinkTarget
    shouldCloseAfterLink: boolean
  }
}

property	description
close?.hideDurationMillis	When the action hides the message for a specific duration, returns that duration in milliseconds.
link?.url	Returns the link when a link is included. e.g) https://hackle.io
link?.target	NEW_TAB when navigating to a new tab, NEW_WINDOW when navigating to a new window, CURRENT when navigating in the current tab.
link?.shouldCloseAfterLink	Returns true when the close after link option is ON.

Usage Example

Register Listener

hackleClient.setInAppMessageListener({
  onInAppMessageClick: (message, view, action) => {
    if (message.key === 99) {
      // 99번 키의 인앱메시지에 대하여 커스텀 리스너를 적용합니다.

      // e.g) 쿠폰 발급 API 호출, history API 등 내부 라우팅 로직 작성

      // 인앱메시지를 리스너를 통해서 닫고 싶을 때 사용합니다.
      view.close();

      // false를 반환하는 경우 기존 인앱메시지의 동작을 그대로 유지합니다.
      return false;
    }
  },
  afterInAppMessageClose(message) {
    console.log("afterInAppMessageClose", message);
  },
  afterInAppMessageOpen(message) {
    console.log("afterInAppMessageOpen", message);
  },
  beforeInAppMessageClose(message) {
    console.log("before view close", message);
  },
  beforeInAppMessageOpen(message) {
    console.log("before view open", message);
  },
});

Unregister Listener

hackleClient.setInAppMessageListener(null);