Versions Compared

Version Old Version 20 New Version Current
Changes made by

Robert Cox

Robert Cox

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Summary

This guide provides step-by-step instructions to help you embed MazeMap Maps on your website using an HTML iframe code snippet. Whether you want to use a pre-configured snippet or customise it yourself, this guide will assist you in setting up the embedding process for a seamless user experience.

Table of Contents

Skill Level

Intermediate / Familiarity with HTML, JavaScript, and basic web development concepts.

Prerequisites

Before you begin, please ensure the following:

  • Your website supports embedding of <iframe>.

  • You have received the required CONFIG_TAG.

  • If applicable, the VIEW_ACCESS_TOKEN (for private maps) from MazeMap.

  • Ensure your site’s Content Security Policy (CSP) allows embedding from https://use.mazemap.com.

Specific Setup

Option A: Customise the Snippet Yourself

...

Request a pre-configured snippet from your Customer Success Manager. They will provide you with a ready-to-use code snippet tailored to your use case.

Special Considerations

  • Linking to Specific Campus ID: Append &campusid=X to the <iframe> URL if you need to link to a different campus than the one specified in your config.

  • Allowing “Web Share API”: To enable native web sharing from the <iframe>, add allow="web-share" to the <iframe> tag.

    Read more: Allowing Web Share on Third-Party Sites

  • Accessibility Compliance: Ensure the embedded iframe is accessible to all users, including those using screen readers or other assistive technologies. Add appropriate title attributes and consider keyboard navigation.

  • Content Security Policy (CSP): Verify that your site’s CSP allows embedding content from https://use.mazemap.com.

  • Performance Optimisation: Use lazy loading for the iframe if it’s not immediately visible on page load to improve page performance.

    Code Block
    languagehtml
    <iframe loading="lazy" ...></iframe>

Process

  1. Choose your setup option: Use a pre-configured snippet or customize it yourself.

  2. Embed the IFrame snippet: Place the code on your webpage.

  3. Configure additional features: Adjust for specific campus IDs or enable Web Share API as needed.

  4. Implement custom share link handling: Ensure shared links point to your domain and are processed correctly.

Example Scenarios

  • University Campus Map: Embedding a map for a university campus to allow students and visitors to navigate easily.

  • Hospital Navigation: Providing a hospital map to help patients and visitors find their way around the facility.

Troubleshooting

  • URL Issues: Ensure that URLs are correctly formatted and valid, especially when handling custom share links.

  • Campus ID Linking: Verify the campus ID if linking to a specific location is necessary.

  • Web Share API: Test the web share functionality thoroughly before deploying.

Maintenance and Updates

Regularly review the embedded MazeMap to ensure compatibility with updates or changes in the MazeMap platform or your website’s framework.

Optional Enhancement: Add a Splash Screen Overlay

If you would like to display a welcome message, announcement, or important link before users access the embedded MazeMap, consider adding a splash screen overlay. This lightweight addition sits above your iframe and can be dismissed by the user. It’s especially useful for sharing timely updates, promoting FAQs, or highlighting events.

...

For setup instructions and code examples, see the companion guide: Adding a Splash Screen to Your MazeMap <iframe> Maps.

Common Issues and FAQ

  • Why is my map not displaying correctly?

    • Ensure that the iframe URL is correctly formatted and that the CONFIG_TAG and VIEW_ACCESS_TOKEN are properly set.

  • Can I customize the look and feel of the embedded map?

    • Basic customisation is possible by modifying the iframe’s size and adding external buttons, but more detailed customizations require the JS API.

Additional Resources

Support

If you encounter issues not covered in this guide, please reach out to your Customer Success Manager or contact MazeMap Support.

Conclusion

Embedding MazeMap into your website can be straightforward with the correct setup and customisation. This guide should provide all the necessary information, whether you opt for a pre-configured snippet or prefer to adjust the setup yourself. For further customisation or troubleshooting, consult with your Customer Success Manager.