ジェラートのインストール方法

このドキュメントでは、Webサイトにジェラートチャットボットを設置する方法をご案内します。

開始前の確認事項

ジェラート作成メニューから基本情報を入力してチャットボットを作成した後、ご利用いただけます。チャットボットを保存すると、自動的にチャットボットキーが発行されます。サイトにチャットボットを設置する際には、サービスキーと一緒にこのキーを設定してください。発行されたチャットボットキーは、チャットボットの識別と連携に必須の情報です。

ジェラート管理画面で、以下の情報を事前にご確認ください。

サービスキー：サービス利用時に発行されるサイト固有キー。設定 > サービスキーメニューで確認可能です。

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

チャットボットは、一度保存すれば使用可能になります。管理画面のジェラート作成メニューでチャットボットを保存した後、チャットボットキーをご確認ください。

インストール方法

1. インストールの実施

サイトの <head> 領域に、以下のスクリプトコードを挿入してください。

<script>
(function(w,d,s,l,i){
            w[l]=w[l]||{q:[]};
            if(!w[l].init){w[l].init=function(c){w[l].q.push({c:c});};}
            // お客様のWebサイトに挿入する初期化コード
            var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s);
            j.async=true;
            j.src="https://static.groobee.io/dist/g2/gelatto-loader.min.js";
            j.setAttribute('data-service-key', 'サービスキー');
            f.parentNode.insertBefore(j,f);
          })(window,document,'script','gelatto');
</script>

「サービスキー」は、発行されたサイト固有のキーであり、管理画面の設定 > サービスキーメニューから確認できます。

2. gelatto.init()

if (window.gelatto && window.gelatto.init) {
      window.gelatto.init({
        serviceKey: 'サービスキー',
        campaignKey: 'チャットボットキー',
        autoLogin: false,
        memberId: '会員 ID'  // init実行時にmemberIdがある場合のみ渡せばよい
      });
    }

「サービスキー」は、サイト固有のキーであり、管理画面の設定 > サービスキーメニューから確認できます。
「チャットボットキー」は、管理画面のジェラート作成メニューでチャットボットの必須情報を保存した後、ページ右上で確認できます。

設定オプション

gelatto.init() の主なオプション項目は以下の通りです。

オプション名

説明

デフォルト値

autoLogin

すべてのページに共通適用できるレイアウト内に埋め込まれた、以下の <meta> タグまたは <div> タグの情報を基に、自動ログイン処理を行います。

false

autoLogin: true に設定すると、HTMLタグ内に gelatto-member-id が存在する場合、自動的にログイン処理が行われます。

チャットボットの会話履歴などをユーザーIDを基準に確認するには、ログイン処理が必要です。ログイン処理については、以下をご参照ください。

ログイン / ログアウト処理

手動ログイン

チャットボットの自動ログインを使用しない場合は、ログイン / ログアウト関数を使用してログイン処理を行うことができます。
手動ログインを設定する際は、gelatto.init() 関数で autoLogin を false に設定し、以下のように処理してください。

ログイン処理関数

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引数：有効期限（ミリ秒単位）

ログアウト処理関数

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 に設定し、以下のように処理してください。
<meta> タグによる方法と <div> タグによる方法のいずれかを選択してご利用ください。

<meta> タグによる方法

<meta name="gelatto-member-id" content="会員ID" />

<div> タグによる方法

方法 1 : <div data-gelatto-member-id="会員ID"></div>

方法 2 : <div id="gelatto-member-id">会員ID</div>

タグの処理方法は、どちらか一方を選んでご使用ください。

注意事項

SPA（シングルページアプリケーション）やカスタムサイトでは、できる限り手動ログインの使用を推奨します。自動ログインを使用すると、パフォーマンスに影響を与える可能性があります。
一方、Cafe24などのレンタルモールでは、自動ログインの使用を推奨します。

Previousナレッジ構造 Nextチャットボットウィジェットのカスタマイズ

Last updated 5 months ago

Was this helpful?

hashtag開始前の確認事項

hashtagインストール方法

hashtag1. インストールの実施

hashtag2. gelatto.init()

hashtag設定オプション

hashtagログイン / ログアウト処理

hashtag手動ログイン

hashtagログイン処理関数

hashtagログアウト処理関数

hashtag自動ログイン

hashtag<meta> タグによる方法

hashtag<div> タグによる方法

hashtag注意事項

開始前の確認事項

インストール方法

1. インストールの実施

2. gelatto.init()

設定オプション

ログイン / ログアウト処理

手動ログイン

ログイン処理関数

ログアウト処理関数

自動ログイン

<meta> タグによる方法

<div> タグによる方法

注意事項