E-mail subscription widget

An email subscription widget is typically a form that collects user email addresses for purposes like newsletters, waitlists, product updates, and more.

In this article, we’ll build our own subscription widget. It will:

• collect user email addresses;
• submit the emails to a backend service;
• send a confirmation e-mail.

As always, we’ll start with an empty flow:

We need to add a view node to display the subscription form:

Let’s create a basic design for demonstration purposes:

For the email input, we must specify a name so that the user’s input can be accessed as a context value in the following nodes.

After the user submits their email, we need to save it. The best way to do this is by using a collect node. The data will be sent to the Widged server and can be found under the Results tab in Studio.

Let’s include the email field in the record, along with a couple of other fields that are available by default for every widget:

After collecting the data, it’s important to thank the user. We can do this by adding a second view node — let’s add it now:

Our widget flow currently looks like this:

But something is missing... Right! We need to send the user an email confirming that their data has been processed.

Let’s add an email node for this purpose:

All that’s left is to configure the node. We want to send the email to the user — and we can use the email address they provided just a few steps earlier!

That’s how easy it is! By the way, you can use HTML in the email content for more advanced formatting.

We’ve just built a fully functional widget for collecting user emails. 🎉 Now all you need to do is publish it and place it wherever you want on your page.

The whole process took less than 10 minutes, required no coding (and no dev team), and you can adjust the behavior at any time to meet new requirements!