Skip to main content
All CollectionsUsing it like a Pro
How to embed your floor plan using iframe
How to embed your floor plan using iframe

Embedding your floor plan on your website and making it fit.

Kristina Belenova avatar
Written by Kristina Belenova
Updated over 2 months ago

You can seamlessly embed your floor plan as part of a webpage with iframe. It is also useful if you don't want to showcase the link to your floor plan.

It is offered to all floor plans at no additional cost.

Map integration section with "Map Integration" and iFrame code in boxes with arrows pointing at them

How to get your iframe code

To get the iframe code, go to Integration  and scroll to Embed floor plan into your website. Then, you can copy-paste it to your website or app.

Map integration section with "Map Integration" and iFrame code in boxes with arrows pointing at them

How to adjust your floor plan for mobile devices

Floor plan displayed on a mobile device

  1. Add fixed height such as 500 pixels.

<div style="width: 100%;
position: relative;
height: 500px">
<iframe>...</iframe>
</div>

This will affect all devices.

2. If you need to resize for mobile-only you need to add a custom class like:

expofp-iframe.

<div class="expofp-iframe"
style="width: 100%;
height: 100%;
position: relative;">
<iframe>...</iframe>
</div>

Next, add it to the CSS file.

@media (max-width: 600px) {
.expofp-iframe {
height: 500px;!important
}
}

How to adjust your floor plan to fit full screen

Floor plan surrounded by arrows pointing up, down, left and right

For that, you'd need to research the parent HTML elements of our iframe. Classes or styles could be blocking the size of the iframe, so remove them.

Styles like:

  • Height

  • Width

  • Padding

  • Max- and min-height

  • Max- and min-width

Setting up your container dimensions

To ensure that your embedded maps display correctly on your website, setting the container dimensions is important. The container where the iframe is inserted must be styled with position: relative.

Set up the container with a fixed width and height, as the iframe won't automatically resize it. Before embedding the iframe, verify that its dimensions aren't set to zero — if they are, the iframe will not be visible. Height is often the problem, so it's best to set it using specific units like:

• px (pixels)
• rem
• em
• vh (viewport height)
• vw (viewport width)

This ensures the content looks good on different screen sizes and devices.

Avoiding style conflicts

Please make sure not to use the same CSS selectors as those used in the integration code, such as .expofp-floorplan, #exhibitors-list, etc. This prevents any styling conflicts that could disrupt the appearance or function of your page.

See also exhibitors directory list for your website, integration options.

See our sales brochure for more information:

Frequently asked questions

I'm having difficulty viewing on mobile/web pages. What should I do?

Try to adjust the options mentioned in this article. If the issue persists, contact us via chat and provide the floor plan name and the embedded page link.

Do exhibitors with featured listings stand out on embedded floor plans?

Yes, exhibitors with featured listings enjoy the same benefits in the embedded floor plan.

Can I change the default view without changing the fit-to-screen adjustments I've already made?

You can add a viewbox to the floor plan and set up the default view.

Did this answer your question?