Show the Visitor’s City on Your Website (IP-based City Display)
Introduction
Automatically detect a visitor’s city from their IP address and display it on your pages. This helps localize messaging (e.g., “Serving Phoenix, AZ”) without manual page variations.
Prerequisites
- WordPress site using the IO/InflatableOffice website plugin.
- Admin access to WordPress to change plugin settings and edit pages.
- The Geolocation/Visitor City feature is available on your account (appears on the plugin’s Setup page).
- Optional but recommended: page builder access (e.g., Elementor) for placing the city element where you want it.
How to Enable and Use
1) Turn on Visitor City detection
- In WordPress Admin, open the IO/InflatableOffice plugin’s Setup (Admin Options) page.
- Find the "Enable Customer Geolocation" option.
- Toggle On and Save.
2) Add the city to your page
Choose one of the placement methods supported by your plugin version (the Setup page shows the exact option names available on your site):
- Elementor widget: Add the Visitor City widget to your page (e.g., the hero or service-area section). Set a default city to display while detection runs.
- Shortcode: Paste the city display shortcode [sc io_geolocation] from the plugin’s Setup page into your page/post content.
<div class="marquee-banner" role="region" aria-label="Site updates"> <div class="marquee"> <div class="marquee__track"> <ul class="marquee__list"> <li>[sc io_geolocation]</li> </ul> </div> </div> </div>
4) Publish and test
- View the page from a normal browser session.
- To test different locations, use a VPN or mobile data connection from another city.
- If you don’t see changes, clear the browser cache (and local storage) and reload.
Feature Options & Parameters
- Default city text: Shown if geolocation is blocked or temporarily unavailable.
- Placement options: Elementor widget, shortcode, or HTML snippet (your plugin Setup page lists what your site supports).
- Caching: City results are cached to reduce repeated lookups and improve speed. The display swaps seamlessly after detection.
- On/Off toggle: Enable or disable at any time in the plugin Setup.
- Styling: Apply your theme or page builder styles to the city text. If using the HTML snippet, you can target the provided class in CSS.
Use Cases
- Show “Serving [Your City]” near the top of your homepage to reassure visitors they’re in your service area.
- Personalize headings on multi-location pages without maintaining separate versions for each city.