In-App Message Event Listener

This feature is supported in React 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

The example is written inside useEffect, but you can place it wherever it suits your use case.

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
// import hackleClient
import { hackleClient } from "./hackleClient";

export default function Example() {
  const navigate = useNavigate();

  useEffect(() => {
    hackleClient.setInAppMessageListener({
      onInAppMessageClick: (message, view, action) => {
        // 100번 키의 인앱메시지에 대하여 대시보드에서 설정한 link URL을 React의 Route 로직으로 대체합니다.
        if (message.key === 100) {
          if (action.link?.url) {
            view.close()
	          navigate(action.link.url);
            return true;
          }
        }

        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);
      },
    });
  }, [navigate]);

  return;
}

Unregister Listener

hackleClient.setInAppMessageListener(null);