` |
いずれのパターンでも、共通の前提として **embed script をアプリ全体で 1 度だけ読み込む** 必要があります。次のセクションで設定します。
## 共通: embed script を読み込む
`app/app.vue`（Nuxt 4）または `app.vue`（Nuxt 3）で `useHead` を使い、Turnint AI の embed script を `` に注入します。
```vue theme={null}
```
`async` を付けることで、初期描画をブロックせずにスクリプトを読み込めます。読み込みが完了すると `window.turnintai` が利用可能になり、以後すべてのページで起動 API が使えます。
スクリプトは `app.vue` で 1 度だけ読み込めば十分です。各ページで個別に `useHead` を呼ぶ必要はありません。
## パターン A: ボタンクリックで開く
最もシンプルな方法です。任意の要素に `data-turnint-*` 属性を付与すると、その要素がクリックされたタイミングで埋め込みが開きます。
```vue theme={null}
```
| 属性 | 値の例 | 説明 |
| ------------------- | ------------------------ | ------------------------------------------------ |
| `data-turnint-id` | `pub_xxxxxxxxxxxxxxxx` | 開きたいコンテンツの ID。ダッシュボードから取得 |
| `data-turnint-type` | `fullscreen` / `popover` | 開き方。`fullscreen` は画面全体を覆うモーダル、`popover` はチャットバブル |
埋め込みの UI 言語は embed script 側の `data-turnint-locale` で指定します。複数のボタンやインライン埋め込みを同じページに置く場合も、script は 1 度だけ読み込めば十分です。
Nuxt の `` でページ遷移した後に新しく追加されたボタンも、自動で検知されて起動可能になります。route 変更ごとに手動で再マウントする必要はありません（詳しくは後述の「SPA ナビゲーションについて」を参照）。
## パターン B: ページ表示時に自動で開く
「LP の CTA から専用ページに飛ばし、着地した瞬間に埋め込みを立ち上げたい」というユースケース向けのパターンです。専用の空白ページを 1 つ作り、`onMounted` 内で `window.turnintai.open()` を呼びます。
```vue theme={null}
```
embed script は `async` で読み込んでいるため、`onMounted` の発火時点ではまだ `window.turnintai` が定義されていない可能性があります。`requestAnimationFrame` でフレームごとに再チェックすることで、ロード完了直後に確実に `open()` を呼び出せます。
`type: "fullscreen"` 以外の指定は現状サポートされていません。インライン表示が必要な場合はパターン C を使ってください。
## パターン C: インライン表示
ページ内の特定領域に埋め込みを表示したい場合は、`
` などに `data-turnint-*` 属性を付けます。`data-turnint-type="inline"` を指定すると、その要素の中に埋め込みが描画されます。
```vue theme={null}
```
要素の幅は CSS 側で確保してください（埋め込みは親要素のサイズに合わせて描画されます）。
## TypeScript で型を効かせる
`window.turnintai` の公式型定義はパッケージとしては配信していないため、プロジェクト側で型を宣言します。`types/turnintai.d.ts` のようなファイルを作成し、以下を貼り付けてください。
```ts theme={null}
// types/turnintai.d.ts
export {}
declare global {
interface Window {
turnintai?: {
open: (config: {
id?: string
type?: "fullscreen"
endpoint?: string
locale?: "ja" | "en" | "auto"
onClose?: () => void
}) => void
}
}
}
```
Nuxt は `tsconfig.json` を自動生成するため、`types/` ディレクトリに置けば自動的に読み込まれます。明示的に取り込みたい場合は `nuxt.config.ts` の `typescript.tsConfig.include` に追加してください。
## 関連ドキュメント
* [クイックスタート](/ja/get-started/quickstart) — 共有方法と埋め込み方式の全体像
* [Google Tag Manager 経由で導入する](/ja/get-started/onboarding/google-tag-manager) — GTM のカスタム HTML タグで導入する手順
* [トラッキングパラメータの自動保持](/ja/integrations/tracking-params) — UTM などの引き継ぎ