search mobile facets autocomplete spellcheck crawler rankings weights synonyms analytics engage api customize documentation install setup technology content domains user history info home business cart chart contact email activate analyticsalt analytics autocomplete cart contact content crawling custom documentation domains email engage faceted history info install mobile person querybuilder search setup spellcheck synonyms weights engage_search_term engage_related_content engage_next_results engage_personalized_results engage_recent_results success add arrow-down arrow-left arrow-right arrow-up caret-down caret-left caret-right caret-up check close content conversions-small conversions details edit grid help small-info error live magento minus move photo pin plus preview refresh search settings small-home stat subtract text trash unpin wordpress x alert case_deflection advanced-permissions keyword-detection predictive-ai sso

Disabled UX Customization

Customizing the user experience of a disabled Swiftype search box

From June 27th 2022, we will be removing support for TLS v1.0 and v1.1 from our website, customer dashboard and APIs, which also power search bars and results.

If your website supports those deprecated versions of TLS, and you make use of our embedded search bar, users of browsers that do not support TLS v1.2+ will be unable to perform searches, and will see a message like this:

screenshot of disabled search box message when browser is unsupported

Customizing the look and feel of the "unsupported browser" error message

We provide two mechanisms for customizing the user experience of this error message, in the form of a CSS class applied to the search input, and a specially named JavaScript callback.

The .st-disabled CSS class

If we determine the user’s browser doesn’t support TLS 1.2 or above, they will be served a special version of our embed JavaScript, which as well as disabling searches (so that no invalid requests will be sent, avoiding the possibility of network errors being displayed in the browser), also adds an st-disabled class to the Swiftype search input, which you can then use to customize how the input looks:

input.st-disabled {
    width: 42em;
    color: #ff0000;
}

This example would make the width of the search input wide enough to display the message in most typefaces (though you could make this more exact by specifying the exact width you need for your typeface/sizing), and also makes the text color red to highlight the message.

The _ST_DISABLED_CALLBACK JavaScript function

If you define a global (e.g. on the browser’s window object) JavaScript callable named _ST_DISABLED_CALLBACK, then our embed JavaScript will invoke it, for example:

window._ST_DISABLED_CALLBACK = function(msg) {
    alert(msg);
};

The function will receive our message (a string) to the user about their browser being unsupported, and you can do whatever you want with it; in the simple example above we create an alert() pop-up, but you might choose to replace your whole search UI with a nicely formatted message.

Screen readers and accessibility

Our embed JavaScript will also add the error message as a title property on the search input, which can be picked up by screen readers for those with accessibility needs, and will also appear in desktop browsers if you hover the cursor over it:

screenshot of disabled search box message when browser is unsupported displayed in a "title" hover-over pop-up