Skip to main content

Restyle an embedded widget's colors and fonts

Change an embedded widget's colors, fonts and other style settings from the toolbar in a Playlist or Deal Room, without asking AI Mode or editing code.

Updated Oct 29, 2026

Restyle an embedded widget's colors and fonts

Overview​

Widget style is a toolbar control on an embedded code widget inside a Playlist or Deal Room. It opens a small form where you change the widget's colors, fonts and other style settings directly, without asking AI Mode to restyle it and without editing the widget's code.

It works on the interactive widgets AI Mode builds (ROI calculators, comparison tables, pricing tiers, quizzes and so on) and on any custom code embed whose author exposed style settings.

Snapshot 📸​

  • Feature status: Generally available
  • Role access: Anyone who can edit the Playlist or Deal Room
  • Location: Playlist or Deal Room editor → select an embedded widget → Widget style (palette icon) in the element toolbar

Open the Widget style form​

  1. Open a Playlist or Deal Room in the editor.
  2. Click the embedded widget to select it.
  3. In the element toolbar, click Widget style (the palette icon, next to Edit embed code).

A Widget style window opens with one control for each style setting the widget exposes.

What you can change​

The form reads the widget's own style settings and shows the right control for each one:

  • Colors: any setting whose value is a hex color (for example #B880FF) gets a color picker.
  • Fonts: any setting whose name contains "font" gets a font picker. It lists Walnut's default font plus a curated set of Google Fonts. Pick a Google Font and Walnut loads it on the widget for you.
  • Everything else: settings like a corner radius (12px), a border style (solid) or a transparent color (rgba(0, 0, 0, 0.5)) get a text field. Values are checked as you type; an invalid entry shows Enter a valid value. and Save stays disabled until it's fixed.

Field labels come from the setting's name, so accent-color shows as Accent color and text-color as Text color.

Save and cancel​

  • Save writes only the settings you changed back into the widget. Settings you didn't touch, and the widget's own HTML and JavaScript, stay exactly as they were.
  • Cancel closes the window without applying anything.
  • If you change a value and then set it back to the original, Save simply closes the window without writing anything.
  • If the widget was rewritten while the window was open (for example, an AI Mode request finishing in the background), Save merges your changes into the latest version instead of overwriting it.

Widgets with no style settings​

A widget only has settings here if its author exposed them. If it hard-codes its colors and fonts, the window says:

This widget's style is set in its own code, so it has no style settings here. Ask AI Mode to restyle it, or change its code with Edit embed code.

The only button is then Close. You have two options:

  • Ask AI Mode to restyle the widget. It can apply the colors and fonts you ask for, or rewrite the widget so it exposes style settings.
  • Click Edit embed code on the same toolbar and change the HTML or CSS directly.

FAQs​

Why doesn't my widget show any settings? Its author didn't expose any. Ask AI Mode to restyle it, or edit the embed code directly.

Nothing changed on the canvas until I saved. Is that normal? Yes. Your changes apply together when you click Save. Cancel discards them.

Can I use any font? Pick from Walnut's default font and the curated Google Fonts in the list. A font that isn't in the list falls back to the widget's own font stack.

Does Widget style use AI credits? No. It changes the widget's style settings directly, with no AI involved.

Can I undo a change? Yes, with the editor's normal undo.

Was this helpful?