Home Mastering our Platform Locator + Pages

Implement the Locator + Pages widget

Last updated on August 30th, 2024

Table of Contents

Understand the HTML code structureStart customization of Locator and Pages widgetMore advanced editing and optimization options 

To 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 the tree dots on the right to expose the global options:



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.

Was this article helpful?

Save as PDF