こんにちは！今回は、Bubbleで開発したアプリにチャットツール「チャネルトーク」を組み込む方法をご紹介します。
チャネルトークは顧客管理機能も備えたチャットツールです。チャネルトークが提供しているテンプレートコードを使用して簡単にBubbleなどのアプリやサイトに組み込むことができます。
最近ではオンラインショップをはじめ、企業のコーポレートサイトなどでもチャットが組み込まれているケースが多くなってきています。チャットは顧客体験の向上には欠かせないツールと言えそうですね。
本記事を参考に、Bubbleで開発したアプリにチャネルトークを組み込んでみてくださいね！
本記事はこんな方におすすめ
- 簡単に顧客体験を向上させる方法を探している
- Bubbleでチャット機能を実装したいが一から構築するのは面倒
- チャネルトークの実装方法や使用感を知りたい
チャネルトークとは
チャネルトークとは、顧客向けウェブチャット、社内チャット、顧客管理の大きく3機能を備えた、顧客管理と顧客向けチャットの社内運用を一元管理できるチャットツールです。
今回の記事では、顧客向けウェブチャットを立ち上げる「チャットボタン」をBubbleで組み込みます。
チャットボタンの組み込みは、チャネルトークが提供しているテンプレートコードを組み込みたいサイトのHTMLに埋め込むだけで実装できます。もちろんチャットボタンの設置位置や表示する画像もカスタマイズ可能です。
チャネルトークでは、顧客がウェブサイトやアプリから離脱してもチャットに関する通知をSMSやメールで届けることができます。またLINEやInstagram（DM）と連携してチャネルトークでメッセージを送受信することもできるので、顧客とのやり取りのためにLINEオフィシャルアカウントやInstagramの管理ツールも立ち上げてと、いくつものメッセージ管理ツールを併用する必要はありません。ちなみにLINEやInstagramとの連携機能は無料プランで使用できます。
■チャネルトークの料金プラン
チャネルトークの料金プランの特徴は、チャット数やメンバー数による課金がない点です。気兼ねなくコミュニケーションが取れそうですね。なお、無制限でのチャット履歴の保存や顧客データ（会員データ、メールアドレスなど）の閲覧と管理には有料プランの加入が必要になります（14日間無料）。
今回の目標
今回は、以下を目標として2つの実装方法をご紹介します。
- Bubbleで開発したアプリにチャネルトークのチャットボタンを組み込む
なお、今回の実装では Bubbleで有料プランへの加入が必要です。
実装の手順
チャネルトークのチャットを組み込むには、テンプレートのコードをサイトやWebアプリのHTMLに埋め込んでチャットボタンを設置するのが最も簡単です。今回はその方法でBubbleに組み込んでいきますが、テンプレートは以下の２種類があり、それぞれBubbleでの実装方法が少し異なります。ご自身のケースに合わせて最適な方法で実装してくださいね！
- ケース①匿名ユーザーとのチャットとして組み込みたい→実装方法①
- ケース②Bubbleのユーザー情報とチャンネルトークのユーザー情報を統合したい→実装方法②
事前準備
まずはBubbleとチャンネルトークで事前準備を行います。Bubbleでは、まずアプリを新規作成し、実装手順のなかで有料機能を利用するためいずれかの有料プランに加入します（実装方法①…HTMLタグの設定、実装方法②…Page HTML Headerの設定）。
チャネルトークでは、以下のページから新規登録を行います。顧客データ（会員IDやステータス）を確認したい場合は有料プランまたは無料お試しで登録してください。実装方法の確認だけであれば無料プランで問題ありません。
メールアドレスを登録したら、「すぐに始める」ボタンを押下します。
次に、「アカウントの作成」でアカウントの名前やパスワード等を設定します。このアカウント名は、チャットでユーザーとやり取りするとき、あなたのアカウント名として表示されます（登録後変更可）。
アカウントを作成したら、利用規約に同意して新規チャネルを作成します。ホームページURLには、チャネルトークを組み込むBubbleアプリのURLを入力します。
その後、「チャネルの設定」で業種や社員数を登録し、最初の設定は完了です。そのままダッシュボードにログイン後、チュートリアルが始まるのでその中で詳細設定を進めましょう。チュートリアルを完了するまで有料プランの無料お試しを開始できないので、完了させるようにしてください。
ここでは、チュートリアルのなかでもチャットの設定に関する部分（チュートリアルステップ5/7）をピックアップします。チュートリアルから「チャネルのプロフィール設定」を押下して開きます（「基本設定」>「チャネルのプロフィール」からも設定可能です）。
開いたウィンドウで、チャットのロゴやプロフィール、テーマカラーを設定できます。設定したら「保存」ボタンを押下して設定を保存します。
実装方法①
実装方法①は、チャットを立ち上げたユーザーを匿名ユーザーとしてチャネルトークで管理するときの実装方法です。チャネルトークを組み込む最も簡単な方法です。
チャネルトークにログインしたら、ダッシュボードの「基本設定」>「チャットボタンの管理」を開き、「チャットボタンのインストール」を押下します。
さらに「Webにインストールする」>「基本コード」を押下すると、HTML Body埋め込み用のコードが確認できます。コード右上の「コピーする」を押下してコードをコピーします。
コピーできたら、Bubbleの編集画面から「Settings」>「SEO / metatags」タブを開きます。「Advanced settings」>「Script in the body」にコピーしたスクリプトをそのまま貼付します。
これで、アプリ内すべてのページでチャットが立ち上げられるようになりました！
次に、ページを作成します。新規ページを作成して、テキストエレメントを配置してページタイトル（今回は「Bubble Test」としました）を表示します。
それでは、このページにチャットボタンが表示されチャットを立ち上げられるか確認してみましょう！Previewでページを開きます。画面の右下にチャットボタンが表示されていますね！
こちらのボタンを押下すると、チャット画面が立ち上がります。
「チャットをはじめる」を押下すると、チャットのトーク画面が開きました。試しにメッセージを送信してみます。
送信できましたね。さて、ここまでの情報がどのようにチャネルトーク上で管理されているのか確認してみます。チャネルトークにログインしてサイドメニューから「受信箱」を押下して開くと、チャットの履歴が確認できるようになっています。Bubbleからチャットメッセージを送信したユーザーは「アンブレラ 661」と匿名で登録されていますね。
さらに画面右側に表示されているユーザー情報の「もっと見る」を押下してみましょう。すると、詳細なユーザーデータが確認できます。
実装方法①では、チャネルトーク側で自動生成される名前と会員IDでユーザー情報が保存されます。もしチャンネルトークを無料プランで利用している場合は、顧客プロフィールのうち、名前のみを取得します。
実装方法②
実装方法②は、BubbleのUser Typeのデータとチャネルトークのユーザーデータを紐づけてチャットを運用するときの実装方法です。今回は、BubbleのUserのUnique idとname fieldの値でチャネルトーク上のユーザーデータを見分けられるように実装していきます。
それではまず、User Typeにユーザー名を保存する「name field」を作成します。
次に、Bubbleでユーザーのサインアップ機能を実装します。新規でページを作成し、メールアドレス、パスワード、ユーザー名を入力するインプットエレメントと、サインアップワークフローを開始するボタンエレメントを配置します。
次に、ログイン後のマイページを作成します。このページにチャットボタンを表示する想定です。新規でページを作成し、ページ見出しと自分のunique id、nameを表示するテキストエレメントを配置します。
このページにチャネルトークのチャットボタンを埋め込む設定をします。まずはチャネルトークのダッシュボードを開き、「基本設定」>「チャットボタンの管理」>「チャットボタンのインストール」を開き、さらに「Webにインストールする」>「基本コード」を開いたら「会員情報連携用のサンプルコードを表示」のチェックボックスをオンにします。
これで、Bubbleとチャネルトークのユーザー情報を統合するためのコードが用意できました。これをコピーします。
Bubbleに戻って、作成したマイページを押下して設定ウィンドウを開き、Appearanceタブの「Page HTML Header」に先ほどコピーしたコードを貼付します。
Bubbleのユーザー情報を連携できるように貼付したコードを以下の通り変更します。
"memberId": "YOUR_USER_ID"→「Insert dynamic data」を使って"memberId": "Current User's unique id"に変更"name": "YOUR_USER_NAME→「Insert dynamic data」を使って"name": "Current User's name"に変更"mobileNumber": "YOUR_USER_MOBILE_NUMBER", //fill with user phone number "CUSTOM_VALUE_1": "VALUE_1", //any other custom meta data "CUSTOM_VALUE_2": "VALUE_2"の部分を削除（今回は不要なため）
ページの作成と設定が完了したので、サインアップフローを実行しマイページへ遷移するWorkflowを作成します。サインアップページに戻り、サインアップボタンを押下して新規Workflowを作成します。
Step1には「Account」>「Sign the user up」を選択し、EmailとPasswordの値をそれぞれのインプットエレメントの値に設定します。また、name fieldにもインプットエレメントの値を設定できるよう追加します。
Step2には「Navigation」>「Go to page...」を選択し、Destinationに作成したマイページを設定します。
設定が完了しました！サインアップから動作確認していきます。
サインアップページをPreviewで開き、メールアドレス、パスワード、ユーザー名を入力してサインアップします。なお、このページにはチャットボタンが表示されていませんね。
サインアップ完了後、マイページに遷移しました。ページ上部に自分のunique idおよびnameと、画面右下部にチャットボタンが表示されています。
チャットボタンを押下してチャットを立ち上げ、メッセージを送信します。
それでは、チャネルトークのダッシュボードからどのようにユーザーデータが保存されているか確認します。「受信トレイ」を開くと、新規ユーザーからメッセージが届いています。
受信箱の右下にもユーザーデータが表示されていますが、会員IDの詳細を確認したいので左のナビゲーションメニューから「連絡先管理」を押下します。
先ほどのユーザーを確認すると、Bubbleのunique idとnameと同じ値が保存されていますね！ユーザーデータの連携も確認できました。なお実装方法②でも、チャンネルトークで無料プランを利用されている場合は、名前のみの取得となります。
まとめ
今回は、チャネルトークをBubbleで組み込む2つの方法をご紹介しました。いかがでしたか？
実装方法①では、一括で全ページにチャットボタンを組み込むことができますが、Bubble上のユーザー情報と統合して管理することができません。そのため、サービスやプロジェクトの紹介サイトなど、ログインを必要としないサービスでの導入に適した方法と言えます。
一方、実装方法②ではBubble上のユーザー情報と統合して管理することができるので、オンラインショップや会員サービスの問い合わせなどに適した方法と言えます。ユーザー情報とチャット履歴の紐づけを目的としてBubbleで一からチャット機能を構築する必要がないため、大きな開発工数カットにつながるのも嬉しいポイントですね。ただしページごとにテンプレートコードを埋め込む必要があるので、コード埋め込み済みのページをコピーしてページを量産していくのがおすすめです。
