ブログのこと

サイトにSlackのチャット機能を無料で簡単に設置することができる「Smallchat」

投稿日: 更新日: 2017年12月27日

今回紹介するチャット機能は現在このブログにも導入しているでででーさん(@d3_dayo) です!

 
おかげさまで時々このブログへも問い合わせフォームからメッセージが飛んできます。
 
メッセージの内容はいろいろですが、私がPCの前にはりついている時ならチャットでくればもっと早くに返信できそうな内容もちらほらとありますし、問い合わせフォームよりもチャットのほうが気軽にメッセージを送れる人もいるのかな?と思い、チャット機能を導入してみることにしました。
 
チャットといえばLINE@でもいいのかもしれませんが、LINEだと自分の素顔や本名がわかる状態で使っている人も多いかと思いますので、匿名性が強い状態でネット上を立ち回っている方にとっては、あんまり手軽にはメッセージ送れないと思うんですよね。
 
お店や会社のブログならともかく…個人ブログのLINE@に対して、友だち登録したいと思わない方も多いのではないでしょうか?
 
あと、ツイッターで繋がっている人ならブログの問い合わせフォームよりもツイッターでリプやDMを送るほうが気軽だとは思いますが、ツイッターを使っていない人もいますからね。
 
というわけで、今回はものすごく簡単な手順で手軽に設置することができる無料のチャット機能「Smallchat」というサービスがあるので、このブログでも試しに使ってみるとともに、導入までの手順を記事で紹介したいと思います!
 
 

スポンサーリンク

完成図

このように、チャット画面を常時サイトの左下 or 右下に表示することができます。
 
・PCでの表示

 
・スマホでの表示

 
 

やること

今回紹介する「Smallchat」を使うためにはSlackというメッセージアプリでアカウントを作成する必要があります。やることを以下で簡潔にまとめると…
 

1. Slackアカウント・チーム作成
2. SlackとSmallchatの連携
3. Smallchatの設定
4. タグをサイトに貼る

 
以上です。
 
 

Slackとは

チャット機能導入の手順を紹介する前に、Slackというメッセージアプリについて簡単な紹介を先にしておきます。
 
いわゆるIT系の企業で働いている方はご存知かとは思いますが、Slackはビジネス向けのチャットサービスです。特にITスタートアップ系の企業から好かれている印象を持ちます。
 
私も仕事の関係で以前から公私共に使っていますが、メールでのやりとりを減らすことができる点や過去ログの検索がしやすい点、それからファイル共有などもしやすい点など、使い勝手は非常に良くて私にとってもお気に入りのチャットツールです。
 
その他、Slackの概要については少し前の記事になりますが、こちらの記事がわかりやすいと思うので貼っておきます。

基本的にはビジネス向けのコラボレーションツール(複数人で使うことを想定にしたツール)なんですが、一人で使っても便利ですし容量の制限などは生じますが無料で使えるプランがあるので、この記事ではSlackの無料版導入からサイトに表示するチャットとの連携まで解説していきます。
 
 

チャットの導入手順

さて、ここからはサイトにチャットを導入するまでの手順を段階ごとに分けて解説していきます。横文字が苦手な方にとっては…既にSmallchatやらSlackといった横文字が飛び交い苦手意識を感じるかもしれませんが、手順を上から順に沿って読んでいけば設置することができるので頑張りましょう!
 

Slackのアカウントを作成する


まずは上記のURLにアクセスし、Slackのアカウントを作成することから始めます。
 

 
アクセスしたらメールアドレスを入力する欄があると思うので、ここにメールアドレスを入力します(以後、ログインアカウントとしても使用します)
 
 
メールアドレスを入力して次に進むと「ワークスペースを新規作成」という画面に遷移するので「ワークスペースを新規作成」を選択します。
 

 
 
最初に入力したメールアドレス宛に確認コードが送られてくるので、メール内容を確認し確認コードをSlackの画面で入力します。
 

 
 
確認コードを入力すると名前を入力する画面になります。
 

 
 
続いてログイン時に使用するパスワードを設定します。
 

 
 
次にSlackの使用目的に関するアンケートページが表示されるので使用目的と人数を選択します(私は下の画像のように選択しました)
 

 
 
次にSlackで使用するチーム名を入力します。考えるのが面倒な場合には会社・お店の名前やブログ名で良いと思います。
 

 
 
最後にSlackで使用するURLを決定します。ブラウザから自分のSlackにアクセスするときにも必要なので、わかりやすいURLにしておくと良いと思います。
 

 
 
最後に利用規約を確認し同意すればアカウントの作成作業は完了です。
 

 
 
