This article may be helpful for you if you have already designed a floor plan or our team have designed it for you. Here you can learn how to integrate:
A floor plan into website or app (through link, button, iframe, script or QR code)
A floor plan into kiosk
An exhibitor list widget into website or app
How to integrate a floor plan into your website or app
Our floor plans can be easily embedded into your event website or app with HTML code. You can find the codes on the Dashboard : Integrations
> Map Integration > Copy the link or the button.
The button can be customized (color, radius, font, etc.).
Iframe and script integration
Use an iframe or a script to embed the floor plan as a part of your webpage. These options are helpful if you want to hide the plan URL. You can find the iframe and script codes on the same page (Integrations > Map Integration).
How to adjust the iframe for mobile devices
To achieve that, you need to make changes to the iframe code.
Add a fixed height, such as 500 pixels.
<div style="width: 100%;
position: relative;
height: 500px">
<iframe>...</iframe>
</div>
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>
3. Next, add it to the CSS file.
@media (max-width: 600px) {
.expofp-iframe {
height: 500px;!important
}
}
Note that this will affect all devices.
To make non-mobile-optimized sites look better on narrow-screen devices, you can insert a mobile-friendly meta tag into the head of your page:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />"
How to adjust the iframe to fit full screen
In order to adjust your floor plan to fit full screen, you would 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
How to set up the container dimensions of the iframe
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.
How to avoid 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.
How to turn the floor plan link into a QR code
On the Map Integration page, you can also download a high-resolution scannable QR code to display on your banner, website, or brochure. There are two available formats:
QR-code image (BMP)
QR-code poster (PDF)
How to integrate an exhibitor list widget
While ExpoFP floor plans already include a searchable list of exhibitors, you might want to have a separate exhibitor directory page on your website. With our exhibitor list widget, you can get an interactive and searchable list without additional coding.
The website users will be able to search exhibitors by company name, category, or booth number. If the user clicks on a company, it will open the exhibitor profile with the same information that you see on the floor plan.
To integrate the widget, go to Integration 
- Widgets and copy the script or iframe code. Then, you can paste it into your website or app.
By default, exhibitors are sorted alphabetically in the list. If you'd like to display them grouped by categories, you can use the exhibitor categories list instead. Script and iframe codes for this list are also located on the Widgets page.
How to display a floor plan on a kiosk
Our interactive floor plans work seamlessly on large touchscreen kiosks, offering the same intuitive functionality as on a phone or tablet. Attendees can easily search for companies, filter booths by category, view live event schedules, and use wayfinding to get step-by-step directions to any location on the floor plan.
Kiosk options
Your floor plan can be displayed on kiosks for no extra charge with Standard Design from ExpoFP. You can either use your own, or we can supply quality kiosks from our partner Popshap with the following pricing:
Specifications and features
Sizes from 32"–49" (stand-up) and up to 55" (tabletop)
Optional vinyl branding or full kiosk wrap
Available across the US, Canada, Europe, and Australia
Includes white-glove installation and on-site support
If you want to have kiosks at your event, schedule a demo or contact us.
How to integrate a floor plan into a kiosk
You can download and run floor plans on the kiosks, allowing them to work offline. Go to Integration 
> Download floor plan. Next, choose a download option that is compatible with the kiosk's operational system and click Download Floor Plan.
Currently, there are four download options available:
Windows
Android
MacOC
Linux
How to place kiosks on the floor plan
Step 1
Open a floor plan in front view
Step 2
In the search bar, type setkiosk.
Step 3
Click on the screen where the kiosk should be.
Step 4
Optionally, adjust the kiosk icon (size and rotation), interface size, and map (rotation, zoom, and position).
Step 5
Save and close.
Frequently asked questions
Is technical support provided if I face difficulties integrating the floor plan into my website or app?
Is technical support provided if I face difficulties integrating the floor plan into my website or app?
You can submit your issues through our chat or email ([email protected]). Please provide us with the name of your floor plan and the page with the integrated plan, and our team will assist you.
Can I customize the appearance of the Exhibitor Directory list?
Can I customize the appearance of the Exhibitor Directory list?
It's not possible to change the appearance of the Exhibitor Directory list at the moment.
What sets apart iframe and script integration?
What sets apart iframe and script integration?
Iframe is better at security and rendering, while script is better at loading, SEO, and responsiveness.
Can I use my own domain to host the floor plan?
Can I use my own domain to host the floor plan?
We don't offer the option to use your own domains. However, you can embed your plan as an iframe to avoid showing any links.