Website Quick Exit or Panic Button

Design help General
1

Hi All,

I have a requirement from a women charity to add a “Quick Exit” or “Panic” button to the website.

The button would always be on the screen and on clicking the button it will open a new sie but also at the same time open a new tab with another innocuous site loaded.

See the EXIT button here as an example: https://www.womensaid.org.uk

It has a green safe exit button on the right and when clicked it changes both the existing tab and opens a new tab, so even if trying to press back it wouldn’t show what they are looking at.

Any ideas on how to implement this?

Thanks,

Shane

2

Hey Shane,

You can easily find the code in that page, they are executing following JS script on click. Just change the link as you prefer.

function replaceDocument() {
  window.open("https://en.wikipedia.org/wiki/Main_Page", "_newtab");
  location.replace("https://www.google.co.uk/search?tbm=isch&sa=1&ei=esSCW4LPH4WugQaZsbqoDw&q=cute+baby+animal+memes&oq=cute+baby+animal+memes&gs_l=")
}

There button has been setup like following, but if you other way do can do that as well. Just leaving it as it is because it is a simplest and straight forward implementation.

<button onclick="replaceDocument()">Exit Site</button>
1 Like
3

That worked a treat thanks.

Is there a way to fire the script using attributes on a regular Webflow button?

4

You can do same thing using following JS code. It can be done in other ways as well.

const replaceDocument = () => {
    window.open("https://en.wikipedia.org/wiki/Main_Page", "_newtab");
    location.replace("https://www.google.co.uk/search?tbm=isch&sa=1&ei=esSCW4LPH4WugQaZsbqoDw&q=cute+baby+animal+memes&oq=cute+baby+animal+memes&gs_l=")
}

const onClickElements = document.querySelectorAll("[on-click]");

onClickElements.forEach(element => {
    element.addEventListener("click", (e) => {
        e.preventDefault();
        let functionName = e.currentTarget.getAttribute("on-click");
        if (functionName === "replaceDocument") {
            replaceDocument()
        }
    })
});

You button/link should be setup like below.

<a href="#" on-click="replaceDocument">Click Here</a>
1 Like