Skip to content
チャットボットのhitobo(ヒトボ) | アディッシュのチャットボット(ChatBot)サービスチャットボットのhitobo(ヒトボ) | アディッシュのチャットボット(ChatBot)サービス
チャットボットのhitobo(ヒトボ) | アディッシュのチャットボット(ChatBot)サービス
チャットボットのhitobo(ヒトボ)
  • 社内FAQ
  • 機能紹介
  • お役立ち情報
  • セミナー

ログイン

資料ダウンロード

  • 社内FAQ
  • 機能紹介
  • お役立ち情報
  • セミナー

ホーム » お役立ち情報 » チャットボットのタグとは何?種類別の埋め込み手順の実例

チャットボットのタグとは何?種類別の埋め込み手順の実例

【公開日:2021年8月6日】

本記事はチャットボット設置に必要なタグの埋め込みについて解説する記事です。チャットボットにおいての「タグ」とは何か?から解説し、チャットボットの埋め込み手順について説明します。

【こんな方が対象】
・チャットボットにおけるタグの意味を知りたい方
・チャットボットを検討中でサイトへの設置方法を知りたい方
・問い合わせ対応の1つとしてチャットボットを検討中の方

目次

  • 1 チャットボットのタグとは?
  • 2 チャットボットのタグの埋め込み方法
    • 2.1 個別のWebページに直接埋め込む
    • 2.2 Googleタグマネージャーを利用して埋め込む
  • 3 ノーコードツールなどで作成したサイトへ埋め込む
    • 3.1 1. Googleサイトへの埋め込み方法
    • 3.2 2. SharePointへの埋め込み方法
  • 4 まとめ
  • 5 関連記事

チャットボットのタグとは?

チャットボットで利用されるタグとは、チャットボットを設置するために用いるHTMLのテキストやJavaScriptなどを指します。このタグをチャットボットを設置する対象のWebページのHTMLや、タグが設置可能なページ作成ツール(GoogleサイトやSharePointなど)に埋め込むことでチャットボットを設置できます。

チャットボットのタグの埋め込み方法

チャットボットのタグの埋め込み方法は2つあります。

  • チャットボットを設置したいサイトのHTMLに、チャットボットのタグをコピーして貼り付ける
  • Googleタグマネージャー(Google Tag Manager)でカスタムHTMLを作成し、カスタムHTMLにチャットボットのタグをコピーして貼り付ける

 

どちらの場合も、タグのテキストをコピーして貼り付けるだけでチャットボットをページへ設置することが可能です。

では、hitoboを例に、チャットボットのWebページへの埋め込み手順を説明します。

個別のWebページに直接埋め込む

以下の画像はhitoboの管理画面です。

管理画面より、チャットボットの設置用のタグをコピーし設置したいWebページのHTML内に追加すると、チャットボットを設置することが可能です。
(※スクリプトはbodyの閉じタグの直前に追加することを推奨しています。)

以下に具体的な設置方法について解説します。
①hitoboの管理画面から設置用のタグをコピーする

②対象のWebページのHTML(※) を編集するために、テキストエディターもしくは編集ソフトで開く

※HTMLとは https://saijilab.com/webdesign/html

③</body>(※bodyの閉じタグ)の前にhitobo管理画面からコピーした設置用のタグを貼り付ける

上記のHTMLをブラウザで読み込んだ状態

以上でWebページへの設置が可能です。

Googleタグマネージャーを利用して埋め込む

GoogleタグマネージャーとはWebサイト内に設置するタグを一括管理できるツールです。
通常はタグの追加・変更・削除があった場合に、すべての対象ページのHTMLを毎回編集する必要があります。
Googleタグマネージャーを利用すると複数のページのタグを、Googleタグマネージャーの管理画面上で一括で編集ができます。

 

以下に具体的な埋め込み方法について解説します。

①Googleタグマネージャーのアカウントを選択する
(Googleタグマネージャーは無料で利用できます。)

②アカウントを選択後 タグ>タグタイプの カスタムHTML を選択する

③チャットボットの設置用のタグをコピーし貼り付ける

この時、トリガーはDOM Readyで設定。
(※その他のトリガーを設定する場合は2回以上タグが呼ばれないように注意)

 

以上がGoogleタグマネージャーを利用したサイトへの埋め込み方法です。

ノーコードツールなどで作成したサイトへ埋め込む

GoogleサイトやSharePointなどで作成したサイトへの設置例です。

1. Googleサイトへの埋め込み方法

編集画面上の「埋め込む」から「埋め込みコード」の入力画面を表示できます。
hitoboの場合は、ここにhitobo管理画面上で確認可能なGoogleサイト用のタグをコピーして貼り付けるとチャットボットが設置可能です。

Googleサイトへの設置方法の詳細は以下を参照ください。

関連記事
【導入解説】Googleサイトにチャットボットを社内FAQ用に埋め込む
チャットボットをGoogleサイトに社内FAQとして導入する:チャットボットがよく活用されるケースに、社内の質問へ回答する業務の効率化のための解決策として、社内FAQへの利用があります。本記事ではチャットボットを社内向けのGoogleサイトに設置する例を、設置手順とともに解説します。
【導入解説】Googleサイトにチャットボットを社内FAQ用に埋め込む

2. SharePointへの埋め込み方法

