Design your widget with AI

Get three designs for your widget based on your website or a description you write. You can compare them with your actual questions, forms, and offers before replacing your current design.

You'll need project edit access and an existing widget with content. Start in the Desktop design view.

Describe the style you want

1. Open your widget's Design tab and choose AI Generate.
2. If there's no site analysis yet, enter your website and choose Analyze. You can also choose Generate from my description only.
3. Under Describe the style you want, say what you'd like to see.
4. Under What to change, select the parts you want to change.
5. Review Also create dark mode colors if you'd like a dark palette too.
6. Choose Generate 3 designs.

For example, WorkForge (opens in a new tab) could ask:

Give me three clearly different palettes with navy, teal, and purple buttons. Keep the backgrounds white and make the text easy to read.

Your site analysis supplies brand context, but you don't need it to generate from a description. The AI design settings reference covers scopes, analysis retries, and generation limits.

Pick a design and make it yours

The three alternatives each have a short explanation. Nothing is saved until you apply means you can compare them without changing the saved widget.

Enlarge

Three generated WorkForge widget design variants with Discard and Apply controlsOriginalOriginal

1. Select each alternative and look at its preview.
2. Check the questions, forms, and offers your flow uses, not only the first step.
3. Check both color schemes if you generated dark colors.
4. Use the design controls to adjust your favorite. Your edits stay with that alternative.
5. Choose Apply to keep it or Discard to keep your existing design.

You'll need to apply or discard the draft before checking Phone, changing the theme, or copying another widget's design. If you apply it and change your mind, the confirmation message has Undo to restore the previous design.

Applying saves the design to your project draft. It doesn't change the published website or rewrite your flow's questions and offers.

Try it on your website

1. Check Phone and Desktop, then use Open full size to review your widget's content without the editor's scaling.
2. Choose Preview on your site in the bottom bar. Use Choose preview URL to open a page where the widget appears.
3. Check the background, fonts, and phone layout on your actual website.
4. Follow the flow through its questions, forms, and offers.

The debugger opens at the bottom of the page. It shows what RightMessage knows about you and why the widget appears. Changing its design doesn't change who qualifies to see it. See testing your changes for more ways to check it.

Once you're happy with it, review the rest of your project draft and publish your changes. Visit your site like any other visitor to see the design live.

It's ready when the content is readable and usable throughout the flow on desktop and phone. Next, see how visitors use the widget.