Jump to content

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

Recommended Posts

@aeperri

No worries.

Instead of, or in addition to, targeting #quick-exit you could try .header-actions-action--cta a. Also set the link for the cta in the SS interface to #.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 7/29/2021 at 1:08 PM, creedon said:

That step may have not been explicitly mentioned. Us programmer types may have inferred that from this thread.

Sorry @aeperri, that's exactly right... I didn't include the Jquery library script because I had already loaded it for other purposes. I sometimes forget to add it to posts like this! I'm SO GLAD you were able to figure it out!

Link to comment
  • 7 months later...

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

I saw other posts on this topic but am not sure how to execute what Paul2009 is describing. My client would like an "EXIT" button with similar functionality to what is shown on the following site: https://www.journeyneo.org/ The EXIT button on the Journey site opens a new tab to a site (weather.com) and replaces the original Journey site with a different URL (google.com) that then doesn't return to Journey when you hit back. The Journey site appears to be a Squarespace site, when I inspected the EXIT button, I see lots of Squarespace references and the announcement bar at the top looks like Squarespace. 

Link to comment
On 3/29/2022 at 3:48 PM, SpanerMktg said:

I saw other posts on this topic but am not sure how to execute what Paul2009 is describing.

Hi @SpanerMktg. The site you've mentioned is using the exact solution that I proposed. Which part are you having difficulties following?

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
On 3/29/2022 at 4:59 PM, SpanerMktg said:

I guess where to put the code as it relates to my button.

You could use a Squarespace button but, as seen on your site, the button will scroll out of reach when the header disappears out of view, and this makes it more difficult for the user to quickly mask their browsing.

The solution I described used a button that was generated in the code. This allowed it to be placed in a fixed position within the browser, even when the user scrolled - just like the example you've quoted. You can achieve this by placing the code in the Code Injection area of the site and then adding the CSS to style the button and fix its position.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
43 minutes ago, paul2009 said:

You could use a Squarespace button but, as seen on your site, the button will scroll out of reach when the header disappears out of view, and this makes it more difficult for the user to quickly mask their browsing.

The solution I described used a button that was generated in the code. This allowed it to be placed in a fixed position within the browser, even when the user scrolled - just like the example you've quoted. You can achieve this by placing the code in the Code Injection area of the site and then adding the CSS to style the button and fix its position.

Got it (i think). I was able to get the full width at the top to work - now it is a matter of styling and positioning it (in Design > Custom CSS). Thanks so much. 

Link to comment
  • 3 months later...

Hello all,

I had this solution working just fine on my 7.1 site for about 4 months and in the past few days it has stopped functioning. Would anyone be able to give me an idea of how to remedy this. I've gone back over this post many times and have tried other options to no avail. Running out of ideas, any help is appreciated. Website is https://avenueshelp.org  

Thanks!

Edited by subrosa
Problem resolved by adding sufficient padding to drop the bar below the header. Need to finesse the appearance but it's functional.
Link to comment
14 hours ago, subrosa said:

Hello all,

I had this solution working just fine on my 7.1 site for about 4 months and in the past few days it has stopped functioning. Would anyone be able to give me an idea of how to remedy this. I've gone back over this post many times and have tried other options to no avail. Running out of ideas, any help is appreciated. Website is https://avenueshelp.org  

Thanks!

Did you solve or still need help? If still need help, which code did you use? I see a lot of code in this topic

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 7/20/2022 at 2:33 AM, tuanphan said:

Did you solve or still need help? If still need help, which code did you use? I see a lot of code in this topic

Thank you Tuanphan, I commented in my previous post that it was a padding issue and I applied a fix that worked, until recently.  I've included all of the code I'm using for this feature below, any help is very appreciated, I've gone over it numerous times and I'm just not seeing the solution.

Edit: The gold bar with the feature is intended to be just below the header containing the navigation and logo.

Script in Code Injection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
$(document).ready(function(){
    $("#quick-exit").on("click", function() {
      window.open("https://www.lifehack.org/695043/workout-routine-for-women-to-get-strong-and-toned", "_newtab");
      window.location.replace('https://blogs.womans.org/category/health-fitness/');
     });
});
  </script>


CSS

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

/* Override h2 color style in quick escape bar */
#block-yui_3_17_2_1_1638291030593_8354 
h2 {color: #ffffff !important;
}

Footer Code Block

<div id="quick-exit">
  <h2>QUICK EXIT:</h2>
  <p>Tap this bar anytime to immediately close this page and open two others.</p>
</div>

Edited by subrosa
Add comment regarding the desired position of the escape bar.
Link to comment
On 9/2/2022 at 9:59 PM, subrosa said:

Thank you Tuanphan, I commented in my previous post that it was a padding issue and I applied a fix that worked, until recently.  I've included all of the code I'm using for this feature below, any help is very appreciated, I've gone over it numerous times and I'm just not seeing the solution.

Edit: The gold bar with the feature is intended to be just below the header containing the navigation and logo.

