ブログやホームページに、Slackと連携したウェブチャット機能を簡単に設置できる[smallchat]

 

この記事のザックリした内容
  • smallchat(無料版)の登録方法が分かる
  • smallchat(無料版)とSlackとの連携内容が分かる
  • smallchat(無料版)の設定方法が分かる
  • smallchat(有料版)については書いていません

 

こんにちは。ナガオカ(@boot_kt)です。

 

通販サイトやWebサービスのページなんかでたまに見るんですが、質問があったらチャットで質問してすぐに答えてもらえるアレ

あのチャットが超簡単に設置できるんですよ!!!

もちろん、普通のホームページだろうが、ブログだろうが、WordPresだろうが設置可能でっせ

 

amebloとかFC2とかlivedoorとかの無料のブログでも使えるかどうかは知りません

 

しかもっ!!!

チャットのやりとりはSlackを使うので、とても便利です!!

 

 

 


事前準備(Slackの登録)

事前準備としてSlackへの登録が必要です
Slackへの登録が終わっているものとして、説明を始めます。

この記事ではSlackへの登録方法は書いていませんが、簡単ですよ
事前にSlackに登録しといてね

 

smallchatの登録方法

登録方法も超簡単
メールアドレスとかIDとかパスワードとか、ンなモンの入力は一切ありません!!

超簡単なので図を出しますね。

  1. まずはsmallchatの公式サイトにアクセス
     
  2. smallcha公式サイトのトップページでAdd to Slackのボタンをクリック
    smallchatの登録

  3. チャット応対に使うSlack Teamを選択
    smallchatの登録
  4. Authorizeボタンをクリック
    smallchatの登録
  5. 新規作成するChannel名を入力+Create Channelボタンクリック
    smallchatの登録

  6. 登録完了
    以下のscriptタグを自分のWebサイトのソースコードに貼り付ければOKです
    smallchatの登録

自分のWebサイトのソースコードへの貼り付け方(WordPressの場合)

Webサイトのソースコードを自力で書いている人はやり方はお分かりでしょうから省略します。

ここではWordPressを対象にしますね。

 

ウィジェットを使う場合

  1. WordPressの管理画面を出します
     
  2. 左側のメニューから、外観 → ウィジェット を選択
    wordpressのメニュー

  3. ウィジェット画面で、利用できるウィジェットテキストを使います
    wordpressのテキストウィジェット

  4. そのテキストウィジェットを使用するエリアに入れましょう
    今回はPC:フッター(右)エリアに入れました。
    ※お使いのテーマによってエリア名は違うのでご注意

  5. テキストウィジェットの中に、smallchatのscriptタグを書きましょう
    wordpressのウィジェット
  6. もしもスマホ用のエリアが別にあるのならそこにもscriptタグを書いたテキストウィジェット入れてね
     
  7. こんな風になります
    smallchatをパソコンで見た場合

    smallchatをパソコンで見た場合

    smallchatをスマートフォン(モバイル)で見た場合

    smallchatをスマートフォン(モバイル)で見た場合

 

ね? 簡単でしょ?
要はscriptタグを書けばいいだけですしね

投稿記事 or 固定ページに使う場合

単にscriptタグを書くだけです。

wordpressの投稿画面
記事の画面はビジュアルモードじゃなくてテキストモードなので、普段ビジュアルモードで書かれている方は要注意です。

Slackでの見え方

smallchatの入力内容がslackに通知された

https://my.small.chat が設定画面です。
ブックマークしておきましょう。

 

広告




 

smallchatの設定方法

さて、表示させる方法は分かりました。
次は細かい設定を見てみましょう。

https://my.small.chat にアクセスしてください

1.Behavior

smallchat-behavior

 

1-1.AVATORS

Messge avator configuration
Use Slack user avtar Use Slack team icon
応答者のアイコンとして、ユーザーのアイコンを使います
smallchat-behavior-avatar-user

応答者のアイコンとして、チームのアイコンを使います
smallchat-behavior-avatar-team

 

1-2.VISIBILITY

Hide messenger on specific pages

チャットを表示したく無いURLを入力します
通常は空欄のままでいいはず

 

1-3.OPERATING HOURS

Enable operating hours