次に「招待を送信する」画面が表示されるかと思いますが、とりあえず今回は一人で使うこと想定なので「後で」をクリックしてスキップで問題ありません。
 
以上でセットアップ完了です。これでサイトにチャットを設置するために必要なSlackはもう使える状態になりました。
 
 


スポンサーリンク


SmallchatとSlackの連携


Slackのセットアップが完了したら、次にチャットをサイトに設置するための本体となるSmallchatの設定をしていきます。
 
上記のURLにアクセスして「Add to Slack」をクリックします。
 

 
 
「Add to Slack」をクリックするとSlackの認証画面に遷移してSmallchatとの連携の認証を求められるので「許可する」をクリックします。
 

 
以上の作業でセットアップしたSlackとSmallchatの連携が完了し、サイトに設置したチャットにメッセージが送信されるとSlackで受信できる状態になりました。
 
 

チャットの設定

続いてサイトに設置するチャット自体の設定をしていきます。
 
先ほど認証を許可した時点でSmallchatのチャンネルを作成する画面が表示されるようになったと思うので、チャンネルに付ける名前を入力して「Create Channel」をクリックします。
 

 
 
この時点でサイトに貼り付けるためのコードが表示され貼り付ければチャットを使える状態となりますが、もう少しチャット自体のデザインをカスタマイズしていきたいと思います。
 

 
 

チャットのデザインをカスタマイズ

チャットのデザインはメニューの「Appearance」からカスタマイズすることができます。
 

 
各設定は変更すると右側にプレビューが表示されるので弄ってみるとわかりやすいと思いますが、設定できる内容は以下。
 
・Brand color
チャットバーの色を変更することができる
 
・Text color
テキストの色を変更することができる
 
・Launcher type
サイト上で表示するチャットランチャーの形状を「ボタン」「アイコン」「タブ」の3つから選択することができる
 
・Launcher position
チャットのランチャーを表示する位置を指定することができる(デフォルトでは右ですがこのブログでは左にしています)
 
・Launcher prompt
ランチャーのバーに表示する文言を設定できる
 
・Messenger entry
チャット入力欄に文字を入力していない時に表示する文言の設定
 
・No messages prompt
チャット未送信の段階でチャット画面の中央に表示されるこのチャットに関する説明文
 
・Hide team icon
チャットのバーにSlackのチームアイコンを表示するかの設定(このブログでは非表示)
 
・Offline greeting
オフライン時にメッセージが送信された場合に自動返信する内容
 
・Collect user name and email
ユーザーの名前とメールアドレスを収集するかどうかの設定(ONの場合、チャットに名前とメールアドレスの入力欄が表示されるようになります)
 
・Name and email prompt
名前とメールアドレスの入力に関する説明文を設定できる
 
・Show form after user sends a message
名前とメールアドレスの入力フォームを表示するタイミングをユーザーが最初のメッセージを入力した後にする
 
・Show form when user opens chat
名前とメールアドレスの入力フォームを表示するタイミングをユーザーがチャットを開いた時にする
 
・Require name and email
名前とメールアドレスの入力フォームにユーザーが操作できる非表示ボタンを表示しない
 
・Let user dismiss the form
名前とメールアドレスの入力フォームにユーザーが操作できる非表示ボタンを表示する
 
 
以上が「Appearance」で設定できる項目の内容になります。その他「Behavior」のタブではチャットに表示するアイコンや営業時間を設定することができます。
 
ここで営業時間を設定しておくと、時間外にメッセージが送信された際にはチャット上でオフライン時のメッセージが自動応答で送信されるようになります。
 

 
 

サイトへの設置

設置方法は非常に簡単でメニューの「Embed」に表示されているコードをサイトに貼り付けるだけです。
 

 
特定の記事のみチャットを表示したい時は、記事の一番下などにペースト、サイト全体で表示したい時は常に表示されているサイドバーのウィジェット内などにペーストすればOKです!
 
 

まとめ

最初のアカウントを設定する作業以外はとにかく簡単に…そして無料でチャットをサイトに設置することができます!
 
受信したメッセージはこのようにSlackの画面上で確認・返信をリアルタイムですることができます。
 

 
 
しかもこのSlack、スマホでもアプリで手軽に使うことができます。

Slack

Slack
無料
posted with アプリーチ

 
受信があればスマホで通知してくれるので、外出先でも問い合わせに対応することができます。
 
特にお店のサイトやブログを運営している方にはお客様をフォローするツールとしてオススメしたいですね!サロンの予約状況確認や最新の在庫状況確認など、さまざまな局面で活用することができそうです!

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。
あなたにオススメ