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.
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.
How to adjust your floor plan for mobile devices
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
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.