スクリプトの埋め込み方法。
NOMOCa-AI chat をWebサイトに設置する手順と、表示を調整するオプションをまとめました。各コードはコピーして、そのままご利用いただけます。
スクリプトタグを設置する
埋め込みスクリプトの <script> タグは、閉じ </body> タグの直前に配置します。これにより、ページの読み込み速度が維持され、すべてのコンテンツが正しく表示されます。
<!-- ページ最下部、</body> タグの直前に配置します -->
<script src="{URL}"></script>
</body></body> の直前以外に配置した場合、ボタン起動などの動作は保証できません。必ず最下部に設置してください。
表示を整える、3つのパラメータ。
URLの末尾に & でつないで追記すると、サイトに合わせて表示を調整できます。
mb
下端からの余白
フッターメニューやボタンとチャットボットが重なる場合に使用します。画面の最下部から指定分だけ上に移動します。
px・rem など CSS の単位を指定でき、単位がなければ px として扱われます。
…?bid=XXXXX&mb=50pxzindex
重なり順の制御
ドロップダウンメニューなど、チャットボットより前面に表示したい要素がある場合に使用します。指定した値以上の z-index を持つ要素の背後に表示されます。
数値のみを指定できます。
…?bid=XXXXX&zindex=10auto_hide_on_scroll
スクロール時の自動非表示
スクロール時にボタンを隠すアニメーションの有効／無効を切り替えます。false で常に固定表示になります。
true／false のみ。PC・モバイル共通の設定です。
…?bid=XXXXX&auto_hide_on_scroll=false<!-- {URL}?bid=XXXXX の後に & でつなげて指定します -->
<script src="https://console.nomoca-ai.com/api/chatbot?bid=XXXXX&mb=50px&zindex=10&auto_hide_on_scroll=false"></script>auto_hide_on_scroll=false は、サイトのデザインによってはボタンがコンテンツを隠したり、操作を妨げる場合があります。設置後に表示をご確認ください。
ボタンやバナーから、起動する。
ページ上の任意の要素をクリックして、チャットボットを起動できます。
1つの要素から起動する
起動したい要素に id="open-chatbot" を付与します。その要素をクリックすると、チャットボットが起動します。
<button id="open-chatbot">チャットボットを起動する</button>複数の要素から起動する
複数の要素から起動したい場合は data-open-chatbot を付与します。id="open-chatbot" との併用も、複数要素への付与も可能です。
<button data-open-chatbot>チャットボットを開く</button>
<div class="chatbot-banner" data-open-chatbot>質問はこちらから</div>
<img src="chatbot-icon.png" alt="チャットボット" data-open-chatbot>設置時の注意：id="open-chatbot" は1ページに1つだけ使用してください。複数に付与すると動作は保証できません。また、起動要素はページ読み込み時に存在している必要があるため、スクリプトは必ず </body> の直前に配置してください。
LIFFアプリの、作成手順。
LINE上でチャットボットを利用する場合の準備手順です。LINE Developers Console で設定します。
LINEログインチャネルを作成する
LINE Developers Console にログインし、LIFFアプリを作成するプロバイダーを選択 →「新規チャネル作成」→ ダイアログで「LINEログイン」を選択します。新規チャネル作成画面で、次のとおり入力します。
- チャネルの種類：LINEログイン
- サービスを提供する地域・所在国／地域：日本
- アプリタイプ：ウェブアプリ
- チャネルアイコン・チャネル名・チャネル説明・メールアドレスを入力（プライバシーポリシー／利用規約URLは任意）
- 「LINE開発者契約の内容に同意します」にチェック →「作成」をクリック
LIFFアプリを追加する
作成したチャネルの「LIFF」タブを選択 →「追加」をクリックし、次のとおり入力します。
- LIFFアプリの名前を入力
- サイズ：Full
- エンドポイントURL：NOMOCa AI管理画面の「LIFFアプリエンドポイントURL」をコピーして貼り付け
- Scope：openid と profile を選択
- ボットリンク機能：On／Scan QR・モジュールモード：Off
- 入力内容を確認して「追加」をクリック
LIFF URL を取得する
LIFFアプリ作成後、「LIFF」タブのアプリ一覧から「LIFF URL」をコピーします。コピーした URL を NOMOCa AI 管理画面に設定すれば、準備は完了です。
実際に、起動してみる。
以下の2つの要素には data-open-chatbot が付いています。クリックするとチャットボットが開きます。
設置でお困りの際は、
専任チームがサポートします。
導入から運用・改善まで、経験豊富なチームが伴走。まずはお気軽にご相談ください。