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

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

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

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

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次
日本最大級のノーコード開発実績!

①日本最大級の開発実績
②最安30万円。通常の1/10~の低コスト開発
③最短2週間。圧倒的な開発スピード
④高難易度の開発もスムーズ
⑤複数のノーコードツールに対応

EPICsは上記5つの強みを武器に受託開発を行っています。
まずはご相談ください。

実装イメージ

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

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

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

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

実装方法

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」を選択してください。

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

これで設定は以上です!

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

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

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

今回の内容は以上です!

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

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次