Home Mastering our Platform Locator + Pages

Locator and Pages attributes

Widget template, which holds all locator functionalities - ready to send out with a couple of edits.

Last updated on April 3rd, 2024

The default Locator Widget contains the minimum HTML elements that are required to execute the Locator Widget. In order to customize the appearance of the Locator Widget to be aligned with the requirements and design of the website it is possible to add HTML attributes within the <div> HTML element to adjust the displayed components.

<script src="https://uberall.com/assets/storeFinderWidget-v2.js" type="text/javascript"></script> 
<div 
 id="store-finder-widget" 
 data-key="{{locator-data-key}}" 
></div>

Required elements and attributes

Element	Attributes
<script>	<source> of the Locator Widget JavaScript <type> characteristic of the script element
<div>	<id> defines the content division of the Locator Widget <data-key> identifies the specific set-up of the displayed content

List of attributes

Collective list of possible settings that is provided.

Locator General Settings

Attribute	Description
data-baseurl	URL path Define the database production or sandbox
data-widgetoriginurl	URL path Define the database production or sandbox
data-title	text input Define title of the Locator Widget
data-logourl	URL path public accessible picture in .png or .jpg format
data-locationpinurl	URL path public accessible picture in .png or .jpg format
data-locationpinurl-business	text input "$business_id1=URL_PATH1, $business_id2=URL_PATH2, ..." - public accessible picture in .png or .jpg format required set up of "data-locationpinurl"
data-locationpincolor	text input Accepts a color either in text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-locationpinhovercolor	text input Accepts a color either in text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-clustericoncolor	text input Accepts a color either in text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-clustericonhovercolor	text input Accepts a color either in text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-footertext	text input Define footer of the Locator Widget
data-language	text input Values: "en"/"de" Define the displayed language of the Locator Widget with two-letter language code
data-countries	text input Values: "US"/"DE" Define the displayed locations by country with two-letter country code
data-askforlocationonload	boolean Values: "true"/"false"
data-businessidlistwithoutdetailpage	text input "Pin only" locations - have locations without a local page by adding the business ids of the location to that attribute; list business ids comma separated e.g.: "businessId_1,businessId_2,..."
data-trackevents	boolean Values: "true"/"false"
data-gapikey	text input The google maps API key - if not added then regular key is take from the system as default.
data-mapcentercoordinates	text input Define lat and lng (“lat:40.4;lng:-3.7") on which map should get centered.

Locator Meta Tags

Attribute	Description
data-mainpagetitle	text input Define the page title of the page on which the locator is embed.
data-mainpagedescription	text input Define the description of the page on which the locator is embed.
data-localpagetitle	text input Define one local page title for all pages. Use placeholders do individualize titles using the placeholder format $placeholder: $name $city $address $zip $keywords $CustomFieldName
data-localpagedescription	text input Define one description for all pages. Use placeholders do individualize descriptions using the placeholder format $placeholder: $name $city $address $zip $keywords $CustomFieldName

Locator List View Settings

Attribute	Description
data-hideopennowfilter	boolean Values: "true"/"false"
data-imperialunits	boolean Values: "true"/"false"
data-filters	text input Selects the fields controlling the filters data. This can be the services field or an advanced filter field.
data-filter-services	text input Selection of displayed filters in the Locator List View. The text input of the filters has to match the services of the location data. required set-up of data-filters; separated by commas
data-showaddressextra	boolean Values: "true"/"false"
data-showactionbuttons	boolean Values: "true"/"false" Display/Hide CTAs for directions and calling in the location list
data-showctabuttoninlocationlist	boolean Values: "true"/"false" Display/Hide custom CTAs in the location list
data-showfullwidth	boolean Values: "true"/"false" Stretches the map to the full width of its enclosing container.
data-hidefilterbar	boolean Values: "true"/"false" Hides the dropdown filter bar if set to true.

Pages General Settings

Attribute	Description
data-locationpageheader	text input Values: "map"/"hero" Selection of displayed location page header either a map view or a the panorama picture of location data with a dimension of 2266 x 480 pixels default "map"
data-showfooter	boolean Values: "true"/"false"
data-showheader	boolean Values: "true"/"false"
data-showattribution	boolean Values: "true"/"false"
data-showaddressextra	boolean Values: "true"/"false"
data-noindexlocationsmap	boolean Values: "true"/"false" Sitemap pages will not get indexed by Google.

Pages Components Settings

Attribute	Description
data-minimumreviewratingtoshow	text input Defines the minimum star rating a review has to have to be displayed. Must be used in conjunction with data-showreviews="true" Values: "1"/ "2"/ "3"/ "4"/ "5"
data-showkeywords	boolean Values: "true"/"false"
data-showcategories	boolean Values: "true"/"false"
data-showlanguages	boolean Values: "true"/"false"
data-showwebsite	boolean Values: "true"/"false"
data-showlogo	boolean Values: "true"/"false"
data-showsimilarlocations	boolean Values: "true"/"false"
data-showservices	boolean Values: "true"/"false"
data-showbrands	boolean Values: "true"/"false"
data-showbacklink	boolean Define if the "back to map view" should be displayed Values: "true"/"false"
data-showreviews	boolean Define if customer feedback should be displayed - Google my Business only Values: "true"/"false"
data-showpaymentmethods	boolean Values: "true"/"false"
data-useidentifier	boolean Values: "true"/"false"
data-uselatinencodedurls	boolean Values: "true"/"false" Used for addresses with non latin characters to fit
data-showzipcity	boolean Values: "true"/"false"
data-showsocialprofiles	boolean Values: "true"/"false"
data-showimprint	boolean Values: "true"/"false"
data-primarycolumn-snippetcustomfieldkey	Text input Value: name of your custom field containing the HTML
data-secondarycolumn-snippetcustomfieldkey	Text input Value: name of your custom field containing the HTML

Pages Content List Settings

Attribute	Description
data-showProductContentList	boolean Values: "true"/"false"
data-showMenuContentList	boolean Values: "true"/"false"
data-showEventContentList	boolean Values: "true"/"false"
data-showCustomContentList	boolean Values: "true"/"false"
data-showPeopleContentList	boolean Values: "true"/"false"

Color Settings

Attribute	Description
data-buttonbgcolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-buttontextcolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-linkcolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-primarytextcolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-bgprimarycolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-bgsecondarycolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-bordercolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-listitemhovercolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")
data-secondarytextcolor	text input Define the color of that element by using text, RGB code or Hex code ("red","rgb(255,0,0)", "#EB4034")

If you like to give us feedback (e.g. something is missing or for a suggestion) please get in touch with us!

The following Locator Widget code is an example which holds all available attributes, although not all are used, that are provided.

Code

<script src="https://uberall.com/assets/storeFinderWidget-v2.js" type="text/javascript"></script>

<div   
id="store-finder-widget" 
data-key="{{locator-data-key}}" 
data-baseurl="https://uberall.com" 


data-title="Locator + Pages"
data-logourl="{{logo-url}}"
data-locationpinurl="{{pin-url}}" 
data-locationpinurl-business=""
data-locationpincolor=""
data-locationpinhovercolor=""
data-clustericoncolor=""
data-clustericonhovercolor=""
data-footertext="copyright (2020 Uberall)"
data-locationpageheader="map"
data-showfullwidth="false"

data-language="" 
data-countries="" 


data-askforlocationonload="true" 
data-trackevents="true" 


data-hideopennowfilter="false" 
data-imperialunits="false" 
data-filters="services" 
data-filter-services="" 
data-hidefilterbar="false"


data-showkeywords="false"
data-showcategories="true"
data-showlanguages="true"
data-showwebsite="true"
data-showlogo="true"
data-showsimilarlocations="true"
data-showservices="true"
data-showbrands="false"
data-showbacklink="true"
data-showreviews="true"
data-showpaymentmethods="false"
data-useidentifier="false"
data-showzipcity="true"
data-showfooter="true"
data-showheader="true"
data-showattribution="true"


data-showProductContentList="true"
data-showMenuContentList="true"
data-showEventContentList="true"
data-showCustomContentList="true"
data-showPeopleContentList="true"


data-buttonbgcolor="#3096DE" 
data-buttontextcolor="white" 
data-linkcolor="#3096DE"
data-primarytextcolor="#3C77B2"  

data-bgprimarycolor="#FFFFFF"
data-bgsecondarycolor="#FFFFFF"
data-bordercolor="#FFFFFF"
data-listitemhovercolor="#FFFFFF"
data-secondarytextcolor="#FFFFFF"
data-primarycolumn-snippetcustomfieldkey="custom-primary"
data-secondarycolumn-snippetcustomfieldkey="custom-secondary"

></div>

Sample

Save as PDF