Preview Window

← All widgetsWidget 218 · emcp_custom_218

Elementor widget2 layouts11 content options17 style options3 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: preview, popover, hover card, tooltip, link preview, glossary.

Setup guide

Open a page in Elementor, search the panel for Preview Window and drag it into a container.
Content › Content: Mode, Text, Trigger Text, Trigger Style, Preview Cards, Open On, Placement, Open Delay (ms) and 3 more.
Pick a Mode: Rich text with preview links, Single trigger. Each one is shown below.
Style tab sections: Trigger, Preview Card. Colours, typography and spacing set here are scoped to this widget instance.
Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.

Conditional options: Text appears when Mode is links; Trigger Text appears when Mode is single.

This widget is fixed to the viewport (a corner button, a bar or a toast). On this page each demo is pinned inside its grey stage box so you can see it in place; on a real page it floats over the content. Scroll-driven options react to the scrolling of this page.

Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.

Layout

Rich text with preview links

Mode = links

Hover a term like flexbox or containers to see a preview card. Any link with a data-preview number opens the matching card below.

Layout

Single trigger

Mode = single

Hover for a preview

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Content

Option	Type	Choices / range	Default	Notes
Mode `mode`	Dropdown	Rich text with preview links, Single trigger	links
Text `body`	Rich text		Hover a term like flexbox or containe...	Shown when mode = links
Trigger Text `trigger_text`	Text		Hover for a preview	Shown when mode = single
Trigger Style `trigger_style`	Dropdown	Dotted underline, Highlighted, Button, Info icon after text, Plain link	dotted
Preview Cards `cards`	Repeater		2 items
↳ Image `image`	Image
↳ Title `title`	Text		Preview title
↳ Text `text`	Textarea
↳ Meta line `meta`	Text
↳ Link `link`	Link
↳ Link Text `cta`	Text		Read more
Open On `open`	Dropdown	Hover (tap on touch), Click	hover
Placement `placement`	Dropdown	Above, Below, Auto (flip to fit)	top
Open Delay (ms) `delay`	Number	min 0, max 2000	150
Arrow `arrow`	Toggle	on / off	yes
Animation `anim`	Dropdown	Fade, Fade up, Scale	fade-up
Image Position `img_pos`	Dropdown	Top, Left, Hidden	top

Style tab

Trigger

Option	Type	Default
Text Typography `body_typo`	Typography
Text Color `body_color`	Color	#344054
Trigger Color `trig_color`	Color	#6a11cb
Trigger Highlight Background `trig_bg`	Color	#f4ebff

Preview Card

Option	Type	Choices / range	Default
Width `card_w`	Slider	min 200, max 600, px	320
Background `card_bg`	Color		#ffffff
Padding `card_pad`	Dimensions
Border `card_border`	Border
Radius `card_radius`	Slider	min 0, max 40, px	14
Shadow `card_shadow`	Box shadow
Image Height `img_h`	Slider	min 60, max 400, px	140
Title Typography `title_typo`	Typography
Title Color `title_color`	Color		#101828
Text Typography `text_typo`	Typography
Text Color `text_color`	Color		#475467
Meta Color `meta_color`	Color		#98a2b3
Link Color `cta_color`	Color		#6a11cb

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_218" and a settings object using the keys above. Run get-custom-widget with id 218 for the full JSON spec.