Sometimes it's important to segment end users before presenting the locator. A common example is between commercial and consumer audiences. The Interstitial Search container is designed to collect inputs from the visitor which are required before the locator is shown.

As shown below, a single category dropdown has been added to the Interstitial container:

When the input is marked as Required, it is used to determine whether the locator should be shown.

Once all required inputs in the Interstitial Container are complete, the locator is displayed as usual:

Multiple inputs can be added to the interstitial in this way. If they are marked as required, they will collectively control whether the locator should be shown.

Adding Interstitial Navigation

When an interstitial contains multiple levels or questions, you can add optional navigation elements to help visitors understand and revise their selections.

Two elements are available in the Interface Builder:

Interstitial Breadcrumb

The Interstitial Breadcrumb displays the visitor’s selections as a breadcrumb trail.

As the visitor completes each interstitial level, the selected option is added to the breadcrumb. The final breadcrumb item represents the visitor’s current selection.

Visitors can use the Home item to clear their interstitial selections and return to the beginning.

The breadcrumb is optional. It is most useful when the interstitial contains multiple levels. For a simple interstitial containing only one required question, the breadcrumb can usually be omitted.

To add it:

Open the Interface Builder.
Locate the Search Form settings
Click Add Field
Add the Interstitial Breadcrumb field to the container.
Position it inside the "Basic" container to ensure it is displayed should the interstitial hide upon completion

Interstitial Back Button

The Interstitial Back Button allows a visitor to return to the previous interstitial level and change their selection.

When clicked, the Interstitial Back button:

Removes the most recent interstitial selection.
Restores the previous interstitial level.
Displays the interstitial container again if it was hidden after completion.
Updates the breadcrumb, when an Interstitial Breadcrumb is present.

To add it:

Open the Interface Builder.
Locate the Search Form settings
Click Add Field
Add the Interstitial Back Button field.
Place it either inside or outside the Interstitial container.

Placing the Back button outside the Interstitial container is useful because the interstitial itself is hidden after all required selections are complete. An external Back button can remain visible and allow the visitor to reopen the interstitial.

More than one Interstitial Back Button can be added. For example, one can be displayed within the interstitial and another beside the completed search form. All Back buttons reflect the same interstitial state.

The Back button can also be used without an Interstitial Breadcrumb. This is the recommended configuration when visitors only need a simple way to revise a single interstitial selection.

Triggering a Search

The Interstitial logic simply controls the display of the locator, e.g. whether it is shown or hidden. To trigger a search action based on the user's interstitial choices, use the Live Search option found under Results > Live Search. Live Search causes searches to be performed instantly based on a user's input selections.

Advanced Topics

Changing Options based on Interstitial Choices

Since the Interstitial is typically used to segment audiences, sometimes the search and display requirements of those audiences can vary. There are a few options to consider:

Showing and hiding UI elements using CSS: When categories are chosen, MetaLocator sets classes on the main.metalocator container. These can be leveraged to show or hide certain elements in the search form or results display using custom CSS. As shown below, the user has selected residential and the main.metalocator element was given a class of ml_selected_tag_200, which is a special class based on the ID of the Residential category.
This can be leveraged to show or hide elements. For example, to hide the following Custom CSS would hide the zip code search:
```
.ml_selected_tag_200 .form-group.postal{
  display:none;
}
```

Changing Interface Settings: In the example above, if the user chose Residential or Commercial a requirement might arise to enable or disable certain interface settings based on that choice. Common examples are enabling Territory search, or displaying a Buy Online option based on the user selection. For this type of search, modification of the Interstitial search input's Field Templates is required in order to leverage Dynamic Options. This requires HTML, Javascript and CSS skill and will require the support of a Web developer. To set options dynamically, the Interface must be reloaded based on the user's choices with the special _urlparams URL Parameter option set to a JSON-encoded object with the desired settings changes.

jqLocator(document).ready(function() {

    var MetaLocatorOptionOverrides = {};

    jqLocator('.ml_interstitial select[name="tags[]"]').on('change', function() {
      
        if (jqLocator(this).val() != '') {
          
            // Residential is category id 200
            if (jqLocator(this).val() == '200') {

                //Residential's primary color should be teal
                MetaLocatorOptionOverrides['theme_color_primary'] = '#20af9b';

                var newUrl = window.location.href;

                //replace the new color
                newUrl = replaceUrlParam(newUrl, '_urlparams', encodeURIComponent(JSON.stringify(MetaLocatorOptionOverrides)));

                // ensure we preserve the user's category selection
                newUrl = replaceUrlParam(newUrl, 'tags[]', jqLocator(this).val());

                //reload the locator with the new option
                window.location.href = newUrl;

            }

        }

    });

});

Creating Multiple Interfaces: If the requirements for each audience vary widely or the options above require more technical capacity than available, creating the Interstitial choices on your Website may be a desirable option. In that case, the Interstitial contents would be created as required on the host Website by your Web team and the locators would be displayed simply by installing multiple locators on separate pages of the host website and linking to them as needed.

Deep Linking

Deep Linking can be used to set the interstitial input values and therefore create links which pre-select the Interstitial values and skip the interstitial selections. In the example above, if the locator was installed on a page called "locator.html", a deep link to "locator.html?ml___task=search_zip&ml___tags[]=200" would pre-select the Residential category and, since that would satisfy the "required" condition of the Interstitial container described above, the locator would also be displayed.

The special "ml___ml_skip_interstitial" parameter can also be used to skip the interstitial easily, as opposed to providing a value for each input in the interstitial. This is useful when there are duplicative values in the interstitial and the search form. When deep linking from an installation page, set ml___ml_skip_interstitial=1 as in:

locator.html?ml___ml_skip_interstitial=1