The floating button is a small button that sticks to the corner of every page on your website. When visitors click it, your store locator opens in an overlay. Great for giving visitors quick access without dedicating an entire page to it.

This feature is available on the Business plan.

Setting it up

Go to Floating Button > Settings
Customize the button text (default is "Store Locator")
Pick a background color
Choose whether to hide it on mobile devices
Save your changes

You can preview how it looks at Floating Button > Preview.

Installing on your website

Go to Floating Button > Install
Copy the embed code
Paste it into your website's <head> tag, or just before the closing </body> tag

The code looks like this:

<script>
window.StoreRocket = {
    account: "YOUR_ACCOUNT_ID"
};
</script>
<script src="https://cdn.storerocket.io/js/embed/v1.js" async defer></script>

The button will appear on every page where this code is present. If you only want it on specific pages, only add the code to those pages.

Changing the button position

By default the button sits at the bottom-right corner of the page (right: 10px, bottom: 0). You can control its exact position by adding a position property to the config:

<script>
window.StoreRocket = {
    account: "YOUR_ACCOUNT_ID",
    position: {
        right: "10px",
        bottom: "80px"
    }
};
</script>
<script src="https://cdn.storerocket.io/js/embed/v1.js" async defer></script>

The position object accepts these CSS properties:

bottom — distance from the bottom of the page. Increase this to move the button higher (e.g. "80px", "150px")
top — distance from the top. Use this instead of bottom to anchor the button to the top of the page
right — distance from the right edge (default: "10px")
left — distance from the left edge. Use this instead of right to put the button on the left side

All values are CSS units (px, em, %, etc.).

Common positioning examples

Move the button higher (to clear a chat widget or cookie banner):

position: {
    right: "10px",
    bottom: "80px"
}

Move the button to the left side:

position: {
    left: "10px",
    bottom: "0"
}

Using your own button instead

If you want to use your own button or link to open the store locator (instead of the floating button), use the trigger option with a CSS selector:

<script>
window.StoreRocket = {
    account: "YOUR_ACCOUNT_ID",
    trigger: "#my-store-locator-button"
};
</script>
<script src="https://cdn.storerocket.io/js/embed/v1.js" async defer></script>

Then add a button or link anywhere on your page with that ID:

<button id="my-store-locator-button">Find a Store</button>

When someone clicks your button, the store locator overlay opens. The floating button won't appear when you use a custom trigger.

Embedding inside a specific container

If you want the button to appear inside a specific section of your page (instead of fixed to the browser window), use the parent option:

<script>
window.StoreRocket = {
    account: "YOUR_ACCOUNT_ID",
    parent: "#my-container"
};
</script>

The button will use absolute positioning within that container instead of fixed positioning on the page.

Customization options

Button text: Change it from "Store Locator" to whatever fits your site ("Find a Store", "Locations", etc.)
Background color: Match it to your brand colors
Hide on mobile: The button can be hidden on small screens if you'd rather link to a dedicated page on mobile