編集画面のWebパーツより「埋め込み」を選択すると以下の画面を表示できます。
hitoboの場合は、ここにhitobo管理画面上で確認可能なSharePoint用のタグをコピーして貼り付けるとチャットボットが設置可能です。

SharePointへの設置方法の詳細は以下を参照ください。

関連記事
【解説】SharePoint(シェアポイント)にチャットボットを埋め込む手順
チャットボットをSharePoint(シェアポイント)に社内FAQとして導入する:チャットボットがよく活用されるケースに、社内のメンバーからの質問へ回答する業務の効率化があります。社内ポータルとして利用しているSharePoint(シェアポイント)にチャットボットのhitoboを設置する例を、設置手順とともに解説します。
【解説】SharePoint(シェアポイント)にチャットボットを埋め込む手順

まとめ

チャットボットのタグとは何かと埋め込み方法について、実際の画面を用いて解説しました。Webページへのチャットボットの埋め込みは、個別のページのHTMLの所定の箇所にタグをコピーして貼り付けることで可能です。また、Googleタグマネージャーを利用してサイト全体に設置することも可能です。なお、GoogleサイトやSharePointへも簡単に設置が可能です。

 

自社で作成したWebサイトはもちろんのこと、HTMLにタグを埋め込む方法があるツールで作成されたページであれば、ほとんどのサイトで設置可能です。
もし、チャットボットについて気になる。チャットボットの埋め込み方法について詳しく聞きたい。などございましたら以下からお気軽にお問い合わせください。

hitobo サービス紹介資料ダウンロード

関連記事

関連記事
【2022年版】無料トライアル・デモありのAIチャットボットおすすめツール5選。料金ページで費用がいくらか?わかる
この記事では、無料デモ・トライアルの提供があり、かつ、料金がサービス紹介ページ上で公開されており、事前に費用がいくらかかるか?の目安がわかる手頃なツールをおすすめ5選として紹介します。AIチャットボットのツール選定は、「問合せ前から費用の目安が分かっていること」
【2022年版】無料トライアル・デモありのAIチャットボットおすすめツール5選。料金ページで費用がいくらか?わかる
関連記事
社内FAQチャットボットの活用でリモートワークにおける社内対応を効率化
コロナ渦以前は社内での質問はオフィスで直接担当者に聞けるため、すぐに解決していました。しかし、リモートワークの場合には、電話やメール、チャットツールで個別に担当者に質問するため、すぐに解決することが難しいことも多くなり、何度もやり取りを繰り返してしまい、質問者・対応者とも負担が増えています。社内での質問対応など、リモートワークになってからの質問者や対応者からみた課題、課題解決を行うソリューションなど、解説していきます。
社内FAQチャットボットの活用でリモートワークにおける社内対応を効率化
関連記事
導入事例:愛知県小牧市様『チャットボットで市民がいつでも問い合わせ可能に』
愛知県小牧市様によるチャットボットのhitoboの自治体導入事例です。市民が市役所に来庁しなくても簡単に問い合わせができる方法について、当初は総合コールセンターといった選択肢も含めて広く調査・検討を進められていたそうです。その中で、AI技術を活用した自動応答システムを導入する地方自治体も出てきたたことから、チャットボットの情報収集と検討を進めました。今回、hitoboを実際に活用することで変化したことや、良かった点について、小牧市役所広報広聴課のご担当者の方にお伺いしました。
導入事例:愛知県小牧市様『チャットボットで市民がいつでも問い合わせ可能に』
関連記事
【社内FAQ導入事例】アーバンリサーチ様『社内ポータルでよくある質問にチャットボットで即答』
株式会社アーバンリサーチ様のチャットボットのhitoboの導入事例です。これまでは各店舗のスタッフからの問い合わせを、主に電話及びメールにてヘルプデスクで受け付けており、業務効率化に関して課題を感じていたそうです。今回はhitobo導入後の変化や、hitoboを選んだ理由について担当者様に伺いました。
【社内FAQ導入事例】アーバンリサーチ様『社内ポータルでよくある質問にチャットボットで即答』
Tags: チャットボット
Share
最新の記事
  • 【2023年版】チャットボットとは。人工知能との関係、仕組みと作り方
    2023年1月5日
  • 過去記事:チャットボット(Chatbot)とは。人工知能との関係、開発の方法(2017-2022)
    2022年12月27日
  • 【チャットボット設置例集】Webサイト、スマホ、アプリに導入時の画面表示イメージ
    2022年12月25日
  • 【2022年】AIチャットボットとは?導入効果・特徴・注意点をわかりやすく解説
    2022年10月13日
  • ヘルプデスク・カスタマーサポートにおけるチャットボットの役割・効果
    2022年9月5日
  • 【2022年8月25日(木)開催】 『チャットボットの費用対効果を算出し、社内FAQで導入検討を進めるには?』
    2022年7月25日

 お問い合わせ 

資料ダウンロード

0120-5464-77

10:00 − 17:00(平日)

アディッシュ株式会社

〒141-0031 東京都品川区西五反田1-21-8 ヒューリック五反田山手通ビル6階

TEL: 03-5759-0334(代表)

Copyright © アディッシュ株式会社 All Rights Reserved.
  • お問い合わせフォーム
  • サイトマップ
  • 会社情報
  • プライバシーポリシー
Footer menu