> For the complete documentation index, see [llms.txt](https://help.genser.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.genser.ai/ja/developers/app-embed.md).

# アプリ埋め込みガイド

この機能は **genser discovery 専用** です。

アプリ埋め込みは、顧客のアプリ内に genser discovery を WebView（または iframe）で表示し、genser のヘッダーなしでアプリ画面になじませ、商品詳細をオーバーレイで表示する機能です。

{% hint style="info" %}
顧客側で行うのは **「アプリで開いた」という信号を送ること** だけです。ヘッダーの非表示や商品詳細のオーバーレイは **genser が自動で処理** します。
{% endhint %}

***

## **1. 連携方法**

「アプリで開いた」という信号を送る方法です。信号に使う値（トークン・パラメータ）は **genser と協議して決定** します。

{% tabs %}
{% tab title="iOS (WKWebView)" %}
WebView の UserAgent に協議したトークンを追加します。

```swift
let config = WKWebViewConfiguration()
// UAの末尾に「アプリ名/バージョン + 協議したトークン」形式で追加（GenserApp は例）
config.applicationNameForUserAgent = "MyApp/1.0.0 GenserApp"
let webView = WKWebView(frame: .zero, configuration: config)
```

{% endtab %}

{% tab title="Android (WebView)" %}
WebView の UserAgent に協議したトークンを追加します。

```kotlin
val defaultUA = webView.settings.userAgentString
// 重複追加を防止：まだ含まれていない場合のみ追加
if (!defaultUA.contains("GenserApp")) {
    webView.settings.userAgentString = "$defaultUA MyApp/1.0.0 GenserApp"
}
```

{% endtab %}

{% tab title="Web アプリ / iframe" %}
埋め込み URL に協議したパラメータを追加します。

```
https://<genser discovery のアドレス>?embed=1    // 例：実際の値は genser と協議
```

{% endtab %}
{% endtabs %}

信号が伝わると、埋め込み画面でのみ genser のヘッダーが非表示になります。信号のない通常アクセスでは通常どおり表示されます。

***

## **2. 表示画面**

信号が伝わると以下のように動作します。**◇ 自動適用** は genser が自動で処理する部分、**◇ 適用ガイド** は顧客側のアプリで少し実装していただく部分です。

{% tabs %}
{% tab title="ヘッダー非表示（自動）" %}
顧客（パートナー）アプリのヘッダーは **そのまま維持** され、genser 画面自体のヘッダーだけが **自動で非表示** になります。これによりロゴが重複せず、genser 画面がアプリに自然になじみます。顧客側で行う作業はありません。

<figure><img src="/files/ehFW5Etxw8XNUtd07G0b" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="商品詳細オーバーレイ（実装）" %}
ここに表示される商品詳細は **顧客側の商品詳細ページ（PDP）** です。商品を選ぶと顧客の PDP が新しい画面で開きますが、その際 **全画面遷移ではなくオーバーレイ（レイヤー）で表示していただく** と、上の画像のようにアプリを離れずに滑らかにつながります。

<figure><img src="/files/yOQY1as5TpfBcOE1GLmq" alt=""><figcaption></figcaption></figure>

次のように、顧客の PDP をオーバーレイで開くよう実装していただければ大丈夫です。

**iOS** — モーダルシートで present

```swift
let vc = UIViewController()
let web = WKWebView(frame: vc.view.bounds)
web.load(URLRequest(url: pdpURL))          // 顧客の PDP アドレス
vc.view.addSubview(web)
vc.modalPresentationStyle = .pageSheet     // シートで現れるオーバーレイ
present(vc, animated: true)
```

**Android** — BottomSheet で表示

```kotlin
val dialog = BottomSheetDialog(context)
val web = WebView(context).apply { loadUrl(pdpUrl) }  // 顧客の PDP アドレス
dialog.setContentView(web)
dialog.show()
```

**Web アプリ / iframe** — 固定オーバーレイレイヤー

```html
<!-- 全画面遷移ではなくオーバーレイレイヤーで -->
<div class="pdp-overlay">        <!-- position:fixed; inset:0; background:rgba(0,0,0,.5) -->
  <iframe src="/products/123"></iframe>   <!-- 顧客の PDP -->
</div>
```

{% endtab %}
{% endtabs %}

***

## **3. 導線ボタンの配置**

AI 検索への導線ボタンは **顧客がアプリに直接配置** します（推奨事項）。次の 2 つから選んでください。

{% tabs %}
{% tab title="オプション A · 独立ボタン" %}
検索窓の下に独立した AI 導線ボタンを配置します。

<figure><img src="/files/Ir5cidCZ0AwIqnM6gzHT" alt=""><figcaption></figcaption></figure>

{% endtab %}

{% tab title="オプション B · 検索窓の右ボタン" %}
検索窓の右にコンパクトな AI ボタンを配置します。

<figure><img src="/files/mWiSXliVpmtIluSmkAkm" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## **よくある質問**

<details>

<summary>ネイティブアプリだけですか？ Web アプリでも使えますか？</summary>

Web をレンダリングできる環境（WebView または iframe）であれば、どちらでも使えます。信号の送り方を環境に合わせて（UA トークンまたは URL パラメータ）選ぶだけです。

</details>

<details>

<summary>通常の Web ブラウザのアクセスでもヘッダーは非表示になりますか？</summary>

いいえ。協議した埋め込み信号がある場合のみ非表示になります。信号のない通常アクセスでは通常どおり表示されます。

</details>

<details>

<summary>識別値が他のサービスと重複しませんか？</summary>

トークン・パラメータの値は顧客ごとに genser と協議して固有に決めるため、他のサービスと重複しません。

</details>

<details>

<summary>商品詳細がオーバーレイではなく全画面で表示されます。</summary>

オーバーレイは、アプリが商品詳細をモーダルシート（iOS）または BottomSheet（Android）で開くときに表示されます。全画面で開くと通常の画面遷移になります。

</details>

<details>

<summary>iframe でも埋め込めますか？</summary>

可能です。ただし iframe はクロスドメインの Cookie・ストレージ制約（特に iOS）があり、ログインセッションが必要な画面は別途検討が必要です。UserAgent を指定できる WebView 方式のほうが安定します。

</details>

***

関連ドキュメント: その他表示設定 · ウィジェット・デザイン設定