Userlikeを利用してLiveチャットを導入する
Userlikeを利用してGridsomeのデモサイトにLiveチャットを設置します。
[ 目次 ]
はじめに
こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。
最近ではサービスの問い合わせとしてLiveチャットを利用するケースも増えてきました。
なので、今回はUserlikeを利用してGridsomeのデモサイトにLiveチャットを設置したいと思います。
設置するサイトは、以前作成したGridsomeのデモサイトになります。
GridsomeについてはGridsomeを利用して簡単なサイトを作成しよう を参照ください。
Userlikeとは
Live chat software for website and mobile support
Webサイトに問い合わせ用のLiveチャットを導入するためのサービスです。
なぜUserlikeを選んだかというとFreeプランでも期間関係なく利用ができるからです。
詳細はPricingをご確認ください。
Freeプランで利用できる機能は
- 1 Operator
- 1 Chat Widget
- Unlimited Chats
となります。デモサイトに組み込むので十分な機能ですね。
Userlike登録方法
公式サイト のトップページの"Start your free trial"ボタンから新規登録を行いましょう。
以下の３ステップのフォーム入力を行ってください。
Step1. 氏名とメールアドレスを入力
Step2. ユーザー名とパスワードを入力
Step3. 企業情報を入力
今回はデモサイトとして利用する為、ダミーの情報で登録しました。
Step4. メール受信
新規登録が完了すると設定したメールアドレスにメールが届きます。メール本文には、チャットを組み込む為のscriptタグが埋め込まれています。こちらのscriptタグを利用してWebサイトにLiveチャット機能を組み込みます。
(ダッシュボードからもscriptタグは確認できます）
Userlikeのダッシュボードからscriptタグを確認
既に登録時のメール内にscriptタグの記載があることを説明しましたが、Userlikeのダッシュボードからも確認してみたいと思います。
まずはUserlikeにログインしてください。
初ログイン時はチュートリアルが起動します。長いので確認するのが手間な方はスキップしてください。
ダッシュボードは以下のような画面になります。
ダッシュボードからscriptタグを確認するには以下の操作を行い対象ページに遷移してください。
- メニューのConfigを選択
- サブメニューのWidgetsを選択
- 一覧から対象のWebsiteを選択
- INSTALL > Javascript Widget Code を選択
以下のようなscriptタグが表示されます。
<script async type="text/javascript" src="//userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/5a66044befa757b2102ef2514520cd2025a9674c2f0522b62ff5e2e2eb29xxxxx.js"></script>
チャットウィジットの日本語化
Userlike自体は日本語対応されていないのですが、サイトに組み込むウィジットは日本語化することが可能です。
今回は日本語サイトに組み込むので日本語化しましょう。
以下の操作を行い対象ページに遷移してください。
- メニューのConfigを選択
- サブメニューのWidgetsを選択
- 一覧から対象のWebsiteを選択
GENERALのページが表示されます。このページのLangageをJapaneseに変更し、更新することで日本語化されます。
GridsomeにUserlikeのjs読み込みを追加
それではGridsomeのデモサイトにLiveチャットを配置しましょう。
全てのページで読み込むので、src/main.jsにscriptタグの読み込みを追加します。
// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api
import '~/assets/tailwind.css'
import 'prismjs/themes/prism-okaidia.css'
import DefaultLayout from '~/layouts/Default.vue'
import Vuelidate from 'vuelidate'
export default function (Vue, { router, head, isClient }) {
Vue.use(Vuelidate)
// Set default layout as a global component
Vue.component('Layout', DefaultLayout)
head.htmlAttrs = { lang: 'ja' }
head.link.push({
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Bree+Serif'
})
// 以下のようにUserlikeの読み込みを追加
head.script.push({
type: 'text/javascript',
src: '//userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/5a66044befa757b2102ef2514520cd2025a9674c2f0522b62ff5e2e2eb29xxxxx.js',
async: true,
})
}
完成したLiveチャットは？
Liveチャットは、オペレーターのオンライン/オフラインで処理が変わります。
それぞれ見ていきましょう。
オンライン（Online）
オペレータはUserlikeのダッシュボードのChat Panelからチャットルームへの入室が可能です。
入室が完了するとオンライン状態に変わります。
オンライン時のみLiveチャットが可能になります。
オフライン（Offline）
オペレーターがオフラインの時は、問い合わせフォームになります。
ダッシュボード（Chat Panel）では
ダッシュボードのChat Panelからユーザーに返信が可能です。
こちらのデモサイトから確認できます。
最後に
今回はUserlikeを利用したLiveチャットを導入しました。
Javascriptを読み込むだけなのでとても簡単です。
外部サービスを組み込むことになるので、サイトのパフォーマンスは多少劣化します。
ですが、とても便利な機能ですので、利用者とコミュニケーションを密に対応していきたいサービスにはメリットが大きいと思います。
是非皆さんも試してみてください。
