シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
注目記事ピックアップ
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
share0
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
share0
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/07/31 18:50

コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!

crisp-01
どうも、まさとらん(@0310lan)です!

今回は、Webサイトに誰でも簡単に「チャットサポート」を導入できるWebサービスをご紹介します。

HTML内に専用のコードを貼り付けるだけなので難しい知識は不要のうえ、ブラウザの管理画面からユーザーを一元管理できるので非常に便利ですよ。

【 Crisp 】
crisp-02

「Crisp」の使い方!

それでは、実際に「Crisp」を使いながら、どのようなサービスなのかを見ていきましょう!


まず最初に、サイトへアクセスしてトップページにあるボタンをクリックします。
crisp-03

「ユーザー登録」画面になるので、必要事項を入力!
crisp-04 メールアドレスやパスワードを入力するだけなので簡単です。


次に、これから「チャットサポート」を導入したWebサイトのドメインを入力します。
crisp-05 例えば、WebサイトのURLが「https://sample.com」であれば、「sample.com」の部分だけを入力すればOKです。

最後に、利用プランの選択があるので、今回は「無料プラン」を選択しておきましょう。


すると、自分専用の「ダッシュボード」画面になるので、まずは以下のボタンをクリックします。
crisp-06

次に、「HTML」をクリック!
crisp-07

ここに表示されたコードをコピーしましょう。
crisp-08

そして、WebサイトのHTML内にある「headタグ」に、先ほどコピーしたコードを貼り付けます!
crisp-09 「Crisp」の導入はこれで完了です!


Webサイトを見てみると、画面右下に「チャットサポート」用のアイコンが表示されているが分かります。
crisp-10

アイコンをクリックすると、すぐにでもユーザーとチャットでコミュニケーションができるようになります。
crisp-11 「Crisp」は海外サービスですが、自動で「日本語」にも対応してくれるので安心ですね。


チャットでコミュニケーションしよう!

さて、「Crisp」を使ったチャットについて詳しく見ていきたいと思います。

サイトに表示されたアイコンをクリックすると、「チャットウィンドウ」が出現するので何か文字列を入力してみましょう。
crisp-12

「こんにちは!」と入力してエンターキーを押します。
crisp-13 すると、ユーザー側はサイト管理者からの「返信待ち」状態になります。


管理者側は、ユーザーからのチャットがあったことの通知を受け取れるので、自分のダッシュボードを見ると「返信待ち」のユーザーがいることが分かります。
crisp-14

そのユーザーをクリックすると、チャットの内容が画面右側に表示されます。
crisp-15

また、ユーザーの「属性情報」も表示されます。
crisp-16 ユーザーが何のブラウザを使っているのか? どの国・地域からアクセスしているのか?…などの情報を即座に把握することが出来るので便利です。


管理者側は、画面下のチャットボックスから返信を行うことができます。
crisp-17

返信を行うと、リアルタイムにユーザー側のチャットウィンドウにも表示されるので、コミュニケーションができるようになるわけです。
crisp-18

ちなみに、チャットウィンドウでは、テキストだけでなく「絵文字」「GIF」なども利用可能です。
crisp-19 画像ファイルのアップロードにも対応しているので、さまざまな用途に利用できるのは魅力的ではないでしょうか。


便利な機能を使ってみよう!

「Crisp」は多彩な機能が搭載されているのですが、なかでもオススメの機能をいくつかご紹介致します!

例えば、ダッシュボードの「① 設定」から「② サイト設定」を選択してみましょう。
crisp-20

ここでは、サイトに表示される「チャットウィンドウ」をカスタマイズすることが可能です。
crisp-21 カラーテーマや、初回の表示メッセージ、言語設定、アイコンの表示位置…など、さまざまな項目を好きなように設定できます。

また、デフォルトの設定だとユーザーがメッセージを入力すると「メールアドレス」を尋ねる表示になるのですが、これをOFFにすることも可能です。


「Crisp」はWebサービスなのですが、PC・スマホ・Slack向けの専用アプリも用意されています!

【Crispアプリケーション】
crisp-22 特に、スマホアプリは非常に便利で、ユーザーからの問い合わせがあったら通知が入るうえ、そのままチャットも可能なので素早い対応ができるようになります。


ダッシュボードには「マップ表示機能」もあります!
crisp-23 これは、ユーザーがどの国・地域からアクセスしているのかを可視化してくれる機能になります。


さらにユニークな機能として、チャット画面上でゲームを遊ぶことも可能です!
crisp-24 管理者側からの返信がしばらくない状態が続くと、ゲームで遊んで時間を潰すかどうかを聞かれます。

そこで、「遊ぶ」ボタンをクリックすると、そのまま「Flappy bird」のようなタップゲームが起動して遊べるようになるのです。


このように、「Crisp」にはさまざまな機能が搭載されているのですが、有料オプションを利用することで、自動応答メッセージ、ビデオ通話、アナリティクス、Facebookメッセンジャー連携、SMS連携…など、さらに高度なチャットサポートを実現することも可能です!


おまけ

最後に、チャットボットをプログラミング不要で簡単に作って公開することができるサービスも合わせてご紹介しておきます!

【ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!】
crisp-25 「Motion AI」は、チャットボットの開発環境やサーバーなどがすべて含まれており、ブロックを繋げていくだけで構築できる手軽さが特徴的なWebサービスです。

ユーザーの回答に合わせて、さまざまな条件分岐を簡単に作成できるので、サイトのFAQとして使ったりイベントの告知やフォームの代替など、幅広い用途で使えるスグレモノですよ。

ご興味ある方は、ぜひ一読くださいませ!


まとめ

今回は、「Crisp」の基本的な使い方についてご紹介しましたが、ほとんどの機能は無料で利用できるので気になった方はぜひ試してみてください!

Webサービスだけでなく、ブログや個人サイトなどにも利用できると思いますので、ぜひみなさんもチャットサポートを有効活用してみてください!


<参考>
「Crisp」公式サイト


written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る