360° Product Viewer – EMCP Widget Demos

← All widgetsWidget 106 · emcp_custom_106

360° Product Viewer

Elementor widget5 layouts14 content options21 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: 360, product, viewer, spin, rotate, frames, photo.

Setup guide

Open a page in Elementor, search the panel for 360° Product Viewer and drag it into a container.
Content › Frames: Frame Images (in rotation order), note, Auto Rotate, Auto Rotate Frame Delay (ms), Reverse Direction, Drag Sensitivity (px per frame), Stop Auto Rotate After Drag, Show Drag Hint and 6 more.
Pick a Aspect Ratio: 1:1 (square), 4:3, 3:2, 16:9, 3:4 (portrait). Each one is shown below.
Style tab sections: Stage, Hint, Controls & Progress. 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: Auto Rotate Frame Delay (ms) appears when Auto Rotate is yes; Hint Text appears when Show Drag Hint is yes.

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

Layout

1:1 (square)

Aspect Ratio = 1 / 1

Drag to rotateAdd frame images to the gallery

Layout

4:3

Aspect Ratio = 4 / 3

Drag to rotateAdd frame images to the gallery

Layout

3:2

Aspect Ratio = 3 / 2

Drag to rotateAdd frame images to the gallery

Layout

16:9

Aspect Ratio = 16 / 9

Drag to rotateAdd frame images to the gallery

Layout

3:4 (portrait)

Aspect Ratio = 3 / 4

Drag to rotateAdd frame images to the gallery

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

Frames

Option	Type	Choices / range	Default	Notes
Frame Images (in rotation order) `frames`	Gallery
note `note`	Alert
Auto Rotate `autoplay`	Toggle	on / off	yes
Auto Rotate Frame Delay (ms) `speed`	Number	min 16, max 1000	80	Shown when autoplay = yes
Reverse Direction `reverse`	Toggle	on / off
Drag Sensitivity (px per frame) `sensitivity`	Number	min 1, max 60	8
Stop Auto Rotate After Drag `pause_on_drag`	Toggle	on / off	yes
Show Drag Hint `show_hint`	Toggle	on / off	yes
Hint Text `hint_text`	Text		Drag to rotate	Shown when show_hint = yes
Show Play / Step Buttons `show_controls`	Toggle	on / off	yes
Show Progress Bar `show_progress`	Toggle	on / off	yes
Aspect Ratio `ratio`	Dropdown	1:1 (square), 4:3, 3:2, 16:9, 3:4 (portrait)	1 / 1
Max Width `max_w`	Slider	min 200, max 1600, px/%	640	Responsive
Alignment `align`	Button group	Left, Center, Right	center

Style tab

Stage

Option	Type	Choices / range	Default	Notes
Background `stage_bg`	Background
Border `stage_border`	Border
Radius `stage_radius`	Slider	min 0, max 80, px	16
Shadow `stage_shadow`	Box shadow
Inner Padding `stage_pad`	Slider	min 0, max 100, px	0
Image Fit `img_fit`	Dropdown	Contain, Cover	contain
Image Filters `img_filter`	Css_filter

Hint, Controls & Progress

Option	Type	Choices / range	Default	Notes
Hint Typography `hint_typo`	Typography
Hint Text `hint_color`	Color		#ffffff
Hint Background `hint_bg`	Color		rgba(16,24,40,.7)
Button Icon Color `btn_color`	Color		#101828
Button Background `btn_bg`	Color		#ffffff
Button Hover Icon `btn_color_h`	Color
Button Hover Background `btn_bg_h`	Color
Button Size `btn_size`	Slider	min 24, max 72, px	40
Button Border `btn_border`	Border
Button Radius `btn_radius`	Slider	min 0, max 50, %	50
Controls Spacing `controls_mt`	Slider	min 0, max 60, px	14
Progress Track `prog_bg`	Color		#eaecf0
Progress Fill `prog_fill`	Color		#6a11cb
Progress Height `prog_h`	Slider	min 1, max 20, px	4

Add it with the MCP tools

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