Web Experiment Out-of-the-box Widgets

Out-of-the-box (OOTB) widgets let you test new website elements like modals and banners without designing or coding them yourself. OOTB widgets are pre-built, configurable components that you customize directly in the visual editor to match your brand. OOTB widgets remove engineering setup like SDK and UI framework integration, so you can validate ideas, gather learnings, and scale your experimentation program. Saved design presets and reusable styles keep your brand consistent across experiments. For more information on the Visual Editor and setting up a Web experiment, go to The Visual Editor.

OOTB widgets use native Amplitude AI so you can design your Web experiment through conversational prompts instead of supplying precise brand style details.

The OOTB widgets library includes:

• Buttons: a call to action (CTA) button. When a customer clicks a CTA button, the button triggers an action, like sending the customer to a shopping cart or to your support agents.
• Banner: a notification or messaging bar. Message banners announce important information to your customer, like expected service disruptions, sales, or other communications.
• Banner with a button: a notification or messaging bar that includes a CTA button. Banners with buttons announce a specific action you want customers to perform, like applying a promo code to a shopping cart.
• Modal pop-up: a pop-up modal that appears on your page after a set amount of time. Modals include CTA buttons and messaging. A pop-up modal appears after a few seconds and encourages customers to take an action, like signing up for an account.

You can also save customized widgets to the library for future use. For example, if you create a notification banner that announces a quarterly sale, you can save that customized message and reuse it later. Everyone in your organization with permission to create experiments can access all saved widgets.

Add an OOTB widget to a web experiment

You can add an OOTB widget to any Web experiment. After you create your Web experiment, click Open Visual Editor. Click Widgets from the top menu bar. The OOTB widgets modal opens, and you can select the widget you want. Drag and drop the widget onto your experiment.

Edit a widget

By default, you can edit the following aspects of any widget:

• Text.
• Button label.
• Background color.
• Font.

When you select a widget, the element toolbar lets you delete the widget or save the widget to the library.

The Visual Editor displays all changes in real time.

Customize widget placement

You can freely move banners and buttons around your website:

• Banners can appear at the top or bottom of a page.
• Buttons can appear almost anywhere on the page. After you place a button, it snaps to a grid layout.

You can't customize the location of the pop-up modal, which appears in the center of your page.

For more information on moving banners and buttons, go to Moving elements.

AI Stylizer

AI Stylizer is an AI assistant in the Visual Editor that helps you refine copy, apply brand-aware styling, and clean up spacing, alignment, and hierarchy in your OOTB widgets. You don't need precise brand style guide details, design experience, or coding skills. Use natural-language prompts to align widgets or elements to your brand's style.

When you select a widget in the Visual Editor, the AI Stylizer control appears in the element toolbar as a sparkle icon. Select the control to open the AI Stylizer popover. You can describe what you want in plain language.

For example, enter "Make this headline more urgent", "Create a promotion for summer that contains a 15% discount promocode", or "Make the CTA more action-oriented." AI Stylizer updates the selected element based on your request.

You can use AI Stylizer in the following ways.

When you use AI Stylizer on a pre-built widget (modal, CTA, banner, or promo block), AI Stylizer adapts the element to your brand. AI Stylizer updates typography, colors, and spacing to match your site and can create or refine headline and CTA text so the component looks like part of your product.

• Headlines: make headlines more compelling or urgent, simplify and clarify the topic, or tailor headlines for new visitors.
• Buttons (CTAs): make CTAs more action-oriented, increase contrast and visibility, and customize CTAs for returning customers.
• Banners: make banners more prominent, simplify the messaging, and customize banners for new visitors.
• Text blocks: simplify and clarify the content, shift from features to benefits, and customize text for mobile users.

You can choose a preset prompt or enter your own custom prompt. AI Stylizer can generate multiple variants in a single interaction so you can pick the one you want. You can also revert to a previous AI-generated version from the AI Stylizer version history. You can continue to edit AI-created styles and copy after you apply the styles to your experiment. For example, you select a hero headline and ask AI Stylizer to make the headline more urgent or clearer. You like the first design and apply the design to your experiment. After you receive feedback from colleagues, you return and update the headline with their suggestions.