← All widgetsWidget 107 · emcp_custom_107

Lightbox & Modal

Elementor widget6 layouts26 content options39 style options5 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: modal, popup, lightbox, dialog, video, trigger, exit intent.

Setup guide

  1. Open a page in Elementor, search the panel for Lightbox & Modal and drag it into a container.
  2. Content › Trigger: Open On, Button Text, Button Icon, Trigger Image, Link Text, Delay (seconds), Scroll Depth (%), Show Once Per Visitor (auto triggers) and 2 more.
  3. Content › Modal Content: Content Type, Title, Content, Image, Video URL, Embed URL, Autoplay Video, Footer Button Text and 8 more.
  4. Pick a Open On: Button click, Image click, Text link click, Page load (after delay), Exit intent, Scroll depth. Each one is shown below.
  5. Style tab sections: Trigger, Modal Box, Close & Footer Button. Colours, typography and spacing set here are scoped to this widget instance.
  6. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Conditional options: Button Text appears when Open On is button; Button Icon appears when Open On is button; Trigger Image appears when Open On is image; Link Text appears when Open On is text; Delay (seconds) appears when Open On is load; Scroll Depth (%) appears when Open On is scroll; Remember For (days) appears when Show Once Per Visitor (auto triggers) is yes; Content appears when Content Type is content; and 5 more.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Button click

Open On = button

Layout

Image click

Open On = image

Watch the demo
Layout

Text link click

Open On = text

Learn more
Layout

Page load (after delay)

Open On = load · opens on its own, so it is not demoed on this page; try it on a test page.

Layout

Exit intent

Open On = exit · opens on its own, so it is not demoed on this page; try it on a test page.

Layout

Scroll depth

Open On = scroll · opens on its own, so it is not demoed on this page; try it on a test page.

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

Trigger

OptionTypeChoices / rangeDefaultNotes
Open On
trigger		DropdownButton click, Image click, Text link click, Page load (after delay), Exit intent, Scroll depthbutton
Button Text
btn_text		TextOpen modalShown when trigger = button
Button Icon
btn_icon		IconShown when trigger = button
Trigger Image
trigger_image		ImageShown when trigger = image
Link Text
link_text		TextLearn moreShown when trigger = text
Delay (seconds)
delay		Numbermin 0, max 1203Shown when trigger = load
Scroll Depth (%)
scroll_pct		Numbermin 5, max 10050Shown when trigger = scroll
Show Once Per Visitor (auto triggers)
once		Toggleon / offyes
Remember For (days)
once_days		Numbermin 1, max 3657Shown when once = yes
Trigger Alignment
align		Button groupLeft, Center, RightleftResponsive

Modal Content

OptionTypeChoices / rangeDefaultNotes
Content Type
content_type		DropdownRich text, Image, Video (YouTube / Vimeo / MP4 URL), Embed URL (iframe)content
Title
title		TextHello there
Content
content		Rich textPut any content here: text, images, f...Shown when content_type = content
Image
image		ImageShown when content_type = image
Video URL
video_url		TextShown when content_type = video
Embed URL
iframe_url		TextShown when content_type = iframe
Autoplay Video
autoplay_video		Toggleon / offyesShown when content_type = video
Footer Button Text
cta_text		Text
Footer Button Link
cta_link		Link
Position
position		DropdownCenter, Top, Bottom, Left drawer, Right drawercenter
Animation
anim_style		DropdownFade, Zoom, Slide up, Slide down, Flipzoom
Close on Overlay Click
close_overlay		Toggleon / offyes
Close on Esc
close_esc		Toggleon / offyes
Show Close Button
show_close		Toggleon / offyes
Close Button Position
close_pos		DropdownInside corner, Outside cornerinsideShown when show_close = yes
Auto Close After (seconds, 0 = never)
auto_close		Numbermin 0, max 6000

Style tab

Trigger

OptionTypeChoices / rangeDefaultNotes
Typography
t_typo		Typography
Text Color
t_color		Color#ffffff
Button Background
t_bg		Color#6a11cb
Hover Text Color
t_color_h		Color
Hover Button Background
t_bg_h		Color
Button Padding
t_pad		Dimensions
Button Radius
t_radius		Slidermin 0, max 60, px10
Button Border
t_border		Border
Button Shadow
t_shadow		Box shadow
Trigger Image Width
t_img_w		Slidermin 10, max 100, %/px100
Trigger Image Radius
t_img_radius		Slidermin 0, max 60, px12

Modal Box

OptionTypeChoices / rangeDefaultNotes
Overlay Color
overlay		Colorrgba(16,24,40,.7)
Overlay Blur
overlay_blur		Slidermin 0, max 20, px0
Width
m_w		Slidermin 280, max 1400, px/%/vw640Responsive
Max Height
m_maxh		Slidermin 30, max 100, vh90
Background
m_bg		Background
Padding
m_pad		DimensionsResponsive
Radius
m_radius		Dimensions
Border
m_border		Border
Shadow
m_shadow		Box shadow
Title Typography
m_title_typo		Typography
Title Color
m_title_color		Color#101828
Content Typography
m_text_typo		Typography
Content Color
m_text_color		Color#475467
Text Align
m_align		Button groupLeft, Center, Rightleft
Animation Duration
duration		Slidermin 0.1, max 2, s0.35

Close & Footer Button

OptionTypeChoices / rangeDefaultNotes
Close Icon Color
x_color		Color#667085
Close Background
x_bg		Colorrgba(255,255,255,.9)
Close Hover Color
x_color_h		Color
Close Hover Background
x_bg_h		Color
Close Size
x_size		Slidermin 20, max 64, px36
Close Radius
x_radius		Slidermin 0, max 50, %50
Footer Button Typography
cta_typo		Typography
Footer Button Text
cta_color		Color#ffffff
Footer Button Background
cta_bg		Color#6a11cb
Footer Button Hover Text
cta_color_h		Color
Footer Button Hover Background
cta_bg_h		Color
Footer Button Radius
cta_radius		Slidermin 0, max 60, px10
Footer Button Padding
cta_pad		Dimensions

Add it with the MCP tools

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