Media widget
Hotspot
An image with pulsing markers that open little tooltips. Great for product tours.
Build it with your AI
“Add the editor screenshot with three hotspots explaining the layers panel, the canvas and the settings.”
Live demo
See it working
The page as a tree: select, rename and reorder elements.
Your real theme and content, editable in place.
Content, Design and Behaviour for the selected element.
Settings
29 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
7 settings
Image
Image
Resolution
Hotspots
Hotspots
Open tooltip on
Tooltip position
Show title on the marker
Pulse animation
Design
22 settings
Image
Border radius
CSS filters
Markers
Size
Icon size
Title typography
Border
Border radius
Shadow
Pulse color
Icon color
Background
Tooltip
Max width
Distance from marker
Background
Padding
Border radius
Shadow
Title typography
Title color
Text typography
Text color
Link color
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 Hotspot settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add the editor screenshot with three hotspots explaining the layers panel, the canvas and the settings.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "hotspot",
"settings": {
"image": { "id": 8 },
"hotspots": [
{
"label": "Layers",
"content": "The page as a tree: select, rename and reorder elements.",
"x": 8,
"y": 40
},
{
"label": "Live canvas",
"content": "Your real theme and content, editable in place.",
"x": 50,
"y": 45
},
{
"label": "Settings",
"content": "Content, Design and Behaviour for the selected element.",
"x": 90,
"y": 30
}
]
}
}More media widgets
Works well with
Facebook Embed
A Facebook page, post or video on your site — loading only when a visitor asks for it.
Google Maps
A map of your address that can wait for a click before loading anything from Google.
Image Carousel
Swipe through images, several per view, with captions and a lightbox.
Before / After
Drag a divider to compare two images: before and after, draft and final.
Image Gallery
Images in a grid, masonry or justified rows, with captions, hover effects and a lightbox.
Logo Grid
Client logos in a tidy grid or an endless marquee, in grey until hovered.