Basic widget
HTML
Paste any embed code or custom HTML. Scripts run on the live page only.
Build it with your AI
“Add this embed code from our booking tool above the footer.”
Live demo
See it working
Content
1 setting
HTML
HTML code
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 HTML settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add this embed code from our booking tool above the footer.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "html",
"settings": {
"html": "<div style=\"display:flex;gap:10px;align-items:center;justify-content:center;font:500 15px/1.4 var(--uncoder-f-body);color:var(--uncoder-c-heading)\"><kbd style=\"padding:4px 10px;border:1px solid var(--uncoder-c-border);border-radius:8px;background:#fff\">Ctrl</kbd>+<kbd style=\"padding:4px 10px;border:1px solid var(--uncoder-c-border);border-radius:8px;background:#fff\">K</kbd> opens the command palette</div>"
}
}More basic widgets
Works well with
Alert
A friendly notice for news, warnings and success messages.
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.