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

この記事のザックリした内容

smallchat（無料版）の登録方法が分かる
smallchat（無料版）とSlackとの連携内容が分かる
smallchat（無料版）の設定方法が分かる
smallchat（有料版）については書いていません

こんにちは。ナガオカ（@boot_kt）です。

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

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

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

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

しかもっ！！！

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

Contents

➊ 事前準備（Slackの登録）
➋ smallchatの登録方法
➌ 自分のWebサイトのソースコードへの貼り付け方（WordPressの場合）
- ウィジェットを使う場合
- 投稿記事 or 固定ページに使う場合
➍ Slackでの見え方
➎ smallchatの設定方法
無料版と有料版の違い
参考URLはこれです。こちらもぜひご参照ください。
まとめ
- こちらの記事もあなたにオススメです！

初心者向けのプログラミングレッスンをしております。プログラミングを始めてみたい方、まずはお気軽に無料体験をお試しください！

Scratch（スクラッチ）は全くの初心者でも気軽に楽しく学べるプログラミング環境です。お子さまから大人の方までプログラミングを楽しみたい全ての方にオススメです！

➊ 事前準備（Slackの登録）

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

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

Slack

Slack: Where work happens

Slack brings all your communication together in one place. It’s real-time messaging, archiving and search for modern teams.

➋ smallchatの登録方法

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

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

まずはsmallchatの公式サイトにアクセス

small.chat

122 shares

29 users
Smallchat
Smallchat is an easy, flexible Slack Integration for chatting with visitors to your site.
smallcha公式サイトのトップページでAdd to Slackのボタンをクリック
チャット応対に使うSlack Teamを選択
Authorizeボタンをクリック
新規作成するChannel名を入力＋Create Channelボタンクリック
登録完了
以下のscriptタグを自分のWebサイトのソースコードに貼り付ければOKです

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

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

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

ウィジェットを使う場合

WordPressの管理画面を出します
左側のメニューから、外観　→　ウィジェット を選択
ウィジェット画面で、利用できるウィジェットはテキストを使います
そのテキストウィジェットを使用するエリアに入れましょう
今回はPC：フッター（右）エリアに入れました。
※お使いのテーマによってエリア名は違うのでご注意
テキストウィジェットの中に、smallchatのscriptタグを書きましょう
もしもスマホ用のエリアが別にあるのならそこにもscriptタグを書いたテキストウィジェット入れてね
こんな風になります

smallchatをパソコンで見た場合

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

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

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

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

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

➍ Slackでの見え方

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

➎ smallchatの設定方法

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

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

１．Behavior

１－１．AVATORS

Messge avator configuration

Use Slack user avtar	Use Slack team icon
応答者のアイコンとして、ユーザーのアイコンを使います	応答者のアイコンとして、チームのアイコンを使います

１－２．VISIBILITY

Hide messenger on specific pages

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

１－３．OPERATING HOURS

Enable operating hours

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

ON（青色になる）	OFF（白色になる）
対応可能な時間を曜日別に設定可能対応不可な時間帯はオフラインを示すメッセージを表示できる	24時間対応しっぱなし

Select your timezone

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

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

Your online schedule

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

２．Appearance

２－１．THEME

Brand color

タイトルバー（と言うのか？）の色

Text color

タイトルバー（と言うのか？）の文字色

２－２．LAUNCHER

Launcher type

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

Button	Icon	Tab

Launcher prompt

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

２－３．MESSENGER

Messenger prompt

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

Messenger entry

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

No messages prompt

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

Hide team icon

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

Hide “powered by smallchat” link

有料版のみの機能

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

２－４．OFFLINE MODE

Offline greeting

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

２－５．USER DATA

Collect user name and email

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

Name and email prompt

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

Let user dismiss the form

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

３．Auto Messages

有料版のみの機能

自動返信機能だと思われます。

４．Contacts

有料版のみの機能

５．Embed

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

無料版と有料版の違い

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

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