All Collections
Advanced Topics
Can the Interface be deployed via an IFRAME?
Can the Interface be deployed via an IFRAME?
Bryan Nye avatar
Written by Bryan Nye
Updated over a week ago

Yes, with some limitations.  This method is not a supported use of MetaLocator's software.  

Some CMSs have issues using javascript. so this article provides a workaround.

When deployed via an IFRAME, the interface loses some functionality including the ability to control it's size, and the ability to receive incoming search requests from other pages.  Deploying the Interface via an IFRAME is outside our Scope of Support.  Additionally, IFRAME deployment can be used only with MapBox Maps (the default), not Google Maps-based Interfaces

To obtain the IFRAME code, click Preview on the desired interface.  This provides a link specific to your Interface as shown below:

For interfaces created in the Interface Builder, the layout option becomes

http://admin.metalocator.com/index.php?option=com_locator&view=directory&layout=combined_bootstrap&framed=1&tmpl=component
&Itemid=XXXXX&preview=1&redir=1

Your link may differ slightly, in that XXXXX will be replaced with your Interface ID number.  That link should be modified as follows:

  1. To include 'https' instead of 'http',

  2. admin.metalocator.com must be replaced with code.metalocator.com,

  3. &preview=1 should be removed as shown below:

  4. &redir=1 should be removed as shown below:

This is the "src" URL of the IFRAME tag, as shown below:

Again use combined_bootstrap for modern interfaces created in the Builder.

Normally MetaLocator's script automatically handles the height and width, however you may need to manually tweak those attributes to ensure a seamless layout.

<iframe allow="geolocation" src="https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=combined_bootstrap&framed=1&tmpl=component
 &Itemid=XXXXX" width="100%" height="2000" frameborder="0" scrolling="no"></iframe>

Style Considerations

Once MetaLocator is deployed via a static IFRAME, the software no longer controls the IFRAME's responsive height. On mobile, the IFRAME typically is resized to accommodate all results. This avoids a "scroll-within-scroll" UX that is hard to use for mobile users. When using the technique above, or if the IFRAME re-sizer has been disabled, you must provide CSS to support this layout.

The following example CSS sizes the IFRAME to 4000px tall on mobile and 2000px on desktop. The height for mobile should be adjusted to accommodate the entire height of the Interface. In this example, the IFRAME has an "id" attribute of locator_iframe12345678, which should be updated for your specific application.

/* mobile */
@media only screen and (max-width: 768px) {
#locator_iframe12345678{
height: 4000px!important;
}
}

/* desktop */
@media only screen and (min-width: 769px) {
#locator_iframe12345678{
height:2000px !important;
}
Did this answer your question?