![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F2d1b8c905c1d447eb649028ca07253a8%2Fcfa41c4175454deda155a11a33c9318c%2Fthumb-smallchat.jpg&w=2048&q=90&dpl=dpl_8SWrMdzCU8komafoUR9UbcFbWkkm)
更新日
WebサイトにSlackと連携したチャット機能を加えられる【Smallchat】
SmallchatはWebサイトにチャット機能を加えられるWebサービス。類似サービスは他にもありますが、Slackと連携できる点にメリットを感じる方も多くいらっしゃると思います。Webサイトにチャット機能をつけることで、Web接客やリアルタイム接客と呼ばれる、Webサイトでも現実世界の店舗や企業のように質問をすればすぐに受け答えしてもらえるような接客が可能となるでしょう。ECサイトなどで特に重宝できそう!さっそくどんなサービスなのか見てみましょう!
アカウント登録
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/42fc848db0f94ba7914bee16a23b8503/slack.jpg)
まずはSlackのアカウントをお持ちでない方は作成します。すでにお持ちの方はログイン。続いて Slack の新規チームを作成しておきましょう。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/d0490701f8f24c18bfa820674e8df423/smallchat-home.jpg)
Smallchatの Web サイトから「Add to Slack」ボタンをクリックして Smallchat アカウントを登録しましょう。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/20b12327da964511ab19d34a58c6f399/select-team.jpg)
アカウント作成後は先程作成した Slack のチームを選択。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/6ac1e62d568b4eb687e6eb44f4a96a82/authorize.jpg)
「Authorize」ボタンをクリックしてアクセスを許可すると準備完了!
チャット画面の設置方法
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/95f842870677465a9985f7addfeab477/create-channel.jpg)
小文字の英数字、22 文字以内で新規チャンネルを作成します。このチャンネルからユーザーとのやり取りが可能になります。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/f0f9dabd226149ccb397eec244a0d760/smallchat-customize.jpg)
「Appearance」タブから見栄えの変更が可能です。ボタンの色や表示タイプ等を選択。デフォルトではチャット画面に表示されるメッセージが英語なので、ここで日本語に変更しておきましょう。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/ca2c72ab7ac643a292930b5c3a139a88/embed.jpg)
「Embed」タブに表示されるコードをコピー。チャット機能を設置したいページに貼り付ければ完成!
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/2348df1cf91c40d6a423adabe69b4700/button.jpg)
こんな感じで Web サイトの右下にボタンが表示されました!
実際に使ってみよう
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/a61acfa71c034b768eca595190d051c6/chat1.jpg)
この画面からユーザーがチャット画面にコメントをすると…
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/6f49b7d8e9d5490bbc3357c218df3232/smallchat-thread.jpg)
Slack に新規スレッドが作成されます。ここから返信すると…
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/4ed62a66a8af496e9a135d9123ef7bec/chat2.jpg)
チャット画面に反映されていますね!
利用料金
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/abeb62300ce94251b017c3ba5a6b4d3a/price.jpg)
無料で会話数もユーザー数も無制限!ありがたいですね!有料だと自動返信可能となったり、複数の Web サイトに設置できるようになります。まずは無料プランで試してみるといいですね。
様々な選択肢がある中で、より便利に、快適に Web サイトを使ってもらえるよう工夫が必要。チャット機能を取り入れたからといって、ユーザーにメリットがあるかはそのサービスや運営環境にも左右されるでしょう。様々なツールを試しながら最適なものを提供できるといいですね!