Script in Code Injection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
$(document).ready(function(){
    $("#quick-exit").on("click", function() {
      window.open("https://www.lifehack.org/695043/workout-routine-for-women-to-get-strong-and-toned", "_newtab");
      window.location.replace('https://blogs.womans.org/category/health-fitness/');
     });
});
  </script>


CSS

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

/* Override h2 color style in quick escape bar */
#block-yui_3_17_2_1_1638291030593_8354 
h2 {color: #ffffff !important;
}

Footer Code Block

<div id="quick-exit">
  <h2>QUICK EXIT:</h2>
  <p>Tap this bar anytime to immediately close this page and open two others.</p>
</div>

I think you should move this code to Code Injection > Footer

<div id="quick-exit">
  <h2>QUICK EXIT:</h2>
  <p>Tap this bar to close this page and open two others immediately.</p>
</div>

Then edit this code

#quick-exit {
    position: fixed;
    top: 128px;
    left: 0;
    z-index: 9999;
    background: #f2bb31;
    width: 100% !important;
    padding: 0px;
    text-align: center;
}

to this

#quick-exit {
    position: absolute;
    top: 120px;
    left: 0;
    z-index: 9999;
    background: #f2bb31;
    width: 100% !important;
    padding: 0px;
    text-align: center;
}

image.thumb.png.545533a67e8ba7cc12788a35f0ccc95c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/4/2022 at 1:12 AM, tuanphan said:

I think you should move this code to Code Injection > Footer

<div id="quick-exit">
  <h2>QUICK EXIT:</h2>
  <p>Tap this bar to close this page and open two others immediately.</p>
</div>

Then edit this code

#quick-exit {
    position: fixed;
    top: 128px;
    left: 0;
    z-index: 9999;
    background: #f2bb31;
    width: 100% !important;
    padding: 0px;
    text-align: center;
}

to this

#quick-exit {
    position: absolute;
    top: 120px;
    left: 0;
    z-index: 9999;
    background: #f2bb31;
    width: 100% !important;
    padding: 0px;
    text-align: center;
}

image.thumb.png.545533a67e8ba7cc12788a35f0ccc95c.png

Thank you very much for the assistance. I'll try this now and let you know how it went!

Link to comment
23 minutes ago, subrosa said:

Thank you very much for the assistance. I'll try this now and let you know how it went!

It works perfectly now, the only slight change I made was to have the bar be "fixed" as opposed to "absolute", the client wanted the bar to always be visible regardless of where the visitor was on the page. Thank you again, the nature of their website made this an important feature. 

Link to comment
  • 3 months later...
4 hours ago, houseofruthinc said:

Hi, I tried adding this to the header space for code injections and I'm still not getting a click function.

The line you added is a library that is used for writing custom code. On it's own it doesn't do anything visible on your site. Custom code needs to be written to do something.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 months later...

This thread was so helpful in implementing an EXIT button for a intimate partner violence (domestic violence) resource website and study I am helping put together!

My main addition below to adjust it easily with my site header maintain position right below it (where the language translation buttons are). And aesthetic adjustments, too.

#header {
    top: 50px;
}

Thanks!!!

engagingtogether.com

pw: ETHR2

Link to comment
On 4/13/2023 at 2:26 AM, ETHR said:

This thread was so helpful in implementing an EXIT button for a intimate partner violence (domestic violence) resource website and study I am helping put together!

My main addition below to adjust it easily with my site header maintain position right below it (where the language translation buttons are). And aesthetic adjustments, too.

#header {
    top: 50px;
}

Thanks!!!

engagingtogether.com

pw: ETHR2

Did you solve with the code or still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 2/10/2021 at 5:07 PM, paul2009 said:

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  ⬇️

I would like to have some help with a quick escape button. It is for this website - https://www.contracostaalliance.org/. Right now I have it as a pop-up, which is not useful when someone returns to the site in the same day. Can you let me know how to reach you? Thank you! 

Link to comment
  • 2 weeks later...

Hi there, 

Our website was created for individuals who are suffering from domestic and/or sexual violence, and are looking for resources or support.  I am needing a quick exit button for our website, similar to the attached photo. The quick exit button needs to be always be clickable no matter where someone is on the screen, and must open a new browser when clicked on to a generic website like this: (https://www.theweathernetwork.com/ca). So far, I have not found a resolution to add this based on other forum submissions. Can anyone help me to get this added to my site? 

Screenshot 2024-05-10 at 1.37.39 PM.png

Link to comment
37 minutes ago, Janarose said:

I need help with this 😞 mine is not working when I try to add it

Can you provide some more details please? What have you tried? What symptoms are you are experiencing? What is the URL of the site?

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

I have tried the above steps of putting the coding into the code injector, and then adding coding to the CSS in order to get an exit button that stays on the screen when scrolling through, but it doesnt show anything at all on my site. When i thought I did it, it compromised the top header bar by removing it entirely, and just showed a blank space.

Site URL is www.waypointswb.ca

I want a small button at the bottom of the page when people scroll that will allow them to exit out quickly and open a new browser entirely with the weather as the page it's on. I want to prevent anyone from being able to see that that person was on our website incase they hit the "back" button. @paul2009. I'm a graphic designer doing a website, and coding is not my forte unfortunately 😞

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.