Embedding the RideStyler Locator on Your Website

The Locator widget allows you to add a dealer or store locator to your website. To embed the Locator on your site, simply follow the steps below.

1. Login to account.ridestyler.com and navigate to the Locator product dashboard (Marketing > Locator).

You need a paid subscription plan to access to the Locator. Also, you’ll need to add Locations to your account in order to populate your Locator.

2. Under Embed Locator, copy the Embed Code using the button or by highlighting the code snippet and manually copying it.

3. Copy the link element and add it to the head of your page:

<head>
   <link rel="stylesheet" type="text/css" href="//static.ridestyler.com/widgets/locator/edge/css/ridestyler-locator.css">
</head>

4. Add the scripts to the body of your page:

<body>
    <script src="//api.ridestyler.net/js?DataType=json&Key=YOUR_KEY"></script>
    <script src="//static.ridestyler.com/widgets/locator/edge/js/ridestyler-locator.js"></script>
</body>

5. Finally add a container to the page where you want the locator to show up and add a JS call to your page to tell the locator where to add itself by calling RideStylerLocator.create and passing it a selector to identify the container.

<body>
    <div class="ridestyler-locator"><!-- The RideStyler locator will appear here --></div>
    <script src="//api.ridestyler.net/js?DataType=json&Key=YOUR_KEY"></script>
    <script src="//static.ridestyler.com/widgets/locator/edge/js/ridestyler-locator.js"></script>

    <script type="text/javascript">
        RideStylerLocator.create('.ridestyler-locator');
    </script>
</body>

The locator will be inserted into the div with the ridestyler-locator class.

Custom Styling

By default the locator will try to choose a size if there’s not one assigned to the container.

You can control the size as well as any other style attribute by modifying the locator with CSS. For example, to make the locator fullscreen you could use the following CSS:

#rs-locator {
    width: 100%;
    height: 100%;
}

Advanced Settings

If you are looking to customize your widget even further, take a look at our github page where you can find a range of different Locator settings.