AI widgets _ Controlling interactive email elements through chat
today

AI widgets: Controlling interactive email elements through chat

Oleksii Burlakov
Oleksii Burlakov Content writer at Stripo

Summarize

ChatGPT Perplexity
Table of contents
  1. Why this project was created
  2. How AI widgets work
  3. Generating quizzes, polls, and interactive elements
  4. RSS-based email digest generation
  5. Moving widget code into your email
  6. Replacing traditional configuration panels with chat
  7. Wrapping up
1.
Why this project was created

Interactive elements have long been part of email marketing. Polls, quizzes, scratch cards, and other mechanics help turn a static message into something recipients can interact with. We have also published guides showing how to add these experiences to emails using AMP, kinetic techniques, and fallback layouts.

These approaches work well, but they often require working directly with code. Marketers need to copy HTML, adjust parameters, and insert blocks into the correct part of the email structure. Even when the result is powerful, the process can be technical and time-consuming.

This is where the idea behind AI widgets started.

Why this project was created

Interactive elements can increase engagement in email campaigns. Scratch cards, quizzes, polls, and similar mechanics invite the recipient to interact with the message instead of only reading it.

The difficulty appears during creation and maintenance. Each interactive component usually requires its own configuration logic, parameters, and editing interface. Even if the final widget looks simple, setting it up often involves working with HTML, adjusting configuration values, and placing the correct code inside the email structure.

In many cases, teams also need to build a dedicated editing panel for every new component. This increases development time and makes scaling difficult. Each component behaves differently, uses different settings, and requires its own documentation. Teams must explain how the component works, how it should be configured, and what can break it.

Custom code also creates another problem. Interactive modules are easy to break if the configuration is changed incorrectly. As a result, teams often need extra testing before sending the email. Over time, knowledge about how these components work may be lost if the original developer is no longer involved. This makes maintenance slower and discourages teams from using advanced interactive mechanics.

In several previous guides, we showed how to build AMP and kinetic interactive elements step by step. These tutorials remain useful for teams that want to reproduce interactive emails manually or use them in other editors.

You might also like

An easy-to-follow guide on making an interactive Hidden Objects gameAn easy-to-follow guide on making an interactive Hidden Objects game

Still, this workflow has clear limits. Creating and maintaining interactive modules requires technical knowledge, time for configuration, documentation, testing, and ongoing support. Even small changes may require developer involvement.

Instead of expanding the editor with a separate configuration panel for every widget type, we started exploring another approach. What if the editor could generate and configure interactive elements based on simple instructions?

This idea led to the concept behind AI widgets. Instead of asking the user to configure every parameter manually, the Assistant interprets a request, prepares the configuration, and produces a working interactive element that can be placed inside the email.

The goal is not to replace existing interactive techniques. The goal is to make them easier to create, maintain, and scale inside the editor.

Widget Assistant showcase

You can ask a widget in plain language and then refine it with simple instructions such as updating text, adjusting colors, or changing button size. You do not need to know how the configuration works internally. You describe the change, and the Assistant applies it.

How AI widgets work

To understand the idea in practice, it helps to look at the basic workflow behind AI widgets:

  1. You request a widget (for example, a scratch card).
  2. The Assistant connects to the service that creates that widget.
  3. It reads the configuration options that service supports.
  4. It prepares a valid configuration based on your request.
  5. It sends the request to the service.
  6. You can insert the finished widget into the editor.

Widget Assistant showcase with scratch card

The key principle here is the separation of responsibilities. The editor remains focused on placing and arranging content, while the Assistant handles configuring the interactive element.

Instead of navigating through multiple controls, fields, and nested settings, you start with a simple request such as “create a scratch card.” The Assistant prepares the configuration and returns a working widget that can be edited further through the same chat interaction.

Widget Assistant scratch card result

Modifying widgets using high-level commands

Once a widget is in the editor, you continue working with it through chat. There is no switch to a separate settings panel. You simply describe what you want to change.

You can:

  • change the text;
  • adjust button size;
  • change a color using a hex code;
  • translate content into another language;
  • add or remove answer options
  • change the image.

For example, you can paste a hex value like #AAD000 and ask to apply it to the button or text. You do not need to know how that property is named in the widget configuration. The Assistant maps your request to the correct parameter, updates the configuration, and refreshes the widget in the editor.

The same applies to structural edits. If you ask to make the button larger or replace a phrase with a new one, the Assistant keeps the rest of the widget intact and modifies only the requested part. You stay at the level of intent. The Assistant handles the underlying configuration and applies changes automatically.

Widget Assistant scratch card edits

Generating quizzes, polls, and interactive elements

To see how this approach works in practice, the AI Widget Assistant was used to generate several types of interactive elements directly through chat.

The Assistant was able to generate:

  • scratch cards;
  • polls with Yes/No and multiple answer options;
  • question-based widgets, such as “Do you know Ukraine?”;
  • simple interactive game formats.

You can start with a broad request such as “create a quiz about Ukraine.” The Assistant structures the request into clear questions and answer options. From there, you can refine the result directly in chat.

You can:

  • add more answers;
  • change wording;
  • translate the content;
  • adjust the layout.

Each refinement triggers a configuration update and a refreshed widget in the editor. You are not rebuilding the element from scratch every time. You are iterating on it with short, direct instructions.

Widget Assistant showcase with quiz

RSS-based email digest generation

Interactive widgets are not limited to games or polls. The same approach can also be used to generate structured content blocks, such as newsletter digests built from RSS feeds.

The Assistant was used to create an email digest from an RSS source. Instead of manually copying articles and arranging them inside the email, the Assistant builds the block automatically.

