Introduction
It takes only a few steps to install the map on your own site. This works on any site and on any device. As long as you can add a small piece of HTML to your website then you can install the map.
Below is an overview of the 2 primary ways you can install your map to your website: Overlay Installation and iFrame Embed.
Once you're ready for specific embed instructions with your unique map key visit the map on your dashboard and click the "Install Map" button in the top right corner to get started.
- For Shopify instructions, click here.
- For Squarespace instructions, click here.
- For any other website, continue reading below :)
If you are having any trouble please submit a request we are always happy to help with your specific installation.
Overlay Installation
The default launcher is the easiest way to install the Closeby locator on your website. This approach will add the launcher on every page so that no matter where visitors are on your site they can conveniently open the locator and find your locations.
This is what is looks like in the bottom right corner of your website:
All you have to do is install the Closeby javascript by either connecting Shopify or manually adding the Closeby script to your website. When you do that the launcher will automatically show up. If it is not showing up, check your map customizations and make sure the "Enable Launcher" option is checked.
To people more familiar with custom code, you can learn how to open the overlay with links (instead of the default launcher) here.
iFrame Embed Installation
If you do not wish to use the Closeby launcher and instead embed the Closeby locator directly onto a specific page, you can do that using the iFrame Embed.
Note: You can find you map embed code by visiting your map installation page.
For this method, you do not need to install the Closeby javascript library. You just need to add your map's embed code to your website and it will appear. This allows you to embed the map according to your website styles, whether you want it to appear within other content or as a full-width widget.
Examples:
Once you've installed your map embed code, you can also adjust the "width" and "height" attributes to values that work well on your use case:
<iframe... width="100%" height="800" style="border:none" />