Last updated
Last updated
Allows you to "localize" corporate website experiences using the Local/Franchisee information. Examples include showing the Location name and phone number in the Header with key CTAs like calling, visiting the Local site or contacting the Location.
Franchisee information can be displayed within corporate pages after they have already visited the Franchisee's local site, or optionally you can auto-detect the visitor location and show them the local information of the Franchisee nearest to them.
Place the following script at the end of the <body> of any page your want the localization to run.
Replace the data-api-key="YOUR-API-KEY-HERE" with the API key provided to you by DevHub.
Update the onLocationSet to use the Location information to update your page. More examples below
Add additional configuration options to sbGeoipOptions as needed
Simple onLocationSet example that displays the Location name within an element on the page.
onLocationSet exampleHere is an example that replaces an element's content with some HTML containing the location name, phone number, CTA button and the display's the estimated visitor's zip code if available.
onLocationSet exampleautomaticLocalization)If a visitor does not already have a Franchisee/Location assigned from a previous visit, should we use the visitor's IP address to search for their nearest location.
If disabled, then the only way a visitor is assigned a Location is by visiting a Franchisee/Local site first.
dni)Using the Franchisee/Location phone number entered into DevHub, should we replace all phone numbers within the corporate page content with the local number.
Note: if you are using your own call tracking provider, you will want to confirm that their DNI scripts work well in combination with ours.
ignorePaths)This is a list of website page paths where you do not want the Visitor location to run. If one of these paths if opened by the visitor, no localization will execute. List of page paths starting with slash ("/")
localizeLinks)Option to provide a list of page paths that should be "localized" to the Franchisee/Local site version when clicked.
Example: if the corporate site has a /contact-us/ and an /about-us/ page, and the Franchisee sites also have the same pages, but under their Location site URL like /seattle/contact-us/ and /seattle/about-us/. If the visitor clicks on any corporate link to those pages, they will instead get routed to the Local version of that page instead.
Note: This only works if the paths are exactly the same on the Corporate and Local sites
locationApiOptions)Advanced options to configure the Local search API call used when automaticLocalization is enabled.
threshold: 200 - Used to limit how far a nearby location will be searched based on the visitor location.
locationCacheType)Method of storage for the Location information in the browser.
"localStorage" (default) or "sessionStorage".
localStorage will keep the location information if the visitor closes the window and comes back for a future session
sessionStorage will only keep the visitor localized for the current session and cleared after closing the browser window.
onLocationSet)This is the primary callback function that runs once we have the Franchisee/Location information available. This is where you can then use this information to render content into your site.
On successful lookup, will return a response object that contains the following:
This is the geo IP data about the visitor
Includes:
geoip.zip - Zip code detected for the visitor
Using the searchLocations method to re-search locations using a manually entered search query (city and state, postal code or full address). Typically this would be tied to a change location Form allowing the visitor to provide a more specific location.
Once searchLocations is called, a new Location search is executed. If a nearby location is found, it will re-trigger the onLocationSet callback. It will also return an optional callback function that can be used for logic based on success or error in the search.
Error statuses will return data under response.error. Example:
Below is a full reference example implementation of a Button that activates a Form allowing the visitor to search. During the search a Loading message appears. If successful, the form will hide. If there is an error, it will be displayed within the form.
Using the headlessContent utility within onLocationSet, you can fetch a copy of the Local site header or footer and using that HTML content then "mirror" that Local navigation into the Corporate navigation.
Using the headlessContent utility within onLocationSet, you can fetch the rendered "Localization" template that is part of your Theme. These blocks do not show on the rendered local site in any way, but this is where you can build modules/blocks of Localized content that you can then use within Corporate website experiences as needed.
The example below grabs that localized content and then updates an element (id="localization-target") on the corporate page when localized.
Note: you should only have one headlessContent call within onLocationSet. So if you already have other implementations (i.e. header_html) you would just need to add localization_html to the list of elements to grab under headlessContent.
If you want to create a testing page within the Local template, you can add a noindexed page and add the following JS to display the local content.
List of all the available script options that can be set (via sbGeoipOptions). More details on each option
More details on each option
For more complicated HTML templating, we suggest using a client-side templating library like to render the HTML needed.
This is our standard object containing address, phones, and location_url
This example uses the Geo IP information to then fetch multiple locations using our and then writes a list of Locations into an HTML element ( nearby-locations-target)