WhatsApp Chat

← All widgetsWidget 220 · emcp_custom_220

Elementor widget3 layouts15 content options13 style options2 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: whatsapp, chat, support, floating, contact, message.

Setup guide

Open a page in Elementor, search the panel for WhatsApp Chat and drag it into a container.
Content › Chat: Layout, Agents, Pre-filled Message, Chat Box Title, Chat Box Subtitle, Welcome Bubble, Button Label, Show Label Next to Floating Button and 7 more.
Pick a Layout: Floating button with chat box, Inline button (direct link), Inline contact card. Each one is shown below.
Style tab sections: Colors. 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: Floating Position appears when Layout is floating; Auto-open After (ms, 0 = never) appears when Layout is floating; Pulse Ring appears when Layout is floating; Unread Badge appears when Layout is floating; Message Field in Chat Box appears when Layout is floating; Consent Note appears when Layout is floating.

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

Floating button with chat box

Layout = floating

Chat on WhatsApp

SarahSarahSalesMon-Fri 9:00-18:00 OmarOmarSupportEvery day

Chat on WhatsApp

Layout

Inline button (direct link)

Layout = button

Chat on WhatsApp

SarahSarahSalesMon-Fri 9:00-18:00 OmarOmarSupportEvery day

Chat on WhatsApp

Layout

Inline contact card

Layout = card

Chat on WhatsApp

SarahSarahSalesMon-Fri 9:00-18:00 OmarOmarSupportEvery day

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

Chat

Option	Type	Choices / range	Default	Notes
Layout `layout`	Dropdown	Floating button with chat box, Inline button (direct link), Inline contact card	floating
Agents `agents`	Repeater		2 items
↳ Name `name`	Text		Support
↳ Role `role`	Text		Customer care
↳ WhatsApp Number (international, digits only) `phone`	Text		15551234567
↳ Avatar `avatar`	Image
↳ Availability `hours`	Text
↳ Show as Online `online`	Toggle	on / off	yes
Pre-filled Message `message`	Textarea		Hi! I have a question about
Chat Box Title `header_title`	Text		Chat with us
Chat Box Subtitle `header_sub`	Text		We usually reply within a few minutes.
Welcome Bubble `welcome`	Textarea		Hello! Pick who you would like to tal...
Button Label `btn_text`	Text		Chat on WhatsApp
Show Label Next to Floating Button `show_label`	Toggle	on / off
Floating Position `position`	Dropdown	Bottom right, Bottom left	bottom-right	Shown when layout = floating
Auto-open After (ms, 0 = never) `open_delay`	Number	min 0, max 60000	0	Shown when layout = floating
Pulse Ring `pulse`	Toggle	on / off	yes	Shown when layout = floating
Unread Badge `badge`	Text		1	Shown when layout = floating
Message Field in Chat Box `show_input`	Toggle	on / off	yes	Shown when layout = floating
Consent Note `gdpr`	Text			Shown when layout = floating
Hide on Mobile `hide_mobile`	Toggle	on / off

Style tab

Colors

Option	Type	Choices / range	Default
Brand Color `brand`	Color		#25d366
Header Color `brand_dark`	Color		#075e54
Chat Background `box_bg`	Color		#efe7dd
Floating Button Size `btn_size`	Slider	min 40, max 96, px	60
Edge Offset `offset`	Slider	min 0, max 120, px	24
Chat Box Width `box_w`	Slider	min 260, max 480, px	340
Radius `radius`	Slider	min 0, max 40, px	16
Shadow `shadow`	Box shadow
Z-index `zindex`	Number	min 1, max 99999	9995
Title Typography `title_typo`	Typography
Agent Name Typography `name_typo`	Typography
Text Typography `text_typo`	Typography
Button Typography `btn_typo`	Typography

Add it with the MCP tools

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