みなさんこんにちは！ Ryoです！
普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。
今回は以下のように、アプリ内に絵文字のフィードバックのウィジェットを使いする方法を解説していきます。
この機能を扱うことによって、ユーザーに対してストレスなくフィードバックを求めることができます。
では、いきましょう。
プラグインをインストール
まず、Pluginsタブのところから[Emoji feedback widget]と検索します。
すると、以下の画像のようなプラグインが出てくるのでインストールします。
このプラグインは、[emojicom]というWebサービスと連携するためのプラグインとなっています。
emojicomに無料登録
次に、emojicomに無料登録をします。お金は一切かからないのでご安心ください。
以下のURLから登録することができます。
emojicomの画面を開くと以下のような画面になるので、[Get started for free]をクリックします。
そして、必要事項を入力します。
Googleで登録する場合はすぐに完了させることができます。
次に、キャンペーンを作成していきます。
Nameにキャンペーンの名前を、Domainの部分にBubbleのアプリのURLを貼ります。
ただ、Bubbleのアプリをデプロイしておかないといけないみたいなので、テストでは他のURLを使っても大丈夫です。
右の部分にプレビューが表示されているので、それを見ながらカスタマイズしていきます。
カスタマイズできる項目にはEmbed type,Trigger,Show wigetなどがありますが、ここらの設定はBubbleで使う場合は反映されないみたいです。
その下の[Customize]以降の項目では、ウィジェット内のテキストを変更することができBubbleにも反映させることができます。
なのでBubbleではこれらの設定のみをカスタマイズします。
そして、1番下の[Create campain]をクリックします。
そしてEmbedタブに移動し、1番右の[Other]に移動します。
そこにこのキャンペーンのIDがあるので、コピーをします。
そして、そのコピーしたIDをBubbleのプラグインの欄に入力します。
これでemojicomの設定は完了です。
エレメントの設定
次にエレメントを設定していきます。
まずVisual elementの[Emojicom feedback widget]を選択し、画面中央の上部に設置します。
次に、テキストを[Emojicom feedback widget]に配置し、[ご回答ありがとうございました]と入力します。
テキストの[This element is visible on page load]のチェックは外しておきましょう。
ワークフローの設定
次にワークフローを設定していきます。
Workflowタブに移動して、
[Click here to add an event…]→[Elements]→[A emojicom feedback widget feedback is submitted]
と選択します。そして、
[Click here to add an action…]→[Element Actions]→[Show]
と選択します。
そして、エレメントに[Text ご回答ありがとうございました]を選択します。
これで完成です。
では、プレビューで見てみましょう。
上手くいっていれば以下のようになっているはずです。
そしてそれらのフェードバックの内容は、emojicomのダッシュボードにて確認することができます。
あとがき
いかがだったでしょうか？
今回は外部のWebサービスを使ったので、時間がかかったかもしれません。
しかし、Bubbleは外部とのWebサービスと連携することによってたくさんの機能を実装することができるようになるので、ぜひBubbleと連携できるアプリを自ら探してみてください。
今後もこんなプラグインの使い方や応用方法、Bubbleの知っておくと便利な情報などを発信していますのでぜひ他の記事も読んでみてください。
ためになった方はTwitterやFacebookなどで拡散お願いいたします。
それではまた次回の記事でお会いしましょう！！