24時間チャット対応できるならOFFのままでいいですが、普通はできる時間できない時間がありますよね。

ON(青色になる) OFF(白色になる)
対応可能な時間を曜日別に設定可能
対応不可な時間帯はオフラインを示すメッセージを表示できる
smallchat-offline

24時間対応しっぱなし
Select your timezone

日本の国名と思われるものが無かったため、UTC+9を選択

どなたかご存知なら教えてください
Your online schedule

あなたがオンラインの時間(つまりチャット対応可能な時間)を設定

 

2.Appearance

smallchat-appearance

 

2-1.THEME

Brand color

タイトルバー(と言うのか?)の色
smallchat-brand-color

Text color

タイトルバー(と言うのか?)の文字色

 

2-2.LAUNCHER

Launcher type

チャットウィンドウが開く前の待機状態での表示

Button Icon Tab
smallchat_launch_button smallchat_launch_icon smallchat_launch_tab
Launcher prompt

ButtonかTabの時に出ます。
待機状態の時に、タイトルバーに表示する文字列を入れます。
日本語OKです。

 

2-3.MESSENGER

Messenger prompt

チャットウィンドウを開いた時に、タイトルバーに表示する文字列を入れます。
日本語OKです。

Messenger entry

ユーザーが入力するエリアに表示する文字列
smallchat

No messages prompt

ユーザーが入力するまでのチャットウィンドウに表示しておく文字列
smallchat

Hide team icon

タイトルバーに表示しているSlackのチームアイコンを表示するかしないかを設定

Hide “powered by smallchat” link
有料版のみの機能

おそらく、↓ココを消せるんじゃないかと思います。
smallchat

 

2-4.OFFLINE MODE

Offline greeting

対応時間外の時に表示するメッセージ
smallchat-offline

 

2-5.USER DATA

Collect user name and email

名前とメールアドレスを入力してもらうフォームが表示される
メールでの回答を希望されるお客様が使う事を想定します。

smallchat-collect-mail
Name and email prompt

名前とメールアドレスを入力するフォームに表示するメッセージ

smallchat-collect-mail
Let user dismiss the form

名前とメールアドレスを消すための閉じるボタン
smallchat-dismiss

 

3.Auto Messages

smallchat-auto-messages
有料版のみの機能
自動返信機能だと思われます。

 

4.Contacts

smallchat-contacts
有料版のみの機能

 

5.Embed

smallchat-embed

ここのscriptタグをWebサイトに書いておけばチャットが使えるようになる。

無料版と有料版の違い

有料版は9.99ドル/月なので、さほど高くは無いですね

無料版 有料版
値段 0ドル/月 9.99ドル/月
無制限の会話
無制限の演算子
無制限の顧客
無制限のウィジェットのカスタマイズ
複数のウィジェットとサイト ×
カスタマイズ可能な自動メッセージ ×
電子メール連絡先/エクスポート ×
複数のスラックチーム ×
ホワイトラベルチャットウィジェット ×

参考URLはこれです。
こちらもぜひご参照ください。

 

広告




 

まとめ

お客様からのお問合わせにはメールフォームを使うことが多いと思うんですが、手間がかかって面倒なんですよね。

当然タイムラグがありますし。

何よりメールって届かないことが多々ありますので、これがかなり厄介。

なので、「メール書いてまで問い合わせするの面倒だな・・・やめた・・・」となることも多々あると思います。

それだけ機会損失が発生していますよね。

 

チャットならさすがに届かないということは考えにくいですし、お客様が疑問に思ったらすぐにお問い合わせ頂けるというお手軽さが嬉しい。

 

ただ・・・、お客様がチャットに入力したらすぐに答えないといけないので、運用する際にはそれなりのサポート体制を取る必要があるでしょう。

 

ぜひ使ってみてください。

 

 


1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    Windows/Mac/Linuxを使う現役システムエンジニア&プログラマ。オープン系・組み込み系・制御系・Webシステム系と幅広い案件に携わる。C言語やC#やJava等数多くのコンパイラ言語を経験したが、少し飽きてきたので、最近はRubyやPython、WordPressなどのWeb系を修得中。初心者向けのプログラミング教室も運営中。オンライン・対面・出張等でプログラミングをレッスンします。