Adding a ‘Quick Exit’ button to your website as a Psychology practice

Contemporary therapy room with a white sofa, various pastel and earthy-colored cushions, a round white rug, a wooden coffee table with a plant, and a large abstract pink and orange painting on the wall.

As psychologists, we are regularly working with individuals in vulnerable and difficult circumstances. It might be someone looking to leave a violent or high control relationship, a young person curious about their sexual orientation or a teen struggling to voice how they’re feeling to their parents.

A Quick Exit button enables them to explore how they can access support with less risk of being caught.

Code

This code has been specifically designed with Squarespace in mind and recommend that you test whether it works across desktop and mobile before rolling it out for public use. The site may not correctly redirect if popups are blocked on the browser so please be aware of this limitation and consider if it is right for you.

To install this button on your website, first paste this into the Code Injection area
Select Website > Pages > Custom Code > Code Injection on your left hand navigation bar

<!-- Quick Escape Button -->

<a id="quick-escape">

<span class="text"> EXIT SITE </span>

</a>

<script>

function quickEscape() {

let newWindow = 'https://www.google.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
Select Website > Pages > Custom Code > Custom CSS on your left hand navigation bar.

We have underlined background color and text color below as this is what we would recommend changing to align with your businesses branding. If you are confident with coding you could change other elements to customise the button.

/*** Quick Escape**/

#quick-escape{

--size: 75px;

--background-color: #B68BED;

--text-color: white;

--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;

}

}