LocationBias | Yext Hitchhikers Platform

Background

The location bias shows the user where we think they are located. The purpose of this component is to inform the user as well as to allow them to opt in for HTML5 geolocation. It is recommended to display this at the bottom of any search results page.

Note: If you want to allow a user to select a location check out the GeoLocationFilter component here .

Default Styling

If we are using IP address to locate the user, the component looks something like this:

If the user has opted in to HTML5 Gelocation, then the component looks something like this:

Basic Configuration

The only required option is verticalKey when this is used on vertical search results page (if not included in top level search configuration ).

<div class="location-bias-container"></div>

ANSWERS.addComponent("LocationBias", {
  container: ".location-bias-container",
  // verticalKey: "VERTICAL_KEY"
});

Advanced Configuration

HTML5 Geolocation

Similar to the Search Bar component , you can adjust the options passed to the Geolocation API .

You can reduce the timeout (geolocationOptions.timeout) or increase the maximum age for a geolocation request (geolocationOptions.maximumAge) and add an optional alert if the request fails (geolocationTimeoutAlert).

Additionally, if the accuracy of geolocation accuracy is particularly important, you can enable “high accuracy”, which will provide more accurate geolocation results at the expense of response time and/or device power consumption.

ANSWERS.addComponent("LocationBias", {
  container: ".location-bias-container",
  geolocationOptions: {
    timeout: 500,
    maximumAge: 300000,
    enableHighAccuracy: false
  },
  geolocationTimeoutAlert: {
    enabled: true,
    message: "We are unable to determine your location"
  }
});

Overriding Strings

You can also override the default strings used in the component using the following attributes:

ipAccuracyHelpText: Text displayed when geolocation fails and IP address is used to determine location
deviceAccuracyHelpText: Text displayed when geolocation succeeds and HTML5 is used to determine location.

updateLocationButtonText: Button text used to re-request location information.

ANSWERS.addComponent("LocationBias", {
container: ".location-bias-container",
ipAccuracyHelpText: 'based on your internet address',
deviceAccuracyHelpText: 'based on your device',
updateLocationButtonText: 'Update your location',
});

Example

LocationBias API

Property	Type	Default	Description
verticalKey	string		If used on Vertical Search Page, the `verticalKey` for the vertical. Required if not included in top level search configuration .
updateLocationEl	string	.js-locationBias-update-location	Selector for button a user clicks to update their location.
ipAccuracyHelpText	string	based on your internet address	Text displayed when geolocation fails, and IP address is used to determine location.
deviceAccuracyHelpText	string	based on your device	Text displayed when geolocation succeeds, and HTML5 is used to determine location.
updateLocationButtonText	string	Update your location	Label of the button to update your location.
geolocationOptions	object		Geolocation-related configuration. See Geolocation Documentation for more information.
enableHighAccuracy	boolean		Whether to improve accuracy at the cost of response time and/or power consumption, defaults to false.
timeout	number	6000	The maximum amount of time (in ms) a geolocation call is allowed to take before defaulting, defaults to 1 second.
maximumAge	number	300000	The maximum amount of time (in ms) to cache a geolocation call, defaults to 5 minutes.
geolocationTimeoutAlert	object		Configuration for a native alert, displayed when a call to the geolocation API fails.
enabled	boolean		Whether to display a window.alert() on the page.
message	string	We are unable to determine your location	If `enabled` is true, the message in the alert.

Back

< Pagination

Icon >

<% elem.innerText %>