The workflow looked like this:

  1. Provide an RSS feed.
  2. Optionally specify a topic filter, for example, AI-related content.
  3. The Assistant parses the feed.
  4. It filters and structures the content.
  5. It prepares the configuration for the digest service.
  6. The ready digest widget is inserted into the email.

You can also request changes after the first version is generated. For example, you can ask to reorganize the digest into a different layout or refine the selection.

The parsing step takes some time, since the Assistant needs to retrieve and process the feed. The result is a structured newsletter block that is already formatted and ready for further edits.

Widget Assistant RSS

Layout control using predefined modules

The system works with predefined content modules that act as building blocks inside the editor.

In the demo, these included:

  • image on the left;
  • image on the right;
  • product card;
  • title block.

The Assistant combines these modules into different layouts based on your request. It can generate:

  • a chess layout with alternating images;
  • a compact format;
  • a two-column grid;
  • automatic adjustments if items do not fit evenly.

You can change the layout using short instructions such as “Make it chess-style” or “Show two columns.” The Assistant regenerates the structure using the available modules and updates the widget in place. You do not need to manually rearrange blocks or duplicate sections.

Moving widget code into your email

To demonstrate how this works in practice, let’s use the RSS widget created in the previous example.

Even when a widget is generated outside the editor, you can still transfer it into your email using HTML. This approach allows the same interactive or dynamic content to be inserted not only into the Stripo editor, but also into other email editors if needed.

Below is the process for moving the generated RSS widget into an email template.

Here is the step-by-step process shown:

1. Choose your widget from the showcase.
In the widget interface, open the HTML tab next to Preview.

2. Click the button to copy the full HTML code.

Widget HTML code

There is one important detail. The copied file contains the entire email structure, starting with <Doctype>. For use inside the editor, you only need the specific code piece that represents the RSS content.

To isolate it:

3. Paste the copied HTML into an online code formatter to clean and structure the code.

4. Move the formatted code into a code editor, for example, Sublime Text.

5. Locate the <tr> where the RSS block begins, typically with class="esd-stripe".

6. Copy the entire <tr> section that contains the RSS module.

Widget HTML code start

Widget HTML code end

Next, move to the editor:

7. Open your email in the editor.

8. Add a new stripe to your email.

9. Go to the code editor for this exact stripe.

Place to put HTML code in editor

10. Paste the copied <tr> block into the corresponding <tr> section.

11. Apply the code.

After applying the code, the RSS block is displayed directly inside your email. You can continue editing it as part of the overall layout.

Widget HTML code in editor

This method allows you to take a generated widget and integrate only the required module into your working email, without replacing the entire structure.

Replacing traditional configuration panels with chat

The experiment with AI widgets ultimately led to a different way of thinking about interactive elements inside the editor.

Traditionally, each widget requires its own configuration panel with multiple controls, parameters, and settings. As more interactive formats appear, these panels become increasingly complex. Even simple changes often require navigating through several fields or adjusting configuration values manually.

Widget modules in editor

Through chat, you can:

  • create the widget;
  • modify it;
  • adjust styling;
  • control content;
  • regenerate layout.

We explored another approach: replacing traditional configuration sidebars with a chat interface.

When a widget is added to the editor, instead of opening a panel filled with controls, you interact with it through conversation. You describe what you want to create or change, and the Assistant prepares the configuration for you.

Widget module's chat

Behind the scenes, the Assistant handles:

  • HTML generation;
  • AMP generation, if applicable;
  • configuration logic;
  • fallback;
  • communication with the external service.

For the Stripo editor user, this means working at the level of intent. Instead of manually adjusting parameters, you describe the result you want, and the Assistant translates it into the correct configuration and code.

This capability will begin appearing in the editor in March. At first, the Widget Assistant will support a limited set of interactive elements. The initial release will include Flip Card, Magic Ball, Fortune Cookie, Find the Differences, and Scratcher widgets, with additional formats added gradually over time.

Until the full set of widgets becomes available inside the editor, many interactive elements can still be transferred from the Stripo Showcase using the method described earlier. This approach allows teams to reuse existing interactive experiences while the built-in widget system continues to expand.

As more widgets become available directly in the editor, creating interactive email content will require fewer manual steps and less configuration.

Wrapping up

AI widgets represent a different approach to creating interactive elements in email.

In previous guides, we showed how interactive content such as games, polls, and AMP components can be added to emails through HTML and configuration. These methods remain important, especially when teams need to reproduce interactive emails across different platforms and editors.

The AI Widget Assistant builds on that foundation but simplifies the workflow inside the Stripo editor. Instead of manually inserting code and configuring parameters, users can describe what they want to create and refine the result through conversation.

This capability will start appearing in the editor in March. Not all widget types will be available immediately, but new formats will be added gradually. Over time, more interactive elements from the Stripo Showcase will become available through the Widget Assistant.

At the same time, we will continue publishing guides on AMP, kinetic techniques, and fallback implementations. These tutorials ensure that interactive email experiences can still be recreated in other editors and environments when needed.

The goal is simple: make interactive email content easier to create while keeping it flexible enough to work across different tools and workflows.

Create interactive widgets with us
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
0 comments
Stripo editor
Simplify email production process.
Stripo plugin
Integrate Stripo drag-n-drop editor to your web application.
Order a Custom Template
Our team can design and code it for you. Just fill in the brief and we'll get back to you shortly.

Stripo editor

For email marketing teams and solo email creators.

Stripo plugin

For products that could benefit from an integrated white-label email builder.