Closeby

How to integrate Closeby with Webflow

Online visitors who can't easily find physical locations often abandon the website. Without an integrated store locator, businesses must send users to external mapping services or maintain separate location pages. A functional store locator keeps customers on your site while helping them find nearby locations, view store details, and get directions.

You can integrate Closeby with Webflow using three methods. Use the Closeby app from the Webflow Apps marketplace for the fastest setup with no coding required. Embed with iframe for page-specific placement using the Webflow Custom code embed.  

Use the Closeby app

The Closeby app in the Webflow Apps marketplace provides the simplest integration path. Install the app directly from the marketplace, select a section on your Webflow site where you want the locator to appear, and configure your locations through the Closeby dashboard. This method requires no code knowledge and works entirely through visual interfaces.

The marketplace app includes these features:

• Visitors search by address or zip code to find nearby stores, with results automatically sorted by distance  
• Customize colors, fonts, visual styles, and map pins to match your site's branding  
• Manage location data through Google Sheets integration, allowing non-technical team members to add or update store information  
• Connect Google Analytics to track engagement with your locator  
• The locator automatically adapts to different screen sizes without additional configuration

The app is approved by Webflow and requires a free Mapbox account with an access token to activate the mapping functionality. Setup involves installing the Closeby app extension, adding it to a section on your Webflow site, configuring locations through www.closeby.co, and customizing the appearance to match your brand.

Embed with iframe

For page-specific placement, Closeby provides an iframe embed method that works with Webflow's Custom code embed.

Iframe embed for page-specific installation

The iframe method places the store locator directly on specific pages. You receive an iframe code snippet from your Closeby dashboard that looks like this:

<iframe src="https://maps.closeby.co/embed/YOUR_MAP_KEY" 
        width="100%" 
        height="800" 
        style="border:none">
</iframe>

To implement in Webflow, drag a Custom code embed onto your page where you want the locator to appear, paste the iframe code, and publish. You can adjust width and height values to fit your layout requirements. The 50,000-character limit on Custom code embed elements accommodates standard iframe implementations, though complex code can be hosted externally and referenced if needed.

This method works well for dedicated "Find a Store" pages where you control the exact placement and dimensions of the locator.

What you can build

Integrating Closeby with Webflow allows multi-location businesses to connect online visitors with physical stores through branded, searchable location finders.

• Retail chain store locator pages: Build a dedicated "Find a Store" page where customers search by zip code or address to find nearby locations with store hours, contact information, and driving directions  
• Franchise location directory: Create a searchable directory for franchise businesses where each location maintains its own contact details, hours, and special offerings through Google Sheets  
• Service area finder for appointment-based businesses: Display locations for businesses like dental offices, physical therapy clinics, or salon chains where customers need to find the nearest location to book appointments  
• Multi-location e-commerce showrooms: Build a locator for online retailers with physical showroom locations where customers can view products in person and see showroom hours