How to Embed the Web App

TABLE OF CONTENTS

• Use Cases:
  • Use Case 1: Create an interactive exploration map for visitors
  • Use Case 2: Create an automated business directory or event calendar
• Getting Started: Embedding Your Web App 
  • Step 1: Locate Your Web App Iframe
  • Step 2: Embed the iframe on Your Website or Web Pages
  • Step 3: Editing Your Web App’s Height
• Need Help?

Driftscape for Web is more than just a map. It’s a powerful tool that encourages visitors to explore your region through rich media and immersive storytelling. Here’s how you can embed the web app on your website and make the most of it! 

Use Cases:

Use Case 1: Create an interactive exploration map for visitors

Embed the web app on your homepage or other prominent sections of your website. This allows visitors to discover all the content you have mapped, take virtual tours, and plan their trips!

Example: See how Thunder Bay embedded their web app to showcase regional tours in a user-friendly way, using Driftscape’s custom menu feature for easy navigation.

Use Case 2: Create an automated business directory or event calendar

Driftscape for Web can also be used to create directories or event calendars on your website. This centralizes your content management, eliminating the need for multiple tools.

Example: See how Cabbagetown BIA uses the web app for their business directory

Getting Started: Embedding Your Web App 

Step 1: Locate Your Web App Iframe

• Once your Customer Success (CS) representative sets up your web app, they will provide you with a unique Iframe code. It will look something like this:

<iframe src='https://webapp.driftscape.com/map?key=NnFXS1R5by9rUEpMTzZmcUlJeitlaC9VdkJYNU8vNTVlVE1CeEltbUtNWT0=' style='height: 400px; width: 100%'></iframe>

Step 2: Embed the iframe on Your Website or Web Pages

Note: Driftscape does not gate the number of websites or web pages you embed your web app on. We recommend embedding it on multiple pages to enhance your visitor experience.

• Place the iframe Code
  Embed the HTML code on the page where you want the web app to appear. If you're using website builders like WordPress or Wix, use an ‘Iframe’ widget to add the code. For example: For Wix, follow the instructions noted in this article.

  • Note: Your iframe code is unique to your organization. Do not share it with other websites, as it will only function on your domain.

• When you first embed the iframe, you may see an error message:

• Driftscape for Web is password protected, so it can be embedded only in registered domains. Send this error message (screenshot) to your Driftscape representative. They will add your domain to the list of authorized domains. It’s also helpful to share the URL of the pages where you are embedding the web app, so the team can test it after setup.

Step 3: Editing Your Web App’s Height

• To edit the height or width of your web app, edit the ‘width’ and ‘height’ parameters in the iframe code (highlighted). 

<iframe src='https://webapp.driftscape.com/map?key=NnFXS1R5by9rUEpMTzZmcUlJeitlaC9VdkJYNU8vNTVlVE1CeEltbUtNWT0=' style='height: 400px; width: 100%'></iframe>

• The height can be set to 100%, if your website tool ‘wraps’ the iframe itself, with additional parameters.

• An ideal web app embed height and width would look like this: Click here to see an example.

• Note: You should test your embed on desktop and mobile browsers, to make sure that it resizes responsively. You may have to change settings in your website tool to make the iframe resize responsively.

Need Help?

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