Implement the Locator + Pages widget
Table of Contents
Table of Contents
Understand the HTML code structureStart customization of Locator and Pages widgetMore advanced editing and optimization optionsTo start the implementation of the Locator & Pages widget into your website, you need to have access to manage pages on your web server. The Locator & Pages widget needs to be either added to an existing HTML page or to a new HTML page.
Understanding the HTML code structure
The Locator & Pages HTML code consists of two elements:
- a <script> tag
- a <div> element
Both must be added to the HTML code of the designated page for the Locator.
The widget in its most basic form looks like this:
<script src="https://uberall.com/assets/storeFinderWidget-v2.js" type="text/javascript"></script> <div id="store-finder-widget" data-key="KEY" style="min-height:600px;" </div>
Place the <script> tag and the <div> element in the <body> of the page hosting the Locator. The position of the Locator on the page will be determined by where it is placed in the HTML of the page.
Export the Snippet from our platform
Find the Locator in our platform, from which you want to export the snippet:
Click "Snippet" and the widget code will be exposed:
Start the customization of your Locator & Pages widget
To customize your Locator & Pages widget to your needs, we recommend the following articles:
Part 1 Components |
Understand the different components of the Locator & Pages widget and how these components are structured and displayed in Locator & Pages components. |
Part 2 Preview |
Learn how to customize the Locator & Pages attributes and how to preview those changes before committing them. |
Part 3 Customization |
Learn about all of the available attributes for the Locator & Pages widget to customize the Locator to your needs. |
More advanced editing and optimization options
Besides the implementation and customization of the Locator & Pages widget mentioned above we collected additional, useful knowledge on how to further improve your Locator & Pages in the following articles. These articles particularly aim at improve the user experience of the Locator & Pages widget:
- The Pages URL's contain a hashbang (#!). To remove it please read through this article.
- Make sure your Pages are indexed by Google - find a "How to" here.
- Data protection: Which cookies are used and their behaviour can be found here.
- How to set up multiple languages for globally operating companies is explained in this documentation.
Info
For further customization that cannot be facilitated by the Locator & Pages attributes, you may need to use Cascading Style Sheets (CSS) programming. We already collected some handy CSS code snippets that can be used. Read this article for more info about CSS.