Table of Contents
Locator Widget List of attributes Locator General Settings Locator List View Settings Pages General Settings Pages Components Settings Pages Content List Settings Color Settings Locator Widget example Code SampleThe 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.
Locator Widget
<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:
|
data-localpagedescription |
text input Define one description for all pages. Use placeholders do individualize descriptions using the placeholder format $placeholder:
|
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!
Locator Widget example
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>