milkcocoa はじめてのホームページ作成 ホームページ作成

ホームページに無料でチャット機能を搭載する方法 - 新米web担のためのホームページの作り方 | 番外編

投稿日:2018年1月24日 更新日:

ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。今回は番外編としてホームページに無料でチャット機能を追加する方法をご紹介します。

 

 

チャット機能の概要とメリット

チャット機能とは、閲覧中のホームページ上で、その会社の担当者とページを閲覧中のユーザーが、リアルタイムでメッセージを送りあうことのできるコミュニケーション・ツールです。ホームページの右下などに配置されていることが多いと思います。

近年、多くの企業がホームページにチャット機能を搭載するようになっていることにお気づきの方も多いと思います。ではなぜ、多くのホームページでチャット機能を搭載するようになっているのでしょうか?

それには2つの理由があります。

 

 

1.ユーザーにとって便利

近年、多くのネットユーザーがコミュニケーション・ツールとして、SNSを活用しています。そのようなユーザーにとってチャットは身近なものです。ユーザーが、あなたのホームページを見ていて「質問したい」と思ったときにすぐにチャットでやり取りができると、とても便利なのです。

電話による問い合わせの場合、ユーザーからしてみると、電話をかけた相手がどんな人かわからない訳ですし、「尋ねたいことをうまく説明できなかったらどうしよう」などと考え、尻込みしてしまうことが多いのも現状です。

一方で、メールや「お問い合わせページ」などを通して質問を送る場合、ユーザーはメールアドレスなどの個人情報を相手側に送る必要があったり、質問をしても返信がすぐに来ないなどの理由で、「ちょっと聞きたい」という思いがあっても、なかなかメールを送ってくれません。

その点チャットであれば、リアルタイムでユーザーとコミュニケーションを図ることができ「ちょっと聞いてみたい」と思ったその時に、メッセージを送ってくれるのです。

 

 

2.企業側にもメリットあり

ユーザにとって使いやすい、つまり「ちょっと聞いてみたい」ことをチャットで送ってくれることは、企業側にとってもメリットとなります。それだけより多くの人に自社や自社の製品についてPRする機会になるからです。

また、企業側が電話では対応がスムーズにできなかったりする場合でも、チャットであれば少し考えながら文章をまとめて答えることができます。一方、メールによる返信のように過度に文章を整える必要もありません。

もちろん、ユーザーはチャットで質問を送った時できるだけ早く返信が来ることを期待していますので、そのような対応ができるように社内の体制を整えておくことは重要です。もしすぐにチャットで対応できないときには、メッセージを送ってくれたユーザーに対して自動的に返信メッセージを送る機能も備わっている場合がありますので活用できます。

 

 

無料のチャットサービスを活用する

ウェブページにチャット機能を搭載する方法はいろいろあるのですが、既存のチャットサポートシステム・ツールとして提供されているものを活用する方法がベターかと思います。その場合、ややこしいサーバーの設定など不要で、基本的にはHTMLファイルに数行コードを挿入するだけで使用可能です。

有料のサービスが多い中、機能は若干制限されるものの完全無料で活用できるサービスもありますので、今回はそれをご紹介します。概要としては、Milkcocoa Chat Supportという無料のサービスを活用したものです。

いくらか無料版では機能が制限されているものもありますが、中小企業でのチャット機能の使い始めとしては良いと思います。

Milcocoaのデモページ

 

 

手順① Milkcocoaに無料登録する

以下のサイトからアカウントを作成しましょう。もちろん無料です。必要なのは登録用のメールアドレスだけです。登録後すぐに認証メールが登録したメールアドレスに届きますので、そのリンクをクリックすれば登録完了です。

Milcocoaの登録ページ

 

 

手順② Milkcocoaのアプリを新規作成する

ログイン後「新しいアプリを作る」をクリックすれば、新しいアプリを作れます。無料バージョンでは6つまで作成できるようです。(以下の画像では、サンプルとして Chat という名前でアプリを作成しています。アプリ名は自由です。)

 

 

手順③ 「Chatの概要」から必要なIDを入手する

新しく作成したアプリをクリックすると以下ページが表示され、そこからIDを確認できます。これが、チャット機能を追加するウェブページとMilkcocoaのチャットサポートを関連付けるものになります。 その後の設定は、青い矢印部分にある説明に従って操作してください。

 

 

手順④ チャット機能を追加するページの HTML ファイルにコードを入力する

チャット機能を追加したいホームページのHTMLファイルの head 部分に以下のコードを記入してください。チャットバーを表示するためのスタイルシートがMilkcocoaから提供されています。自作することも可能ですが、提供されているもので十分いい感じに仕上がります。

 

次に、以下のコードをHTMLファイルの body 部分に記入しましょう。「あなたのapp_id 」の部分には、登録した際に提供されたIDも記入してください。ちなみに「data-meson」はオンラインの時に表示されるもの、「data-mesoff」はオフラインの際に表示されるメッセージです。使用条件に合うように自由に調整できます。

また「data-color」の部分でチャットバーの色を変更できます。ただし、色は(blueorangeblackgreen)の4色のいずれかです。(この配色を4色以外に変更したい場合は、スタイルシートをご自身で調整していただく必要があります。)

 

 

手順⑤ 動作確認

チャット機能を追加したHTMLファイルをサーバーにアップし動作を確認してみましょう。問題なく設定できていれば、ホームページのほうにはチャットバーが表示されるようになっているはずです。

またMilkcocoaの以下の管理画面から、チャットのやり取りができるようになっているか確認してください。その他のMilkcocoaの操作方法については以下のブログを参考にしてください。

Milcocoaの操作方法

 

 

まとめ

以上の方法でチャット機能をホームページに追加することができたと思います。 Milkcocoa以外にも無料のチャットサービスを提供しているところはあるのですが、いくらか送受信がうまくできないケースもありますので、動作を確認してから導入されることをおすすめします。

-milkcocoa, はじめてのホームページ作成, ホームページ作成

Copyright© コアースのブログ , 2019 All Rights Reserved.