Using the Web Embed Feature: Enhance Your Directory Experience
RoveIQ’s Web Embed feature allows you to seamlessly integrate your directory map into your website. This powerful tool adds value to your users by giving them direct access to your property map, helping them plan their trip and navigate your location even before they arrive.
Embedding a Single Location
If you want to highlight a specific location on your map, you can add a Location iFrame to a page on your website. Here’s how:
- Navigate to the RoveIQ Portal:
- Log in to your RoveIQ account.
- Go to Content > Locations.
- Find the Location to Embed:
- Search for or scroll to the location you want to embed on your website.
- Click Edit next to that location.
- Copy the iFrame Embed Code:
- In the dialog box that appears, go to the Settings tab.
- Scroll to the bottom of the settings page to find the iFrame Embed section.
- Click Copy to copy the iFrame code to your clipboard.
- In the dialog box that appears, go to the Settings tab.
- Embed the iFrame on Your Website:
- Open the webpage where you want to embed the location.
- Paste the iFrame code into the HTML of the page.
- Refresh and Verify:
- Save your changes and refresh the webpage.
- You’ll see the map for the specific location displayed on your page, ready for users to explore.
Configuration Options
You can add some query params to the iframe urls to override default settings. The 4 options
available are:
- Zoom: number (Min: 0, Max: 22), with 0 being the lowest zoom level (full zoomed out) and 22 being the highest (fully zoomed in).
- Pitch: number (Min: 0, Max: 85): starting pitch of the map 0 to 85
- Bearing: number: starting bearing of the map, 0 = north, 90 = east, 180 = south, 270 = west
- Hidecontrols: number (0 or 1 for off or on respectively
Example URL with Custom Options:
Here’s an example of a full embed URL with several customization options applied:
<iframe src="https://embed.roveiq.com/venues/[VENUE_ID_HERE]?zoom=20&pitch=30&bearing=60&hidecontrols=1" width="100%" height="600" style="border:0;" </iframe>
This version:
- Sets the zoom level to 20
- Tilts the map to a 30° pitch
- Rotates the view to 60° (northeast)
- Hides the control menu for a cleaner look
Embedding the Full Web Map on a Dedicated Web Page
In addition to embedding location-specific maps on individual pages, you can also embed the entire interactive web map experience into a dedicated webpage. This is ideal for users who want to explore the full directory experience in one place.
-
Add the Embed Snippet:
-
Place the following code snippet where you’d like the map to appear on your webpage:
<iframe src="https://embed.roveiq.com/venues/[VENUE_ID_HERE]" width="100%" height="600" style="border:0;"></iframe>
-
Your VENUE_ID can be found in the "Web Embed" section under Settings.
-
Configuration Options
You can add some query params to the iframe urls to override default settings. The 4 options
available are:
- Zoom: number (Min: 0, Max: 22), with 0 being the lowest zoom level (full zoomed out) and 22 being the highest (fully zoomed in).
- Pitch: number (Min: 0, Max: 85): starting pitch of the map 0 to 85
- Bearing: number: starting bearing of the map, 0 = north, 90 = east, 180 = south, 270 = west
- Hidecontrols: number (0 or 1 for off or on respectively
Additional configuration options can be found in the RoveiQ portal by navigating to Settings, and clicking Web Embed.
-
Lat: number – Latitude to center the map by default (e.g., 40.7128).
-
Lng: number – Longitude to center the map by default (e.g., -74.0060).
-
SidebarTextColor: hex code – Sets the default text color for the sidebar (e.g., #000000).
-
SidebarSelectedTextColor: hex code – Sets the text color for selected items in the sidebar.
-
BuildingHighlightColor: hex code – Color used to highlight buildings when selected or interacted with.
-
DefaultMapboxZoom: number (1–20) – Mapbox’s zoom level used on load, separate from the primary zoom parameter.
-
RoveMapZoom: number (1–100) – Sets internal zoom logic, where 1 = fully zoomed out and 100 = fully zoomed in.
-
DefaultPitchMobile: number (0–85) – Starting pitch for mobile view if using guidance.
-
DefaultBearingMobile: number (0–359) – Starting bearing for mobile view.
-
CustomLogo: image upload – Upload a custom image to show during loading.
-
NorthBoundOffset / SouthBoundOffset / EastBoundOffset / WestBoundOffset: number – Sets boundaries for touch guidance to trigger earlier or later.
Location Details Settings
These control what appears in the sidebar when a user views a location:
-
StartWithDetailsExpanded: 0 or 1 – If set to 1, location details will be expanded by default.
-
HideBannerImage: 0 or 1 – Hides the location’s banner image.
-
HideLogoImage: 0 or 1 – Hides the location’s logo image.
-
HidePhone: 0 or 1 – Hides the phone number from the location details.
-
HideAddress: 0 or 1 – Hides the address from the location details.
-
HideHours: 0 or 1 – Hides operating hours from the location details.
-
HideWebsite: 0 or 1 – Hides the website link from the location details.
Example URL with Custom Options:
Here’s an example of a full embed URL with several customization options applied:
<iframe src="https://embed.roveiq.com/venues/[VENUE_ID_HERE]?zoom=20&pitch=30&bearing=60&width="100%" height="600" style="border:0;" </iframe>
This version:
- Sets the zoom level to 20
- Tilts the map to a 30° pitch
- Rotates the view to 60° (northeast)
Tips for Embedding a Rove Maps
- Responsive Design: Ensure the iFrame fits well within your website’s design for an optimal user experience.
- Test the Embed: Check the embedded map on various devices to ensure it’s fully functional across screen sizes.
- Provide Context: Add additional information, such as operating hours or contact details, on the same page to give users a complete overview of the location.
This Web Embed feature makes it easier than ever to showcase your map and improve the overall experience for your users. Whether it’s highlighting a single location or giving access to the entire property map, your website visitors will love the convenience and clarity this tool provides!