【Bubble】パスワード再設定メールの内容をカスタマイズする方法

こんにちは！EPICs合同会社の大熊です！

今回はBubbleで作ったアプリから送られる、パスワードの再設定メールの本文やリンクなどを自由にカスタマイズする方法について解説をしていきます！

動画解説バージョンはこちら！

実装イメージ

まずはカスタマイズせずにパスワードの再設定メールを送付した場合は下記のようなメールが届きます。

これだとパスワードの再設定メールであることはわからなくはないですが、少しわかりにくいと思います。

こちらのパスワードの再設定メールを下記のように自由にカスタマイズをしてユーザーに届くようにすることが今回の完成イメージです。

では早速、実装方法を解説していきます！

実装方法

1.要素の配置

まずはパスワードの再設定メールの送り先を入力するためのinputと送信ボタンを配置しましょう！

2.ワークフローの設定(step1)

次に送信ボタンにワークフローを設定していきます。

「送信するボタン」のOnly whenに「input’s value is not empty」を設定しましょう。
→こちらはメールアドレスがインプットに入力されていないとボタンを押せないようにするための設定です。

次にStep1の設定です。

まずは「Click here～」→「Account」→「Send password reset email」の順でクリックアクションを設定します。

上記が完了すると下記の画像のような画面が表示されます。

こちらのEmail to resetには「input’s value」を入力し、下部の「Just make token,Don’t send email」にチェックを入れます。

※カスタマイズは不要でパスワードの再設定メールを送りたい場合は、こちらのページで「Email to reset」「subject」「Body」の設定をするだけでパスワードの再設定メールを送ることが可能です。(Just make token,Don’t send emailのチェックも不要)

2.ワークフローの設定(step2)

Step2では「Click here～」→「Email」→「Send email」の順でアクションを設定します。

上記の設定をすると下記の画像のような画面が出てきます。

こちらの各項目の意味は下記です。

To：メールの送付先
sender name：送信者名
cc/Bcc：通常のメールのcc/Bccと同様
subject：メールの件名
Body：本文

基本は「To」は「input’s value」に設定し、「sender name」「subject」は自由に記入して構いません。

ここまで出来たらBodyの設定をするため「rich text editor」をクリックしましょう。

「rich text editor」で本文を入力することで、メールの本文やパスワードの再設定ページに遷移するリンクを自由に設定することが可能です。

こちらにメールの本文として設定したい文章を打ち込みましょう。

今回は本文の最下部「パスワードの再設定は」の後ろに「こちら」の文字を追加し、その部分にパスワードの再設定ページに遷移するリンクを埋め込んでいきます。

リンクを埋め込むためには右上の端のアイコンを選択します。

次にURLの項目には「https:」と入力、Descriptionにはリンクを埋め込みたい文章を入力してください。
→今回は「こちら」という文字にリンクを埋め込みたいので、画像のような設定をしています。

これで一度「Insert」をし、「SAVE」しましょう。

ここまで完了をするとBodyが下記の画像のような表示になります。

そしてリンクを埋め込むよう指定をしたテキストの直前に「URL＝https:」という表記が追加されると思います。

この「URL＝https:」の「https:」の部分のみを消して、Insert dynamic dataで「web site home url 」を入力しましょう。

直後に「reset_pw?reset=」と入力して(直接打ち込み)、続いてInsert dynamic dataで「result of step1」を選択してください。

ここまでの設定が出来たら下記のような設定になっているかと思います。

これで設定は以上です！

最後にプレビューでメールアドレス宛にパスワードの再設定メールの送付アクションを実行してみましょう！

いかがでしたでしょうか？

無事カスタマイズした内容でパスワードの再設定メールが届いているかと思います。

今回の内容は以上です！

今回の記事が少しでも開発力の向上や開発の依頼を検討している皆様のお役に立てておりましたら幸いです。