Shops
Warn shoppers before they try to pay without a connection.
Content / widget · Elementor module
Network Status Indicator Widget Plugin for Elementor
Tell visitors when their browser goes offline and when it is back, as a status badge or a notice that only appears while offline.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Network status indicatorProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published outputs of the widget. Switch your device offline and back to see them change.
02 / Inside WordPress
Network status indicator controls in Elementor
Content sets whether the indicator shows always or only when offline, an optional bar fixed to the bottom of the screen, the time the connection dropped, how long “Back online” stays, and every message. The Style tab covers typography, text and dot colours for each state, backgrounds, border, radius, padding and shadow.
03 / Website use cases
Where to use network status indicator
On trains, in shops and on patchy mobile data, visitors lose their connection without noticing, then wonder why a form will not send or a page will not load. Network status indicator shows what the browser reports: a calm badge while online, or a notice that only appears when the connection drops, says when it dropped, and confirms when it is back. It makes no requests of its own.
Forms
Explain why a form cannot send right now.
Reading and learning sites
Reassure visitors on patchy connections.
04 / Installation and setup
How to add a network status indicator in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Network status indicator in the Complementor library.
Add the widget to a page or a template.
Choose whether it shows always or only when offline.
Edit the messages.
Style it and switch your device offline to check it.
05 / Content and style controls
Customize network status indicator in Elementor
Configure the settings available for this module to suit the page you are building.
Always or only when offline.
Optional bar fixed to the bottom.
Time the connection dropped.
Brief “Back online” message.
Colours for each state.
No connectivity requests.
06 / Choose the right approach
Network status indicator and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Browser error pages
Appear only after a link fails, and take the visitor off your page.
Custom scripts
Need code and testing for each site.
07 / Requirements and compatibility
Network status indicator compatibility with Elementor
- Requires Elementor; works without WooCommerce.
- Reports the browser's connection state; it does not save or resend form data.
- Relies on navigator.onLine and the online and offline events.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot network status indicator
Check these settings if the published page behaves differently from the editor.
Why does it say online when a site will not load?
Browsers report whether the device has a network connection, not whether every site can be reached. The widget makes no test requests.
Why can I not see it on the live page?
In Only when offline mode it is hidden while you are connected. Switch your device offline to see it.
Why does the fixed bar sit at the bottom in the editor?
It previews in place so you can style it. Visitors see it only while offline.
Why does it show nothing in an old browser?
Browsers that do not report their connection state show nothing, rather than a guess.
Network status indicator plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Does it send requests to check the connection?
No. It only listens to what the browser reports.
Is the change announced to screen readers?
Yes. The message sits in a status region, so changes are announced politely.
Can it show only when there is a problem?
Yes. Choose Only when offline; it then appears when the connection drops and briefly when it returns.
Does it need JavaScript?
Yes. Without it nothing shows, unless you add a no-JavaScript message.
10 / Annual All Access subscription
Get network status indicator with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.