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:

floor plan into website or app (through link, button, iframe, script or QR code)
floor plan into kiosk
exhibitor list widget into website or app

How to integrate floor plan into your website or app

Our floor plans can be easily embedded into your event website or app with HTML codes. 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 iframe or 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 iframe for mobile devices

To achieve that, you need to make changes to the iframe code.

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>

3. Next, add it to the CSS file.

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

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 iframe to fit full screen

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

In order to adjust your floor plan to fit the 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 up container dimensions of 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 floor plan link into 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 two available formates:

QR-code image (BMP)
QR-code poster (PDF)

How to integrate 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 floor plan on 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 floor plan into 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 operational system and click Download Floor Plan.

How to place kiosks on the floor plan

Each kiosk needs its own identity and location for wayfinding and analytics. Here's how to place kiosks on your floor plan.

First, go to Integration - Kiosk setup

Then, select a kiosk location on the floor plan, set desired rotation, size and UI scale of the icon, and click Save.

If afterwards you need to delete or edit the kiosk icon, you should open the same Kiosk setup page and click on the kiosk.

Frequently asked questions

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.