目次
概要
Bubble開発のプロトタイピングにおいて、ユーザーの不満点や要望を吸い上げるためのチャット機能を用意しておくと非常に便利です。管理者と複数のユーザー間のチャット機能を作成し、さらにSlackと連携することで管理者側にチャットの受信通知がくるようにします。本記事では、BubbleとSlackの連携について解説します。
本テーマは３部構成となっています。エレメントの設置についてはこちらをご覧ください：Bubble開発のプロトタイピングに便利！【その１】
用意するアカウント
引き続き以下３つのアカウントを使用します。APIを使用するため、Bubbleは有料プランが必須です。（詳しくはこちらをご覧ください：Bubbleの料金は？）
- Integromat（https://www.integromat.com）
- Bubble（https://bubble.io）
- Slack（https://slack.com/intl/ja-jp/）
作成手順
１．Webhookモジュールの設定
“Webhooks – Custom webhook”モジュールから始めます。
Webhook > Addから任意の接続名称を入力し、”Save”をクリックします。
表示されたURLは後ほど使うので、コピーしておきます。
２．Bubble – API Connectorの設定
BubbleのSettings > API > Public API endpointsから、”Enable Workflow API and backend workflows”, “Enable Data API”のチェックをします。
送信するデータタイプにチェックをします。
BubbleのPluginsタブから、”API Connector”プラグインをインストールします。
“Add another API”をクリックし、以下の通りに各項目を設定します。
- Use as : “Action”を選択
- Data type : Text
- メソッド：POST
- URL : IntegromatのWebhookでコピーしたURLを貼り付ける
- Body type : Form-data
- Parameters : “Key”にメッセージ情報（本文および問い合わせたユーザーのメールアドレス）のData fieldを指定し、”Value”は適当な値を入力
- Private : チェックボックスを外す
“Initialize call”をクリック
Initializeが完了。IntegromatのWebhookも表示が変わります。
これでAPI Connectorの設定は完了です。
３．Slackモジュールの設定
Integromatのシナリオに、”Slack – Create a Message”モジュールを追加します。
“Enter a channel ID or name”を”Enter manually”から”Select from the list”に変更します。
“Public channel”でチャット受信を通知したいSlackチャンネルを指定します。
“Text”で通知文を設定します。本記事では問い合わせユーザーのメールアドレス、およびメッセージ本文を通知します。
“OK”をクリックします。
これで、Bubbleから受け取ったデータをslackに通知する準備ができました。
まとめ
本記事では、BubbleとSlackの連携について解説しました。いよいよ最後の記事ではBubbleのワークフローを設定し、slackへの自動通知つきチャット機能を完成させます。
