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:

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: