Skip to main content

What widgets are and how to use them

In this article, you'll learn what widgets are, how they work in Stripo, and how to use them to create interactive email content.

Written by Viktoriia Nedohybchenko

Creating interactive email content often involves multiple configuration steps. To simplify this process, Stripo provides widgets that let you quickly add interactive elements to your emails and customize them using simple AI prompts.

What is a widget and how to add it?

A widget is a reusable email component that combines design, functionality, and configuration into a single module. It allows you to create interactive email content without manually adjusting multiple settings, and the AI Assistant applies the changes based on your instructions.

Stripo provides a collection of interactive widgets to help you engage recipients in different ways. Whether you want to collect feedback, run a quiz, or add a fun interactive experience, you can choose the widget that best fits your campaign. The following widgets are currently available in Stripo: Binary Voting, Scratcher, Flip Card, Puzzle Quiz, Quiz, Poll, NPS Survey, Multiple Choice Survey, Magic Ball, Fortune Cookie, Shake It, Find Differences, and Name Match.

To find widgets, first open the Structures & Modules tab:

Next, select the Widgets category to view the available widgets:

Scroll down the sidebar to browse all available widget types. To demonstrate how widgets work, let's use the Fortune Cookie widget as an example. This widget adds an interactive element to your email, allowing recipients to click the fortune cookie and reveal a prediction:

Fortune cookie 2 animation

To add it to your template, simply drag and drop the widget into the desired structure. Then, click the widget to open the AI Assistant, where you can send commands to customize its content and appearance:

By default, the AI Assistant displays several suggested prompts to help you customize the widget. For the Fortune Cookie widget, you can view editable settings, hide it on mobile view, rewrite the prediction, change button styles and labels, or replace the default cookie design with your own artwork.

Let's update the button labels to see how it works. When you click the Update button labels, the AI Assistant automatically sends the corresponding prompt and asks for your brand voice and campaign theme. Based on this information, it generates button labels that match your email.

If you already have specific text in mind, you can enter it directly instead of providing your brand voice and campaign theme. The AI Assistant will then update the button labels using your custom text.

In this example, we provided the brand voice and campaign theme, and the AI Assistant generated new button labels accordingly:

Now, let's update the color and border-radius of the button. The AI Assistant will apply it to the button automatically:

The same approach applies to any other widget settings. Simply describe the changes you'd like to make, and the AI Assistant will update the widget accordingly.

Once you've customized the widget, you can save the container or structure as a module and reuse it in your other templates:

Email client compatibility

Widgets allow you to create interactive email elements powered by AMP for Email (Accelerated Mobile Pages), a technology that enables recipients to interact with email content directly in their inbox without opening a web page. Since AMP isn't supported by every email client, Stripo automatically generates the appropriate version of each widget for different email clients.

For email clients that support AMP for Email, such as Gmail, Yahoo Mail, AOL, FairEmail, and Mail.ru, recipients will see the fully interactive version of the element.

For email clients that don't support AMP but do support kinetic HTML (HTML enhanced with CSS-based interactivity), such as Apple Mail and Samsung Mail, Stripo automatically creates a kinetic HTML version of the module. For email clients that don't support either AMP or kinetic HTML (for example, Outlook), Stripo creates a fallback version, ensuring that recipients can still view the content correctly, even though the interactive functionality isn't available.

Important to note! To ensure your AMP emails work as expected, it's important to follow the recommended testing and export process. For detailed instructions, see our Testing and Exporting AMP Emails article.

Did this answer your question?