Panic Button

Update: I have now provided an improved example. To see how the Panic Button works, run the live preview. Load the template in the Editor to inspect the code.

In addition to the obvious use of Incognito or Private mode in the browser, sensitive support sites (e.g. domestic violence) have a need for a Panic Button, which provides the site visitor a quick and disguised exit from the website. This can prevent harm and save lives.

In spite of browser compatibility issues I think I've got something that works on all (most?) browsers. This is what you've got to do...

• Create a Custom Element on your site as described in Velo About Custom Elements.

• When you set the Location of the JavaScript File, rename the file to leave-button.js.

• Add the following code to the leave-button.js file:

const template = document.createElement('template');

template.innerHTML = `
  <style>
    .container {
      padding: 8px;
    }
 
    button {
      display: block;
      overflow: hidden;
      position: relative;
      padding: 0 16px;
      font-size: 16px;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      outline: none;
 
      width: 100%;
      height: 40px;
 
      box-sizing: border-box;
      border: 1px solid #a1a1a1;
      background: #ffffff;
      box-shadow: 0 2px 4px 0 rgba(0,0,0, 0.05), 0 2px 8px 0 rgba(161,161,161, 0.4);
      color: #363636;
      cursor: pointer;
    }
  </style>
 
  <div class="container">
    <button>Leave this site</button>
  </div>
`;

class Button extends HTMLElement {
    constructor() {
        super();

        this._shadowRoot = this.attachShadow({ mode: 'open' });
      this._shadowRoot.appendChild(template.content.cloneNode(true));

        this.$button = this._shadowRoot.querySelector('button');

        this.$button.addEventListener('click', () => {
            window.open("https://www.yahoo.com", "_newtab"); // open new tab and switch to it.
            window.location.replace("https://www.google.com"); // load the another site in the current tab.
        });
    }

    connectedCallback() {
        if (this.hasAttribute('as-atom')) {
            this.$container.style.padding = '0px';
        }
    }

    get label() {
        return this.getAttribute('label');
    }

    set label(value) {
        this.setAttribute('label', value);
    }

    static get observedAttributes() {
        return ['label'];
    }

    attributeChangedCallback(name, oldVal, newVal) {
        this.render();
    }

    render() {
        this.$button.innerHTML = this.label;
    }
}

window.customElements.define('leave-button', LeaveButton);

• Set the Element Settings like this:

• Save and Publish the site. This will only work on a Live site, not Preview. A Custom Element will only work on a Premium site with a domain attached.

• Load the site, and click on the Leave this site button and you should get a new tab with another website, and the original tab will be redirected to yet another site. If all works as expected (and as works for me), the browser's back button will end up going nowhere.

I tried this on Safari, Firefox, and Chrome. It worked for me. Your mileage may vary.