Custom Code - Help adding a Quick Disguised Exit button to my site (Brine template)

Hey guys, 

I found the following article - https://css-tricks.com/website-escape/ and was wondering how I can add such a feature to my site, I do not know anything about code. Using the Brine template. Any help provided would be greatly appreciated!

wrap code in <script> code here</script> and add to Home >Settings > Advanced > Code Injection > Footer

Any luck finding an answer to this? I am currently designing a non profit website for domestic violence and am having the same issue of finding a solution for a safe exit button

7 hours ago, GooseGuy said:

Any luck finding an answer to this? I am currently designing a non profit website for domestic violence and am having the same issue of finding a solution for a safe exit button

Have you solved it yet? Can you share site url? Do you use Personal Plan or higher?

I have the same issue and need the esc key to exit my site. Injecting the code into the footer didn't work for me. Other suggestions? My site https://wcpark.org is built in Squarespace 7.1.

Here's a sample site https://willowcenterny.org that has it working.

thank you.

Site URL: https://www.wcpark.org/

Hello, I'm trying to add a website escape key to a site I'm working on. The site is for victims of domestic abuse, and the user needs a quick exit shortcut key. The standard is the esc key but after lots of digging and testing I haven't gotten anything working, not that I'm advanced in code or anything. I've seen people work magic with code opening a new tab and hiding the old so viewer can't go back, that's cool but first step first how can I get the keyboard shortcut working?

Here's the current site in process being built in Squarespace 7.1: https://www.wcpark.org/

And heres a site that has it working for reference: https://willowcenterny.org/

Thanks much for any help.

We have this same question, would love to know how your reference site accomplished this! 

On 2/5/2021 at 12:45 PM, sixwhales said:

The standard is the esc key but after lots of digging and testing I haven't gotten anything working, not that I'm advanced in code or anything. I've seen people work magic with code opening a new tab and hiding the old so viewer can't go back, that's cool but first step first how can I get the keyboard shortcut working?

