> For the complete documentation index, see [llms.txt](https://groobee.gitbook.io/gelatto/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://groobee.gitbook.io/gelatto/ja/getting-started/installation.md). # ジェラートのインストール方法 {% 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などのレンタルモールでは、自動ログインの使用を推奨します。