How to Add a Quick Disguised Exit Button in Squarespace (Brine Template or 7.1)
When so much of life, from ordering food to streaming television to applying for a job, is lived online, websites that cater to vulnerable populations, whether survivors of domestic violence, mental health sites or legal aid sites, also need online filters that offer the same privacy and safety as the brutalist shelter or the coffee shop with a seemingly invisible bathroom attendant. A must-have is the Quick Disguised Exit Button, a basic feature that can help your users get off your site quickly and safely.
With our guided approach, we’ll cover step-by-step professional setup of a Quick Exit Button with custom HTML, CSS, and fully compliant JavaScript that works with Squarespace 7.1 and Brine templates.
What Is a Quick Disguised Exit Button?
A Quick Exit Button is a safety precaution usually placed in the corner of a website that allows users to be redirected to a neutral, non-suspect site (such as Google or a weather site) with the click of a button.
This can be very useful for webpages that cover:
Domestic violence resources
Trauma and mental health support
Crisis hotlines and advocacy organizations
It allows people to leave quickly without making a scene.
Why It Matters
| Purpose | Benefit |
|---|---|
| Protects user privacy | Allows discreet browsing and instant site exit |
| Enhances user trust | Shows that you take safety and confidentiality seriously |
| Required by some organizations | Often considered a best practice or compliance feature |
How It Works
We’ll implement a button that:
Stays visible in a fixed position on the page
Redirects users to a safe external website immediately
Can be styled to match your website or appear subtle and discreet
No third-party plugins are required; this uses clean, native web code.
Step-by-Step Implementation in Squarespace
Step 1: Add the Exit Button Markup
You can add this HTML either:
Site-wide: Settings → Advanced → Code Injection → Footer
Page-specific: Inside a Code Block on the desired page
Paste the following code:
<!-- Quick Disguised Exit Button -->
<div class="quick-exit-wrapper">
<a href="https://www.google.com" class="quick-exit-button">Quick Exit</a>
</div>
Tip: Replace https://www.google.com with any neutral destination your users would expect, such as https://www.weather.com or https://www.bing.com.
Step 2: Style the Button Professionally
Go to:
Pages → Custom code → Custom CSS
Paste the following:
/* Quick Exit Button Styling */
.quick-exit-wrapper {
position: fixed;
bottom: 40px;
right: 30px;
z-index: 9999;
}
.quick-exit-button {
background-color: #388BA4; /* Soft blue, easy on the eyes */
color: #fff;
padding: 10px 18px;
font-size: 14px;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
transition: background-color 0.3s ease, color 0.3s ease;
}
.quick-exit-button:hover {
background-color: #dddddd;
color: #000;
}
This ensures your button is:
Visible but not intrusive
Consistent with modern design principles
Accessible and mobile-friendly
Step 3: (Optional) Enable ESC Key to Exit Instantly
For an added layer of safety, allow users to press the Esc key to exit:
Go to:
Settings → Advanced → Code Injection → Footer
Add:
<script>
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
window.location.replace("https://www.google.com");
}
});
</script>
This provides users with a keyboard-triggered escape in addition to the visible button.
Customization Options
| Option | How to Customize |
|---|---|
| Change button position | Adjust bottom and right in .quick-exit-wrapper |
| Use an icon only | Replace text with emoji (e.g., 🚪 or ❌) |
| Open in a new tab | Add target="_blank" and rel="noopener" |
Example:
<a href="https://www.google.com" class="quick-exit-button" target="_blank" rel="noopener"> Exit</a>
Mobile Responsiveness
This code is fully responsive out of the box. However, you can optionally add a media query to adjust the size or placement on mobile devices:
@media screen and (max-width: 640px) {
.quick-exit-button {
font-size: 12px;
padding: 8px 12px;
}
}
Final Checklist
| Task | Status |
|---|---|
| HTML added to the footer or section | Done |
| CSS added to Design → Custom CSS | Done |
| ESC key script added (optional) | Recommended |
| Mobile tested | Important |
Final Thoughts
A Quick Exit Button might feel like a small feature, but for the intended audience, it’s indispensable for safety, privacy, and discretion. In just a few lines of custom code, you give users the ability to browse freely, with assurance that they can leave right away.
Frequently Asked Questions (FAQ)
A1: What Is A Quick Exit Button For?
A: It's a safety tactic that was created because sometimes users need to quickly and discreetly leave a website, such as users who have been viewing sensitive content about mental health, domestic violence, or legal issues. All it takes is a single click, and they’re taken to a neutral website, such as Google or Weather.com.
Q2: Does this work on Squarespace 7.1 and Brick templates?
A: Yes. Solution: This is written with 100% pure HTML, CSS, and JavaScript, and it is fully supported by all Squarespace 7.1 templates (including Brine).
Q3: Where would I place the above code for it to be site-wide?
A: To get the button and script on every page, copy and paste both the HTML (button) and the JavaScript (ESC Key Exit) into Code Injection → Footer in your Settings → Advanced → Code Injection.
Q4: May I change where on the screen the button appears?
A: Absolutely. You can adjust the .quick-exit-wrapper CSS properties like bottom and right to move the button to any corner of the screen. For example, change to top: 20px; left: 20px; to place it in the top-left.
Q5: What occurs when a user clicks the exit button or presses ESC?
A: They are instantly sent to an inert page somewhere on the internet (Google, Weather.com). You can set this destination yourself from the HTML and JavaScript.