# ジェラートのインストール方法 {% hint style="info" %} このドキュメントでは、Webサイトに**ジェラート**チャットボットを設置する方法をご案内します。 {% endhint %}

## **開始前の確認事項** ジェラート作成メニューから基本情報を入力してチャットボットを作成した後、ご利用いただけます。\ チャットボットを保存すると、自動的にチャットボットキーが発行されます。サイトにチャットボットを設置する際には、サービスキーと一緒にこのキーを設定してください。\ 発行されたチャットボットキーは、チャットボットの識別と連携に必須の情報です。ジェラート管理画面で、以下の情報を事前にご確認ください。 * **サービスキー**：サービス利用時に発行されるサイト固有キー。**設定 > サービスキー**メニューで確認可能です。

* **チャットボットキー：ジェラート作成**メニューでチャットボットを保存すると、ページ右上に表示されるチャットボット固有のキーです。\ （下の画像を参考にして、確認したチャットボットキーを `campaignKey` として設定してください。）

{% hint style="warning" %} チャットボットは、一度保存すれば使用可能になります。\ 管理画面の**ジェラート作成**メニューでチャットボットを保存した後、チャットボットキーをご確認ください。 {% endhint %} *** ## **インストール方法** ### 1. インストールの実施サイトの `` 領域に、以下のスクリプトコードを挿入してください。 ```javascript ``` {% hint style="info" %} 「サービスキー」は、発行されたサイト固有のキーであり、管理画面の**設定 > サービスキー**メニューから確認できます。 {% endhint %} ### **2. gelatto.init()** ```javascript if (window.gelatto && window.gelatto.init) { window.gelatto.init({ serviceKey: 'サービスキー', campaignKey: 'チャットボットキー', autoLogin: false, memberId: '会員 ID' // init実行時にmemberIdがある場合のみ渡せばよい }); } ``` {% hint style="success" %} * 「サービスキー」は、サイト固有のキーであり、管理画面の**設定 > サービスキー**メニューから確認できます。 * 「チャットボットキー」は、管理画面の**ジェラート作成**メニューでチャットボットの必須情報を保存した後、ページ右上で確認できます。 {% endhint %} #### **設定オプション** `gelatto.init()` の主なオプション項目は以下の通りです。

オプション名	説明	デフォルト値
`autoLogin`	すべてのページに共通適用できるレイアウト内に埋め込まれた、以下の `<meta>` タグまたは `<div>` タグの情報を基に、自動ログイン処理を行います。	`false`

* `autoLogin`: `true` に設定すると、HTMLタグ内に `gelatto-member-id` が存在する場合、自動的にログイン処理が行われます。 {% hint style="warning" %} チャットボットの会話履歴などをユーザーIDを基準に確認するには、ログイン処理が必要です。ログイン処理については、以下をご参照ください。 {% endhint %} *** ## **ログイン / ログアウト処理** ### **手動ログイン** * チャットボットの自動ログインを使用しない場合は、ログイン / ログアウト関数を使用してログイン処理を行うことができます。 * 手動ログインを設定する際は、`gelatto.init()` 関数で `autoLogin` を `false` に設定し、以下のように処理してください。 #### **ログイン処理関数** ```javascript if (window.gelatto && window.gelatto.login) { window.gelatto .login('memberid', 3000) # 推奨時間：3000ms .then((r) => { console.log('ログイン成功'); console.log(r); }) .catch((e) => { console.error('ログイン失敗:', e); }); } ``` * 第1引数：ログインするユーザーのID * 第2引数：有効期限（ミリ秒単位） #### **ログアウト処理関数** ```javascript if (window.gelatto && window.gelatto.logout) { window.gelatto .logout() .then((r) => { console.log('ログアウト成功'); console.log(r); }) .catch((e) => { console.error('ログアウト失敗:', e); }); } ``` ### **自動ログイン** * 自動ログインを設定する場合は、`gelatto.init()` 関数で `autoLogin` を `true` に設定し、以下のように処理してください。 * `` タグによる方法と `

` タグによる方法のいずれかを選択してご利用ください。 #### **\ タグによる方法** ```html ``` #### **\

タグによる方法** ```html 方法 1 :

``` ```html 方法 2 :

会員ID

``` {% hint style="danger" %} タグの処理方法は、どちらか一方を選んでご使用ください。 {% endhint %} *** ## **注意事項** * SPA（シングルページアプリケーション）やカスタムサイトでは、できる限り**手動ログイン**の使用を推奨します。自動ログインを使用すると、パフォーマンスに影響を与える可能性があります。 * 一方、Cafe24などのレンタルモールでは、自動ログインの使用を推奨します。 --- # 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://groobee.gitbook.io/gelatto/ja/getting-started/installation.md?ask= ``` 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.