How to customize welcome and password-reset emails

In TeleportHQ, the emails your web app sends to members are components you can design: welcome (sent after sign-up), password-reset (sent from the forgot password page) and account-deletion (sent when a member deletes their account). They're in the Components list, in the email-templates → customer folder, and you edit them like any other component. They're sent through your own email provider (SendGrid, Mailgun, MailerSend, Postmark or Resend), which you set once in Project settings → Credentials → Email Providers.

Before you start#

• Authentication must be turned on. TeleportHQ creates the three emails when you turn it on. See How to add sign-up and login to your site.
• An account with an email provider: SendGrid, Mailgun, MailerSend, Postmark or Resend, and its API key (Postmark calls it a server token).
• An email address you're allowed to send from with that provider, for example hello@mybakery.com.

Steps#

1. Design the email#

1. In the left sidebar, click Pages, Components & Tree View.

2. In the Components list, open the email-templates folder, then the customer folder.

   

3. Click welcome (or password-reset) to open it on the canvas. A note at the top left of the canvas says when the email is sent, for example "Sent to a new user right after they create their account, welcoming them and helping them get started."

   

4. Edit the text, images and colors like any component. For example, change the heading to Welcome to Sunny Bakery!. If your project has a company logo when the email is created, TeleportHQ puts it at the top.
5. To insert a personal detail, select a text, click the plug icon next to its content in the right panel, open the email's details (Welcome, Password Reset or Account Deletion) and pick one:
   • welcome: userName, userEmail and siteName (your site or app's name).
   • password-reset: resetUrl (the reset link) and recipientEmail.
   • account-deletion: userName, userEmail and siteName.
6. Click Bind property. The canvas shows a sample value, such as "Jane Cooper", which is replaced by the real one in each email.

Keep the reset link in the password reset email. Without it, members can't reset their password. The link works for 30 minutes.

After a member sets a new password, the other browsers and devices where they were signed in are signed out within about a minute. Signing in with the new password works as usual. A site published before this was added does it from its next publish.

2. Choose who sends the emails#

Account emails go out through your project's email provider, the same one that sends your workflow emails and store notifications.

1. At the bottom of the left sidebar, click the Project settings cog.
2. Under Credentials, click Email Providers. The top says which provider sends your emails, for example "Resend is this project's email provider."
3. Click your provider to open it, for example Resend.
4. Fill in its API Key, the From email (for example hello@mybakery.com) and, if you like, From name (optional) (for example Sunny Bakery).
5. Click Save credentials. If it isn't the project's provider yet, click Use for this project.

The welcome, password reset and account deletion emails go out from the From email saved with your provider, under its From name (optional), unless their workflow step has a sender of its own. Without a From name, they go out under your store's Company Name if you have a store, or else your project's name. A step that still carries noreply@yourapp.com, the stand-in address that sign-in fills in before any provider is set up, sends from your From email instead. Your live site follows when you publish.

See How to choose which email and SMS provider your project sends through.

From the Issues window. If the editor's header shows an issues count, for example 2 issues, click it. In the Issues window, under Missing Credentials, open the email provider's card, fill in its fields and Sender details, and click the save button, for example Save Resend. To use another provider, click Switch to a different email provider. See Why does my workflow show missing configuration or security warnings?.

In the sign-up workflow. In the Workflows panel, open Sign Up Flow and select its Create New User Account step. In the right panel, under Welcome email, Welcome email template picks the email to send ("Leave empty to send no email."), and Email provider and Sender details set who sends it. "Configuring it here also applies to every other email in the project that has no provider yet."

Check that it worked#

• On your published site, create a test account with an email address you can read. The welcome email arrives, with the subject "Welcome to" followed by your site's name.
• On the forgot password page, request a reset for that account. The "Reset Your Password" email arrives with a working Reset password button.
• To test the provider without publishing, test an email step in a workflow. Tests send real emails. See How to test a workflow step.

Troubleshooting#

No welcome email is sent Open Sign Up Flow and check that the Create New User Account step has a Welcome email template. If it's empty, no welcome email is sent. Then check that an email provider is set up, and that the project is published.

The editor shows Missing Credentials for email Your provider's key or sender address isn't saved yet. Follow Choose who sends the emails in this article.

Emails don't arrive Check that the From email is verified with your provider, and look at the provider's own activity log for rejected messages. Every provider refuses emails sent from noreply@yourapp.com: if your provider's log shows that address, publish your site again so the emails go out from your From email.

The email templates are gone Turning off authentication deletes the three account emails. Turn authentication on again to recreate them.

Good to know#

• Older projects may show the emails as Welcome, Password Reset and Account Deletion. They work the same way.
• The account deletion email is set on the Delete Current Account step of the profile page's workflow: under Farewell email, choose Send farewell email and pick the template.
• Provider keys are saved as project secrets and reused by your project's other emails from the same provider. See How to keep passwords and API keys safe (Secrets).
• Form submission notifications are different. TeleportHQ sends those itself, and they can't be redesigned. See How to choose what happens after someone submits a form.