“Quick Exit” feature for crisis websites
Implementing a “Quick Exit” feature is an essential step when building a crisis website to help victims of violence and/or abuse. Victims of violence and abuse are likely to be concerned that someone will walk up behind them when they are looking for help and advice online. They may need to leave the site quickly - for their own personal safety - and so this feature can be crucial.
My solution builds on a great post in 2012 by Chris Coyier and is specific to Squarespace websites. It allows anyone to add a highly visible and functional Quick Exit button to their Squarespace site, ensuring it serves as a safe resource for those in need. After installing this on the site, I strongly recommend that you test it regularly to maintain the highest level of safety and usability for your visitors.
What do I need?
The website must be on a Business plan or above because Squarespace don’t support custom code on Personal plans. That’s the only requirement! It has been designed and tested on the latest version of Squarespace (version 7.1) but should work on most of the older version 7.0 sites.
What does the “Quick Exit” button do?
Let’s start by saying that no solution will be 100% safe. Increased browser security means that no solution can be completely foolproof but the point here is to do something and do it very quickly, to reduce the risk for the user.
Here’s what my solution should help you to acheive.
This solution adds an obvious “on-screen” button that fills the bottom of the screen at all times (see the sample above).
It can be tapped or clicked from any device, including mobiles and tablets. (Note that if you’re using a cookie banner, please ensure this is styled to appear in a different location otherwise it could obscure this crucial feature.)
When the button is clicked or tapped, it instantaneously hides the content of the Squarespace page being viewed. Every millisecond counts, so this initial step helps to protect the user whilst they wait for the next (masking) page to load.
Next, the code will load the Google search page. It will then start a search looking for weather. These steps help to create a short trail of benign content to help to mask the site that was really being viewed.
A new tab is then opened, and the weather.com website is opened. This new tab will be free of any browser history so if the perpetrator tries to go back, there won’t be a history to follow - at least not in this tab. If they go back to the previous tab, they should see the Google search for the weather.
Installation
1. Log on to the website and go to the Code Injection panel (where is it?).
2. Scroll down past the HEADER box to the FOOTER box.
3. Paste the following code into the FOOTER box:
<!-- Quick Exit Button for Squarespace website ---------------->
<!-- You may use freely on Squarespace but do not publish ----->
<!-- Copyright 2021 Soundfocus Digital Ltd [https://sf.digital] --->
<div class="sf-escape-bar-wrapper">
<div id="escape-bar" class="sf-escape-bar" aria-label="Quickly exit this site">
<p>QUICK EXIT</p>
<p>Click this bar at any time to immediately close this website and check the weather</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("escape-bar").addEventListener("click", function() {
document.body.classList.add('hide-escape');
window.open("http://weather.com", "_newtab");
window.location.replace("http://google.com");
window.location.replace("https://www.google.com/search?q=weather");
});
});
</script>
<style>
body.hide-escape {
display: none;
}
.sf-escape-bar-wrapper {
background: #8ae5e2;
cursor: pointer;
z-index: 99999999;
position: fixed;
text-align: center;
left: 0;
right: 0;
bottom: 0;
}
.sf-escape-bar p:first-of-type {
font-size: 22px;
font-weight: bold;
}
</style>
4. Save the changes and then test the website from an Incognito or Private window where you aren’t logged on to Squarespace. This is the only way to test it from the point of view of a visitor.
Customisation
The code above contains a number of elements that you can change to customise the button.
Changing the ‘background’ will change the background colour of the button. You can use any colour code here.
The font-size and font-weight affect the title of the button (“QUICK EXIT”).
If you’d like a different title for the button, or a different description, you can edit these directly on lines 6 and 7 of the code.
The ‘aria-label’ (line 5) is the description of the button for people using a screen reader because of a visual impairment.
