Embedding a Map to Your Smart Builder Page

Follow

Adding an interactive map to your page is an easy way for your customers to locate your business relative to their location.

This can also encourage your page visitors to remain on your landing page when looking for directions to your business, helping you retain more views and lower bounce rates.

This article will explain how to add a map to your landing page built with Smart Builder, with the help of Unbounce Apps

Installing the Map App

  1. Navigate to the Apps tab on the left-hand side of Smart Builder.
  2. Search and locate the Map App.
  3. Click the plus button next to Map to install the app.
  4. You may see a pop-up that appears, explaining that this App is swappable, like so:
    A pop-up on top of Smart Builder explaining that this App is swappable.

See our documentation to learn more about swappable elements: Swapping Elements in Smart Builder

Once you've installed the App, you can apply it to the landing page.

Adding a Map to Your Page

Once you've installed the Map App, you can replace any other element on your page - an image, button, headings, etc. - with an interactive map simply by swapping out the elements. 

For this example, let's replace an image element with a map!

  1. Single-click any element in Smart Builder you'd like to replace with an interactive map.
  2. Click the Swap Element icon that appears at the bottom of the element.
  3. A drop-down menu will appear with different element options to swap the existing one with.
  4. Scroll down to Map:
    A drop-down menu with different swappable elements listed, including Map(s).
  5. A map box will appear within that section. See this demo:
    Gif demo of user clicking the swappable element icon and selecting Maps from the list. A map widget appears in Smart Builder.
  6. Click Set Up an Address.
  7. From the window that appears, type in your city, location, or business address, and press Enter on your keyboard. 
  8. Select a location from the drop-down list that appears: 
    A field to enter a location (example: Vancouver) with a drop-down list of suggested locations.
  9. Once you've selected the location, click Continue
  10. The map will appear on your landing page:
    A gif demo of a user selecting 'Vancouver' from the list; a map of Vancouver appers in Smart Builder.

To view your map in real-time, toggle the Preview button at the top of Smart Builder: 

A gif demo of a user toggling the Preview button at top of Smart Builder.

Be sure to Save and Publish your page.