無料チャットツール(HTMLサイト向け)

最終更新日

ツール名無料プランの主な制限日本語対応おすすめ用途
Tawk.to制限なし(広告なし)シンプルで高機能な対応
Crisp Chatオペレーター数2人まで△(設定で可能)小規模なサイト
Tidio月100会話までボット+チャットを試したい
チャネルトーク機能・人数制限あり◎(日本製)中小企業・EC向け
JivoChatオペレーター1人まで複数チャネルで対応したい

1. Tawk.to(トーク・トゥ) – 完全無料・広告なし

 特徴:

•コード1行貼るだけで導入完了

•ダッシュボードから営業時間や自動応答など設定可能

•完全無料なのに高機能(チャット履歴・訪問者追跡など)

設置手順:

1.公式サイト に無料登録
2.サイト名やURLを入力
3.表示される「スクリプトタグ」をコピー

4.あなたのHTMLファイルの</body>直前に以下のように貼り付け:

<!--Start of Tawk.to Script--> 
<script type="text/javascript"> var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); 
(function(){ var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; 
s1.async=true; s1.src='https://embed.tawk.to/あなたのID/1h〇〇〇〇〇〇〇〇〇'; 
s1.charset='UTF-8'; s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0); })();
</script> <!--End of Tawk.to Script--> 

※「あなたのID」は登録後に発行されます。

Tawk.toの設置手順

  1. Tawk.toにサインアップ
    まず、Tawk.toの公式サイトにアクセスして無料登録を行います。
    「SIGN UP FREE」ボタンをクリックして、メールアドレス・パスワードを入力します。
    GoogleアカウントやFacebookでもサインイン可能です。
  2. ウェブサイトを設定
    サインイン後、ダッシュボードが表示されます。
    「Add your first site」または「+Add Site」ボタンをクリックします。
    次に、あなたのウェブサイト名やURLを入力します。
    設定が完了すると、Tawk.toからチャットウィジェットの設定が表示されます。
  3. ウィジェットのコードをコピー
    「Get the embed code」ボタンをクリックします。
    すると、Tawk.toが生成した埋め込みコード(JavaScript)が表示されます。
    このコードをコピーします。
  4. HTMLファイルにコードを追加
    Tawk.toのコードを、あなたのHTMLサイトのタグの直前に貼り付けます。
  5. 例:html
  6. コピーする。
  7. 編集する。
<!-- あなたのページの内容 -->

<!-- Tawk.toのチャットコードをここに追加 -->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/あなたのID/1h〇〇〇〇〇〇〇〇〇';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>

</body>
</html>
  1. 保存してアップロード
    コードをHTMLファイルに追加したら、保存してウェブサーバーにアップロードします。
    ローカルでテストする場合は、ブラウザで直接ファイルを開いて動作確認します。
    サーバーにアップロードする場合は、FTPソフトやサーバー管理ツールを使って更新します。
  2. チャット機能の動作確認
    サイトをブラウザで開き、ページをリロードします。
    画面の右下にTawk.toのチャットウィジェットが表示されているはずです。
    訪問者として自分でメッセージを送って、正しくチャット機能が動作するか確認します。
  3. カスタマイズと設定
    ウィジェットのデザイン変更:Tawk.toのダッシュボードから、チャットウィジェットの色やメッセージの内容、表示タイミングをカスタマイズできます。
    オペレーターの設定:オペレーター(スタッフ)を追加して、営業時間や自動応答を設定できます。

自動応答メッセージの設定方法
自動応答メッセージは、訪問者がチャットを開始した際に、自動的にメッセージを送信する設定です。これを使うことで、オペレーターがリアルタイムで対応できない場合でも、スムーズに対応できます。
手順:
Tawk.to ダッシュボードにログイン
ログイン後、ダッシュボードにアクセスします。
「管理」→「チャット設定」
左側メニューの「管理」をクリックし、その中の「チャット設定」を選びます。
「自動応答設定」
チャット設定ページで、「自動応答メッセージ」や「不在時メッセージ」の設定ができます。
「自動応答メッセージ」を有効にして、メッセージ内容を編集します。
メッセージ内容の編集
例えば、営業時間外に「現在、オペレーターが不在です。後ほどご連絡いたします。」というメッセージを表示させることができます。
保存
設定を保存して、変更を反映します。