# 인앱메시지 이벤트 리스너

{% hint style="info" %}
JavaScript SDK 11.37.0 이상 버전에서 지원하는 기능입니다.
{% endhint %}

## Interfaces

### HackleInAppMessageListener

```typescript
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

`onInAppMessageClick` 메서드가 반환하는 boolean 값을 통해 인앱메시지의 동작을 제어할 수 있습니다.

* `true` 를 반환하는 경우 기존 인앱메시지의 액션을 덮어씁니다.
  * 가령, 기존 인앱메시지의 클릭 시 액션이 `하루 동안 보지 않기` 였다면 해당 액션은 동작하지 않습니다.
* `false`를 반환하는 경우 기존 인앱메시지의 액션이 그대로 동작합니다.

{% hint style="warning" %}
`view.close()` 를 `onInAppMessageClick` 내부에서 호출하는 경우

`view.close()` 를 리스너 내부에서 호출한 경우 `true` 를 반환한 것과 동일하게 처리됩니다.

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

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

{% endhint %}

### HackleInAppMessage

```typescript
interface HackleInAppMessage {
  key: number
}
```

* 인앱메시지의 키를 반환합니다.

### HackleInAppMessageView

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

* `close()` 를 호출하여 인앱메시지를 리스너 함수 내에서 직접 닫을 수 있습니다.

### HackleInAppMessageAction

```typescript
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
  }
}
```

<table><thead><tr><th width="255.3828125">property</th><th>description</th></tr></thead><tbody><tr><td><code>close?.hideDurationMillis</code></td><td>메시지를 특정 기간동안 숨김 처리하는 액션인 경우, 해당 기간을 밀리초로 반환합니다.</td></tr><tr><td><code>link?.url</code></td><td>링크가 포함된 경우 링크를 반환합니다. e.g) <a href="https://hackle.io">https://hackle.io</a></td></tr><tr><td><code>link?.target</code></td><td>새 탭으로 이동인 경우 <code>NEW_TAB</code> 새 창으로 이동인 경우 <code>NEW_WINDOW</code> 현재 탭에서 이동인 경우 <code>CURRENT</code></td></tr><tr><td><code>link?.shouldCloseAfterLink</code></td><td>링크 이동 후 닫기 옵션이 <code>ON</code>인 경우 true를 반환합니다.</td></tr></tbody></table>

## 사용 예제

### 리스너 등록

```javascript
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);
  },
});
```

### 리스너 해제

```javascript
hackleClient.setInAppMessageListener(null);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/development-guide/javascript/in-app-message/js-in-app-message-listener.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.