Basic widget
Alert
A friendly notice for news, warnings and success messages. Visitors can dismiss it, and it remembers.
Build it with your AI
“Add a success notice above the form saying orders placed today ship tomorrow, with a dismiss button.”
Live demo
See it working
Note: Heads up
Our office is closed on public holidays. Orders placed then ship the next working day.
Settings
27 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
9 settings
Alert
Type
Style
Title
Description
Show icon
Icon
Dismiss button
Remember dismissal
Storage key
Design
18 settings
Box
Accent color
Background color
Border
Side accent width
Border radius
Padding
Shadow
Icon
Color
Size
Spacing
Content
Title typography
Title color
Title spacing
Description typography
Description color
Dismiss button
Size
Color
Background
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Alert settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a success notice above the form saying orders placed today ship tomorrow, with a dismiss button.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{ "type": "alert", "settings": { } }More basic widgets
Works well with
Blockquote
A quote that stands out, with its author and source.
Button
A link that looks like a button, in your Design System’s styles: primary, secondary, outline, ghost or link.
Counter
A number that counts up when it scrolls into view — and stays readable for search engines.
Divider
A line between sections, plain or with a word or icon in the middle.
Heading
Titles from h1 to h6, sized by your text styles, with a second font for words in italics.
HTML
Paste any embed code or custom HTML.