Website “Quick Escape” Button
We recently received a question from Travis::
Is there anyone on your team that can implement a "Quick Escape" button on a Squarespace website I'm working on? It's for a non-profit that supports victims of intimate partner violence and sexual assault. There needs to be a good way for a site user to quickly exit the website.
I hadn’t ever considered this before, but if a victim of abuse is accessing a website to find resources on escaping their situation, and their abuser happened to walk into the room or move into a position where they could see the screen, the victim would need to instantly be able to get out of the web page and avoid letting their abuser know what they were looking at.
Basically, a button like this could potentially help victims find resources and make a plan to leave with less risk that their abuser would find out.
We of course wanted to help, and now we want to share the solution in case this is of use to anybody else.
We started by doing a little research online at what was already out there and found this article by Chris Coyier from CSS Tricks, which formed the basis for this tutorial.
To help more people, we’ve rebuilt the code to be simpler and clearer within the context of a Squarespace website.
If you just want to use this code WITHOUT learning how it works, jump to The Code section at the bottom of the page.
Important
We’re sharing this information in an effort to be as helpful as possible, but as with anything that’s meant to protect people, especially from content that’s sensitive in nature, be sure to test this code out extensively on your website to make sure it works for you and your users.
We’ve noticed that the site may not correctly redirect if popups are blocked on the browser, so we’ve added some additional fallbacks in the code, but be aware of this potential limitation.
Step 1 - Creating the Button
First, we need to create a button with HTML and add it to our Site Footer Code Injection area.
<a id="quick-escape">
<span class="text"> EXIT SITE </span>
</a>
(You might think we should add an href to a new page here, but we’re going to go a different route. )
Next, let’s add a title attribute to give a little context as to what this button does.
<a id="quick-escape" title="Clicking this button will quickly exit this page and open a new one.">
<span class="text"> EXIT SITE </span>
</a>
Now if a user long hovers over the button, we’ll have a simple little disclaimer.
Next, let’s setup the layout and style of this button.
Step 2 - Styling The Button
Add this CSS to the Custom CSS area of your website.
This will position the button in the bottom right of your site. Feel free to adjust any of the Custom Properties at the top of the CSS.
/**
* Quick Escape
* from Will-Myers.com
**/
#quick-escape{
--size: 75px;
--background-color: var(--blue);
--text-color: black;
--offset:17px;
--font-size: 12px;
display: grid;
place-items: center;
height:var(--size, 50px);
width:var(--size, 50px);
position: fixed;
right: var(--offset, 17px);
bottom: var(--offset, 17px);
z-index:99;
padding: 5px;
border-radius:50%;
box-shadow: 2px 2px 5px #333;
background: var(--background-color, #333);
opacity:1;
transition: all .5s ease;
.text {
font-size: var(--font-size);
width: 100%;
text-align:center;
color: var(--text-color, white);
}
&:hover {
scale: 1.1;
}
}
Step 3 - Setting Up The Javascript
So, why don’t we just use an href in the anchor link?
Well, sometimes it can takes a few seconds for a new page to pop up. Especially if you’re on a slower network connection. For this use-case, these precious seconds can be the difference between being exposed to an abuser or not.
The number 1 priority is that the current screen doesn’t show the webpage the instant the button is used.
So, we’ll do two things simultaneously. First, we’ll open up a new window, which will at least show a blank loading screen, and additionally we’ll redirect the current window to another page. Using the following javascript, we can add a click event to the button that will do these two things.
Place this javascript in your Site Header Code Injection area underneath the button HTML.
<script>
function quickEscape() {
window.open("https://www.amazon.com/"); // Open New Tab
window.location.replace("http://google.com"); // Redirect Current Tab
}
document.querySelector('#quick-escape').addEventListener('click', quickEscape);
</script>
Using the window.location.replace method also has the added benefit of removing the initial page from the browsers history, so if you hit the back button, you’ll be directly to the page before the initial page. Obviously, if the user was searching through multiple pages on the website, the back button would still being them there, but at least this gives a basic level of security. Unfortunately, I don’t think there’s a way to remove every instance of a domain from a users history.
You can change the two url’s in this code to what you think works best, I’ve chosen Google & Amazon to keep it generic.
Step 4 - The Escape Key
Lastly, we’re going to add an additional event listener to activate our quickEscape when we hit the escape key. This is good for accessibility so a user doesn’t have to tab through to the button.
<script>
function quickEscape() {
window.open("https://www.amazon.com/"); // Open New Tab
window.location.replace("http://google.com"); // Redirect Current Tab
}
document.querySelector('#quick-escape').addEventListener('click', quickEscape);
document.addEventListener('keyup', (e) => e.keyCode == '27' ? quickEscape() : null)
</script>
To do this, just add a keyup event listener on the document which will listen for a user hitting a key. If that key has a keyCode of 27, which corresponds to the escape key on all keyboards, then run the quickEscape function.
And that’s it, let us know if you have any questions!
The Code
To install this button on your website, first paste this into the Site Header Code Injection area.
<!-- Quick Escape Button -->
<a id="quick-escape">
<span class="text"> EXIT SITE </span>
</a>
<script>
function quickEscape() {
let newWindow = 'https://www.amazon.com/';
let replaceURL = 'http://google.com';
window.open(newWindow); // Open New Tab
window.location.replace(replaceURL); // Replaces Current Page
}
document.querySelector('#quick-escape').addEventListener('click', quickEscape);
document.body.addEventListener('keyup', (e) => e.keyCode == '27' ? quickEscape() : null)
</script>
Next, paste this code into the Custom CSS area.
/**
* Quick Escape
* from Will-Myers.com
**/
#quick-escape{
--size: 75px;
--background-color: var(--blue);
--text-color: black;
--offset:17px;
--font-size: 12px;
display: grid;
place-items: center;
height:var(--size, 50px);
width:var(--size, 50px);
position: fixed;
right: var(--offset, 17px);
bottom: var(--offset, 17px);
z-index:99;
padding: 5px;
border-radius:50%;
box-shadow: 2px 2px 5px #333;
background: var(--background-color, #333);
opacity:1;
transition: all .5s ease;
.text {
font-size: var(--font-size);
width: 100%;
text-align:center;
color: var(--text-color, white);
}
&:hover {
scale: 1.1;
}
}
