Widget design settings reference
You can match your widget to your website with colors, fonts, spacing, and phone settings. Find each control's choices and defaults here.
Use Design to make your widget fit your website. You can change its colors, fonts, layout, and motion without changing the attached flow's questions, forms, or offers. Widgets that share a flow can still look different. Compare widget types to see which controls each one supports.
Themes, copying, and phone overrides
Choose Change to open the theme chooser. New widgets use Plain. A Toaster supports only Plain and Paddington. The four themes that support content images also have image-position controls.
| Theme | How it places the content and image |
|---|---|
| Plain | Centers the content without a content image. |
| Baloo | Puts the image and header copy in a hero area. |
| Paddington | Puts the image in a hero area. |
| Petey | Places the image on the left, constrained to its bounding area. |
| Yogi | Places the image on the left, centered within its bounding area. |
Copy from… lists your other widgets by name and asks you to confirm before replacing the design. It copies colors, dark colors, fonts, sizes, spacing, phone overrides, custom CSS, header, progress bar, and button animation. It doesn't replace the flow, trigger, or targeting. If the destination doesn't support the source's theme, it keeps its own theme.
Switch to Phone to adjust settings just for phones. A dot marks each override. Font sizes, structure, density, button size, and button width support phone overrides. Colors and other shared settings apply to every device. Inline width is also shared. Return to Desktop to change the shared design.
Theme default follows the theme. Same as answer buttons follows the answer-button setting instead of a separate submit-button value. Older widgets can keep saved values that differ from the new-widget defaults below.
Widget colors
| Setting | Choices and behavior | New-widget default |
|---|---|---|
| Background | Color, Gradient, or Image. | Color. |
| Background color | Solid background color. | White, #ffffff. |
| Start and End | Gradient colors. | No explicit overrides. |
| Angle | Gradient angle from 0 through 360 degrees. | 135 degrees when unspecified. |
| Background image | Shared image in light and dark modes. | None. |
| Behind the image | Color visible behind the background image. | The background color. |
| Text | Base text color. | #1A202C. |
| Submit button | Base call-to-action color. | #3182CE. |
| Text on buttons | Text against the button color. | #EBF8FF. |
| Border | Base border color. | #5d6b91. |
Question colors adds Heading text, Body text, Answer background, and Answer text. Offer / form colors adds heading and body colors, Field background, Field text, Field border, Placeholder, and Links. These begin without explicit overrides and inherit the relevant base or theme colors.
Header title and subtitle colors appear for Popup, Toaster, and inline widgets when their header is enabled. Backdrop behind the popup applies to Popup and Full-screen takeover. Backdrop Opacity ranges from 0 to 1 in steps of 0.05, with a fallback of 0.8.
Dark mode
New widgets have dark mode off and no separate dark palette. In the colors section, Dark mode can show No dark mode colors yet and Generate from my light colors.
Once you have a dark palette, Use dark mode colors controls whether visitors see it. When it's off, everyone sees light colors. When it's on, an explicit page theme takes priority over the visitor's system preference. Supported page signals are data-theme="light" or "dark", a light or dark CSS class, and data-bs-theme="light" or "dark". Without a page signal, the widget follows the system preference. You can force either scheme in the preview to check it.
Dark colors you haven't set fall back to the light palette. Both modes use the same background image. Check every text and field color in both modes so visitors can read them.
Widget typography
Choose fonts with Heading font and Body font. If you leave them unset, they inherit from your website. Heading weight and Body weight offer 400, 500, 600, 700, 800, or 900. New widgets use 700 and 400. Line height ranges from 1 to 3 in steps of 0.1 and defaults to 1.5.
The Size presets set these pixel sizes:
| Text | Small | Medium | Large |
|---|---|---|---|
| Headline | 20 | 24 | 28 |
| Description | 14 | 16 | 18 |
| Answers | 12 | 13 | 16 |
| Form fields | 12 | 13 | 16 |
| Submit button | 12 | 13 | 16 |
| Header title | 14 | 16 | 18 |
| Header subtitle | 12 | 13 | 15 |
New widgets use Medium, with a few starting sizes that depend on the type. Bars start with a 17px headline, 15px form fields, and a 16px submit button. Toasters start with 14px answers and a 15px submit button. Choosing a preset sets all the fields in the table to that preset's sizes.
Choose Customize sizes to set sizes individually. Headline ranges from 8 to 72px. Description, answers, fields, submit button, and header title range from 8 to 40px. Header subtitle ranges from 8 to 32px. Header sizes appear only when your widget supports a header and you've enabled it. Editing a desktop size changes the scale to Custom.
Answer and submit buttons
Answer buttons and Submit buttons have separate groups.
| Control | Choices or range | Answer-button default |
|---|---|---|
| Fill | Solid, Outline, Ghost, Gradient. | Solid. |
| Size | S, M, L. | M. |
| On hover | Theme default, Darken, Lighten, Lift, None. | Theme default. |
| Corner radius | 0 to 40px. | 4px for Toaster, 0px otherwise. |
| Gap between | 0 to 40px. Applies to answer buttons. | 11px for Toaster, 8px otherwise. |
| Weight | Theme default or 400 through 900 in increments of 100. | Theme default. |
| Letter spacing | -0.1 to 0.3em in steps of 0.01. | 0em when unspecified. |
| Width | Theme default, Full width, Fit to text. | Theme default. |
| Uppercase | On or off. | Off. |
Submit buttons initially use the answer-button values. Their selectors offer Same as answer buttons. For hover, weight, and width, you can also choose Theme default instead of inheriting. Uppercase offers Same as answer buttons, On, or Off. Clear an inherited numeric override to use the answer-button value again.
Form field appearance
Style offers Boxed, Underlined, or Filled. Boxed is the new default. Labels offers Above, Inside, or Hidden, with the theme's behavior used until you choose one.
Corner radius and Gap between range from 0 to 40px. New field spacing is 8px. An unset radius follows the theme. These controls change how fields look. To make a field required, link it to a question, or choose where its data goes, use the form field editor.
Layout & spacing
Density offers Compact, Comfortable, or Spacious. Comfortable is the default. All types except Bar also offer Custom, which exposes these controls.
| Control | Range | Unspecified fallback |
|---|---|---|
| Vertical padding | 0 to 120px. | 35px. |
| Horizontal padding | 0 to 120px. | 35px. |
| Header to content | 0 to 120px, with an enabled supported header. | 35px. |
| Heading to description | 0 to 80px. | 9px. |
| Description to answers & fields | 0 to 80px. | 26px. |
| Fields to buttons | 0 to 80px. | 8px. |
Width ranges from 200 to 1200px in steps of 10 for Popup, Toaster, inline, and Full-screen takeover widgets. Leave it unset to use the automatic or theme width. Bars span the page and have no width slider.
Image themes expose Image position as Top, Left, or Background, and Image height from 40 to 600px in steps of 10. The height fallback is 200px. The image's focal point is set on the content image, not in the widget's layout section.
Widget container
Corner radius ranges from 0 to 40px and starts at 8px. Border width ranges from 0 to 10px. New Bars start at 2px and other types at 0px. Border style is Solid, Dashed, or Dotted, with Solid as the default.
Shadow offers None, S, M, L, XL, or 2XL for floating types. New widgets use L. Inline widgets don't have a shadow or backdrop. Backdrop blur is available only for Popup and Full-screen takeover, ranging from 0 to 30px.
Header & progress bar
Only Popup, Toaster, and inline widgets support these controls.
Show a header is off initially. Enabling it exposes Alignment, Image, Title, and Subtitle. Alignment is Left, Centered, or Right, with Left as the default.
Show a progress bar is also off initially. Base color defaults to #60a5fa and supplies the progress gradient. Its color control is disabled while the progress bar is off.
Widget motion
| Control | Choices | Default or fallback |
|---|---|---|
| Entrance | None, Fade, Slide, Scale. | Slide when unspecified. |
| Step transition | Slide left, Slide up, Slide down, Cross-fade, Zoom, None. | Slide left. |
| Fade during step transitions | On or off. Applies to slide and zoom transitions. | On. |
| Speed | Slow, Normal, Fast. Applies to entrance and step transitions. | Normal. |
| Draw attention to the submit button | Don't animate, Once after 5 seconds, Every 5 seconds. | Don't animate. |
Close, back, skip & badge
Floating widgets offer Close button as Icon, Circle, or Text, and Position as Left or Right. Defaults are Icon and Right. Inline widgets have no close button.
Back button offers Text link, Button, or Arrow icon. Skip button offers Text link or Button. Both default to Text link. The arrow keeps the Back label for screen readers. Skip appears on optional questions.
The Display tab controls whether Back is enabled and supplies Back, Next, and Skip wording. The Personalized with RightMessage badge is configured for the entire project in Powered By settings, not individually here.
Advanced and AI drafts
Advanced contains Custom CSS. See Customize widget CSS for supported aliases and scoping limits.
AI Generate prepares design alternatives that stay unsaved until you choose Apply. While a draft is pending, design controls edit the selected alternative. You can't change the theme or copy another widget's design until you apply or discard it. See Design your widget with AI. Applying a design or editing it yourself still requires publication before visitors see it.
AI design options
You can generate from a website analysis or a written description. When a site profile exists, the dialog shows its screenshot, colors, fonts, and buttons. Refresh requests a new analysis. If analysis fails, choose Try again or Continue with my description only.
What to change offers Colors, Typography, and Buttons & shape. All three start selected, and at least one must stay selected. Also create dark mode colors requires Colors. Its initial state follows the widget's dark-mode setup and available site profile, so check it before generating.
Generate 3 designs stays disabled while analysis is pending unless you choose description-only generation. Bolder button, Minimal, Playful, and Premium append wording to your description. Cancel closes the dialog without applying a design.
Each generated alternative has a short explanation. Design controls edit the selected alternative, and edited alternatives are marked. Try again returns to generation. Replacing or discarding edited alternatives asks for confirmation. Leaving Design with a pending draft also prompts you to discard it. Phone preview stays disabled until you apply or discard.
Apply saves the selected design to the project draft. The confirmation message offers Undo to restore the previous design.
The generator can change supported palette, dark-color, font, size, shape, and structure settings. It doesn't generate arbitrary Custom CSS, write header content, change targeting or triggers, or rewrite your questions and offers.
Generation can fail when colors don't have enough contrast or the alternatives are too similar. If you get an error, keep your existing design or request clearly different alternatives with high-contrast text. Wait for the alternatives to appear before choosing one.