Marketing · Elementor
Phone Call Button widget for Elementor
A click-to-call button that opens the phone app on mobile and still looks like a CTA on desktop.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A click-to-call button that opens the phone app on mobile and still looks like a CTA on desktop.
Phone Call Button Widget (Free).
render() writes HTML data attributes: data-animation, data-device.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Phone Call Button”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Phone Number”, “Button Text”, “Icon”, “Alignment”. Style and Content tabs are listed on this page.
When to use it
- A trades business header.
- A sticky “call now” on mobile.
- A local services landing page.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Phone Number | Will be used in tel: link. Keep digits and plus. |
| Content — Button Text | Saved on the widget and consumed in render(). |
| Content — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Layout — Alignment | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Layout — Icon Position | The chosen value is read in render() and applied on the front end. Options: Left; Right. |
| Layout — Attention Animation | The chosen value is read in render() and applied on the front end. Options: None; Pulse (Free); Waves (Free); Bounce (Pro); Ring (Pro). |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-phone-call__text`. |
| Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Hover Scale | Spacing/size control (min 1, max 1.5). |
| Button (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-phone-call__button`. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-phone-call__button`. |
| Button (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Button (Hover) — Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (button, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-phone-call__button:hover`. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-phone-call__button:hover`. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 40). |
| Button — Disable Box Shadow | Switcher inspector control (`kng_disable_shadow`). |
| Button — Effect Color | Color written to this widget’s CSS selector. |
| Button — Hover Effect Color | Writes CSS `button` onto the widget’s front-end markup. |
| Button — Effect Thickness | Spacing/size control (min 0, max 8). |
| Button — Effect Spread | Spacing/size control (min 0, max 30). |
| Button — Effect Duration (s) | Spacing/size control (min 0.5, max 3). |
| Button — Effect Opacity | Spacing/size control (min 0, max 1). |
| Button — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-phone-call__button`. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Phone Call Button options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Phone Call Button in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Phone Call Button”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related marketing widgets
Form Builder
A form you build in Elementor: fields, layout, and submit behavior for contact, quotes, and lead capture.
Popup & Lightbox Modal
An on-page popup or lightbox for a promo, form, or media embed. This is the widget; site-wide popups with conditions live in Popup Builder.
Share Buttons
Social share buttons for the current page, with networks and labels you choose.
Video Popup
A poster image that opens a video (self-hosted or hosted) in a popup, with autoplay-on-open available.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Countdown & Timer
A countdown to a date (or evergreen) for launches, sales, and events.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Phone Call Button after you activate it.