> For the complete documentation index, see [llms.txt](https://app.developers.karte.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://app.developers.karte.io/react-native-sdk/iam-react-native-sdk.md).

# \[React Native]アプリ内メッセージを表示する

アプリケーション内にメッセージ（ダイアログ等）を表示したい場合は、アプリ内メッセージ機能を利用することで実現可能です。

アクションは、SDKから送信したイベントをトリガーに配信され、その後SDKにより自動的にアプリケーション上に表示されます。

## 導入手順

### 共通

npm または yarn を利用してパッケージをインストールしてください。

{% tabs %}
{% tab title="npm" %}
{% code overflow="wrap" %}

```shell
npm install --save @react-native-karte/in-app-messaging
```

{% endcode %}
{% endtab %}

{% tab title="yarn" %}
{% code overflow="wrap" %}

```shell
yarn add @react-native-karte/in-app-messaging
```

{% endcode %}
{% endtab %}
{% endtabs %}

パッケージのインストールが完了したら、対応するプラットフォーム毎の導入手順に従い設定を進めてください。

### iOS

Pod をインストールしてください。

{% code overflow="wrap" %}

```shell
npx pod-install ios
```

{% endcode %}

### Android

導入にあたり必要な手順はありません。

## 動作確認

1. イベントを送信処理を実装\
   接客サービスの配信トリガーとして機能するイベントを実装します。\
   イベントの送信については、 [イベントを送信する](/react-native-sdk/tracking-react-native-sdk.md) をご覧ください。
2. 接客サービスを作成\
   管理画面上で接客サービスを作成します。\
   接客サービスの作成方法については、[接客サービス作成の流れ](https://support.karte.io/post/4yOwCoZkdoPZwpFRvSrkwP) をご覧ください。
3. アプリケーションで確認\
   アプリケーションを起動し、1. で実装したイベントの送信が行われる操作を行い、2. で設定した接客サービスが配信・表示されることを確認します。

## アクション表示の仕組み

アクションの表示にはWebViewを利用しています。\
このため管理画面上で、HTML / CSS / JavaScript をカスタマイズすることでアプリケーションのコードを変更することなく、アクションの見た目を変更することが可能となっています。

WebViewは、SDKが初期化されるタイミングで生成されメモリ上に保持されます。\
アクションの表示が必要となった場合、SDKはWebViewを含むWindowを生成し、アプリケーション上に配置します。\
WebView上のアクションが非表示になると、Windowは破棄され、WebViewは再びメモリ上で保持されます。

## アクションのリンクの制御について

ユーザーがアクション内のリンク（aタグ）をクリックすると、SDKはリンクに指定されているURLを自動的に開きます。

なお独自に制御したい場合は、ネイティブコードで delegate を実装することで対応可能です。\
詳細については、以下をご覧ください。

* [iOSの場合](/ios-sdk-appendix/appendix-iam-link-control-ios-sdk.md)
* [Androidの場合](/android-sdk-appendix/appendix-iam-link-control-android-sdk.md)

## アクションの表示制御機能について

### アクションを非表示にする

通常アクションの非表示はユーザーの操作によって行われることが一般的ですが、プログラムから非表示にすることも可能です。

プログラムから非表示にする場合は、`InAppMessaging` クラスの `dismiss()` メソッドを呼び出すことで非表示にすることが可能です。\
また同クラスの `isPresenting` プロパティを呼び出すことで、アクションが表示中であるか確認することが可能です。

{% code overflow="wrap" %}

```typescript
if (InAppMessaging.isPresenting) {
  InAppMessaging.dismiss()
}
```

{% endcode %}

### アクションを表示を抑制する

特定画面群では接客を表示したくないの場合、プログラムからアクションの表示を抑制することが可能です。

`InAppMessaging` クラスの `suppress()` メソッドを呼び出すことで表示抑制モードとなり、抑制が有効となります。

{% code overflow="wrap" %}

```typescript
InAppMessaging.suppress()
```

{% endcode %}

また同クラスの `unsuppress()` メソッドを呼び出すことで表示抑制モードを解除できます。

{% code overflow="wrap" %}

```typescript
InAppMessaging.unsuppress()
```

{% endcode %}

### アクションを表示する画面を限定する

特定画面のコンテキストに合わせたアクションを配信する場合に、ユーザーの操作などで特定画面外に遷移した後にアクションが表示されてしまう場合があります。\
これを抑制するために、接客サービスのオプションとしてネイティブアプリにおける接客表示制御から「表示を制限する」を用意しています。

特定の画面に限定して表示したい接客サービスの場合は、このオプションをONにしてください。

本機能は、SDKが画面の境界を正しく認識できる場合にのみ機能します。\
なお画面の境界を認識するパターンは、以下の通りです。

* Viewイベントの送信

### アクションを常駐させる

通常の画面遷移またはviewイベント発生時に接客がリセットされます。トリガーとするイベントによってはイベント発生後にviewイベントが発生してしまい、接客が表示されないことがあります。それを避けるために接客サービスのオプションとして、ネイティブアプリにおける接客表示制御から「常に表示する」を用意しています。\
また、画面を跨いで常駐させたい場合にも本オプションは有効です。

オプションを有効にした接客を非表示にする方法は以下の通りです。

* `InAppMessaging.dismiss()` または `InAppMessaging.suppress()` を呼び出し明示的に非表示にする
* 接客のアクション側で接客を非表示にする実装をする

## アクションの状態変化を検知する

ネイティブコードで `InAppMessagingDelegate` プロトコルを実装することにより、アクションの表示状態の変化などを検知することが可能です。

現在のところ、以下の状態変化を検知することが可能です。

* Windowの表示/非表示状態の変化
* アクションの表示/非表示状態の変化
* リンククリックの検知

詳細についてはリファレンスをご覧ください。

* [iOSの場合](https://plaidev.github.io/karte-sdk-docs/ios/latest/KarteInAppMessaging/Protocols/InAppMessagingDelegate.html)
* [Androidの場合](https://plaidev.github.io/karte-sdk-docs/android/inappmessaging/latest/io.karte.android.inappmessaging/-in-app-messaging-delegate/index.html)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://app.developers.karte.io/react-native-sdk/iam-react-native-sdk.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.