Home記事一覧フロントエンドUserlikeを利用してLiveチャットを導入する2019.03.19Userlikeを利用してLiveチャットを導入するUserlikeを利用してGridsomeのデモサイトにLiveチャットを設置します。Panel)では最後にはじめにこんにちは、香港に住んでいるWEBデベロッパーのなかむ(@nakanakamu0828)です。最近ではサービスの問い合わせとしてLiveチャットを利用するケースも増えてきました。今回はUserlikeを利用してGridsomeのデモサイトにLiveチャットを設置したいと思います。Userlike設置するサイトは、以前作成したGridsomeのデモサイトになります。supportWebサイトに問い合わせ用のLiveチャットを導入するためのサービスです。Userlikeを選んだかというとFreeプランでも期間関係なく利用ができるからです。詳細はPricingをご確認ください。Chatsとなります。デモサイトに組み込むので十分な機能ですね。trial"ボタンから新規登録を行いましょう。以下の3ステップのフォーム入力を行ってください。今回はデモサイトとして利用する為、ダミーの情報で登録しました。新規登録が完了すると設定したメールアドレスにメールが届きます。メール本文には、チャットを組み込む為のscriptタグが埋め込まれています。こちらのscriptタグを利用してWebサイトにLiveチャット機能を組み込みます。登録時のメール内にscriptタグの記載があることを説明しましたが、Userlikeのダッシュボードからも確認してみたいと思います。Userlikeにログインしてください。初ログイン時はチュートリアルが起動します。長いので確認するのが手間な方はスキップしてください。ダッシュボードは以下のような画面になります。ダッシュボードからscriptタグを確認するには以下の操作を行い対象ページに遷移してください。以下のようなscriptタグが表示されます。チャットウィジットの日本語化Userlike自体は日本語対応されていないのですが、サイトに組み込むウィジットは日本語化することが可能です。今回は日本語サイトに組み込むので日本語化しましょう。以下の操作を行い対象ページに遷移してください。一覧から対象のWebsiteを選択GENERALのページが表示されます。このページのLangageをJapaneseに変更し、更新することで日本語化されます。GridsomeにUserlikeのjs読み込みを追加それではGridsomeのデモサイトにLiveチャットを配置しましょう。全てのページで読み込むので、src/main.jsにscriptタグの読み込みを追加します。})}完成したLiveチャットは?Liveチャットは、オペレーターのオンライン/オフラインで処理が変わります。それぞれ見ていきましょう。Panelからチャットルームへの入室が可能です。入室が完了するとオンライン状態に変わります。オンライン時のみLiveチャットが可能になります。オフライン(Offline)オペレーターがオフラインの時は、問い合わせフォームになります。Panelからユーザーに返信が可能です。こちらのデモサイトから確認できます。Site最後に今回はUserlikeを利用したLiveチャットを導入しました。Javascriptを読み込むだけなのでとても簡単です。外部サービスを組み込むことになるので、サイトのパフォーマンスは多少劣化します。便利な機能ですので、利用者とコミュニケーションを密に対応していきたいサービスにはメリットが大きいと思います。皆さんも試してみてください。香港在住4年目になるWEBエンジニアのなかむです。現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。顧客は全て日本の企業になります。Posts【技術メモ】CentOS7でrootユーザーのパスワードを変更するちょうどCentOS7の環境を触っていたので、rootパスワードの変更方法を初学者に向けてメモとして残します。今回は、HerokuのClearDBアドオンを利用してMySQLをデータベースとして利用する方法をまとめていきます。2019.07.07unDrawのSVG画像が素敵すぎる無料で利用可能なSVG画像を提供してくれているunDrawが素敵すぎるので紹介します。今回はNuxt.jsで構築したブログにDISQUSのコメントフォームを設置する方法をまとめます。今回はGatsbyJSで構築したブログにDISQUSのコメントフォームを設置する方法をまとめます。2019.06.052019年5月のブログ振り返り2019年5月のブログの振り返りを行っていきます。Blog香港在住エンジニアのなかむが技術情報を発信するためのメディア。Nuxt.jsenvelope-solid。