Embedding the Web App to Display Only Select Content (Single or Sets of POIs)

Modified on Sun, 15 Sep at 6:56 PM

TABLE OF CONTENTS

Use Cases:
- Use Case 1: Tailored Content for Specific Categories
- Use Case 2: Highlighting Special Points of Interest
Getting Started: Customize Your Web App Embed
Need Help?

We know how crucial it is to give your visitors a seamless experience when they land on your website—especially when they're exploring your destination map to plan their trip. With Driftscape for Web, you can effortlessly embed your custom map across multiple web pages and tailor it to deliver exactly the experience you want, ensuring that every visitor finds what they’re looking for with ease.

Use Cases:

Use Case 1: Tailored Content for Specific Categories

Imagine your website has different sections, like "Things to Do" or "Local Art." When visitors click on these pages, you want to showcase only your content that pertains to the topic of that webpage. With Driftscape for Web, you can embed a custom-branded map on each page, displaying only the sites and stories that match the category.

For example, if a visitor lands on your "Local Murals" page, they’ll see a map featuring only the local art points of interest (POIs). Each POI can be enriched with engaging content like videos, images, and audio, creating a focused and immersive experience.

Use Case 2: Highlighting Special Points of Interest

Do you have a specific POI you want to spotlight for a limited time? With Driftscape for Web, you can customize your web app to feature that POI prominently whenever someone visits the page where the map is embedded. This makes it easy for your visitors to find and explore special attractions, ensuring they don’t miss out on what you want to highlight.

Getting Started: Customize Your Web App Embed

Step 1: Locate Your Web App iframe

After your Customer Success (CS) representative sets up your web app, they will share a unique iframe code with you. It will look something like this:

Step 2: Customize Your iframe to Load a Specific POI

To have the iframe load a specific Point of Interest (POI) when a visitor lands on the page, you’ll need to add the right deep link parameters followed by the POI’s unique identification ID (UUID) to the iframe…please refer to Creating your own Deeplinks

Find the UUID

You can find the UUID in your POI editor.

For example, the UUID for the POI above is: a29a480e-556c-11ef-8000-a7f8daf7a1d1

Edit the iframe

Add the deep link parameters along with the UUID to the iframe, like this (see orange highlighted text):

In this case, you needed to tell this iframe that your action “driftcape_action” was to “open_feature”. You also needed to tell the iframe what the UUID of the feature was and you did this by adding the parameter “driftscape_feature_uuid=(UUID CODE)”

<iframe

src='https://webapp.driftscape.com/map?driftscape_action=open_feature&driftscape_feature_uuid=a29a480e-556c-11ef-8000-a7f8daf7a1d1&key=NnFXS1R5by9rUEpMTzZmcUlJeitlaC9VdkJYNU8vNTVlVE1CeEltbUtNWT0=' style='height: 400px; width: 100%'></iframe>

Embed the iframe

Once updated, embed the iframe on your desired web page. The page will now load the specified POI automatically.

OR

Step 3: Customize Your iframe to Load a Specific Set of POIs

To display a specific group of POIs:

Add a Search Tag

In your POI editor, switch to “Source Mode”

Next, add a search tag at the end of the description box: The code to add a search tag is <div hidden="hidden">(add unique search term)</div>
Replace the orange highlighted part with your unique search term (e.g., __muralsofXYZ for mural-related POIs). Repeat this step for all relevant POIs.

Edit the iframe

Modify the iframe to include deep link parameters that load POIs with the specific search tag:

In this case, you needed to tell this iframe that your action “driftcape_action” was to “open_search”. You also needed to tell the iframe what search tag it should scan for and you did this by adding the parameter “search_filter=(the unique search term you added to your search tag)”

Note: If users close the search, they will see all your mapped content.

Similarly, you can set up your web app embed to pull up content from a specific Sub-Layer as well! Simply edit the iframe using the deep link creation guide linked above or contact your CS rep for help!

Need Help?

Submit a ticket, and our Customer Success team will assist you with your web app embed customization!