I don't recommend concentrating on the Esc key idea. It could be added later, but to be honest it's a "nice to have" because it will be of little help to victims using mobile or tablet devices (there's no visible keyboard during browsing). These users typically account for more than 50% of the audience.

It's important to add an on-screen 'button' that can be clicked/tapped. is always visible and easily reachable. In other words large. It's also essential that it sufficiently masks the page that was being viewed, or it won't serve its purpose.

The 'quick escape' option on the reference site you've quoted is unfortunately not very good. It only loads an empty search screen (it should always contain some benign content) and pressing the browser's back button will take someone straight back to the site that was being viewed. 

The CSS tricks article (quoted earlier in this thread) is actually very good. If you need help implementing this on a Squarespace site, do let me know and I'll provide assistance. It's important that potential victims can browse for help more safely.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks for your reply paul2009, I have a button and knew how to add that. For the escape key, I've tried a few attempts of the different snippets of code in the CSS tricks article, but nothings working for me. At the moment I turned on the log-in with escape key as it generally serves the purpose just not to the best place. 

On 2/10/2021 at 4:07 PM, paul2009 said:

The CSS tricks article (quoted earlier in this thread) is actually very good.

Hi @paul2009, thanks for your comments that led me to this thread. I read the CSS tricks article and am trying to implement their solution in a simple way using the Squarespace announcement bar to 1. open a new tab and 2. close the current window on click. I added the code and it seems simple enough, but it's not working:

<script>
$(".sqs-announcement-bar").on("click", function() {
  window.open("http://weather.com", "_newtab");
  window.location.replace('http://google.com');
});
</script>

Nothing happens when you click the announcement bar. I also tried .sqs-announcement-bar-content and .sqs-announcement-bar-url (both with and without a url added in the normal announcement bar settings). Thoughts?

Site url:https://usafv.squarespace.com/
Password: Alaska

@Inscape

First try wrapping the code in a document ready.

<script>

  $( ( ) => {
  
    $(".sqs-announcement-bar").on("click", function() {
      window.open("http://weather.com", "_newtab");
      window.location.replace('http://google.com');
      });
      
      } );
      
  </script>

What is happening now is that the code is running before the announcement bar is on the DOM. If that change doesn't work then you'd need a MutationObserver.

The ab may not be the best option for displaying the message. If the user clicks on the x to close the announcement bar it won't show up again until the ab is changed.

Please see Adding an announcement bar - Reset visibility.

19 hours ago, creedon said:

What is happening now is that the code is running before the announcement bar is on the DOM.

Thanks for this @creedon! I tried the code you sent and it seems to work in admin mode only. But only part of it works: it opens a new tab with the weather, but doesn't redirect the current tab to google.

My plan with the announcement bar was just to hide the X so no one could close out of it. 🙂

1 minute ago, Inscape said:

My plan with the announcement bar was just to hide the X so no one could close out of it.

👍

I just did some testing of the code with the document ready and when not in preview, even with the code wrapped in document ready, the ab is not on the DOM when the code runs.

So you would need a MutationObserver to wait for the ab to show up and then run your code.

It might be better to use code to add an area where the quick exit could go rather than add a dependency on MutationObserver. Recent popular browsers support MO.

@Inscape

By the way if you do go for a MO. There is some code in the following post that targets the ab drop zone and could be used as a basis for new code.

34 minutes ago, creedon said:

the ab is not on the DOM when the code runs

Ok super helpful, thanks!! It might just be easier to make my own bar. I'm a little scared of MO... Slightly out of my league and afraid I'll mess it up!

21 hours ago, Inscape said:

I read the CSS tricks article and am trying to implement their solution in a simple way using the Squarespace announcement bar.

Simple is usually better so, in all honesty, I'd recommend creating the escape bar with some HTML instead of trying to repurpose the announcement bar. This way you can rely on the bar being available.

If you hide the announcement bar, here's an example of what you could add to Settings > Advanced > Code Injection > Header:
 

<div class="escape-bar-wrapper">
  <div class="escape-bar">
    <p><strong>QUICK EXIT</strong></p>
    <p>Click this bar at any time to immediately close this website and check the weather</p>
  </div>
</div>

<style>
  .escape-bar-wrapper {
    z-index: 4;
    position: fixed;
    text-align: center;
    background: #8ae5e2;
    left: 0;
    right: 0;
}
</style>

This should add the bar and style it. You can then amend your script so that when a visitor clicks this the escape-bar-wrapper div, the url is changed.

(Note this is just an example and hasn't been tested, but it will save you lots of complex code.)

25 minutes ago, paul2009 said:

I'd recommend creating the escape bar with some HTML instead of trying to repurpose the announcement bar

I basically just did exactly what you described in your email, @paul2009! Except I put the code in a code block in the footer.

<div id="quick-exit">
  <h4>QUICK EXIT: </h4>
  <p>Tap this bar at any time to immediately close this page and check the weather.</p>
</div>

Custom CSS:

#quick-exit {
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  background:#8ae5e2;
  width:100% !important;
  padding:16px;
  text-align:center;
}
#quick-exit h4 {margin:0 !important;}
#quick-exit p {margin:0.2em 0 0 0 !important;}

Code Injection:

<script>
$(document).ready(function(){
    $("#quick-exit").on("click", function() {
      window.open("http://weather.com", "_newtab");
      window.location.replace('http://google.com');
     });
});
  </script>

It works perfectly!! Exactly the functionality I wanted! Here it is in action if anyone wants to see: usafv.squarespace.com (password: Alaska).

Thanks again @creedon and @paul2009 for all your help with this. I know my client will be so pleased to have this safety feature for those she serves.

One thing I would mention, be sure that you are importing Jquery in at the head of the site, other wise you won't be able to run this script.

@creedon @paul2009  - I have read this thread 100 times and still can't get this to work correctly on our site, but would love some assistance. This is the link : https://www.empowernowproject.org/  (pw: 84532)

I followed Inscape's info exactly:

1. I added the text "quick exit" to a code block in my footer.

2. Add the custom css to design > custom css  (and successfully changed styling a bit)

3. Added the code below to settings > advanced > code injection > header

<script>
$(document).ready(function(){
    $("#quick-exit").on("click", function() {
      window.open("http://weather.com", "_newtab");
      window.location.replace('http://google.com');
     });
});
  </script>

But... nothing happens - no click function. 😞  What am I missing??

35 minutes ago, aeperri said:

What am I missing??

Perhaps you didn't add the jQuery library? The example above relies on it, but I see that it isn't mentioned.

To be honest, the examples provide are really simple and could be built without it, but if you are using them, you'll need something like this in your code injection (before the script):

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>

@aeperri

Did you install jQuery? That step may have not been explicitly mentioned. Us programmer types may have inferred that from this thread.

If not, then add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Let us know how it goes.

Ha ha. @paul2009 and I both had the same thought! 🙂

1 minute ago, creedon said:

Ha ha. @paul2009 and I both had the same thought! 🙂

Great minds! 🙂 And it worked! Thank you so much!

Bonus question if I may, since you both are rock stars and responded so quickly! If I wanted to apply this same function to the button on my header (Leave this website button) - is there a way I can assign an CSS ID  to that button to have this same functionality work on that button?  If not no big deal, I can make the added bar work. But wondered if there was a simple way to target that specific button.

@aeperri

I'm not seeing a leave button in the header. In general not all elements on a page have an explicit id set.

However almost all elements can be targeted somehow with a CSS selector. But to know what selector we'd need to see the specific element.

1 hour ago, creedon said:

@aeperri

I'm not seeing a leave button in the header. In general not all elements on a page have an explicit id set.

However almost all elements can be targeted somehow with a CSS selector. But to know what selector we'd need to see the specific element.

Yes, sorry, I had to pivot for the client so they didn't get confused. I changed the button to a donate button. But for example, lets say I wanted to use that donate button in the header? Can you use javascript like that on a button?