How to create a 'leave site' button?

Ask the community
,
1

we have a domestic violence client that has asked for ‘leave this site’ button. This is common on many DV support sites (example is https://safelives.org.uk/

This can be site wide too where clicking the button/banner, will open a net tab with a fixed address (e.e.g weather.com)) and return the existing (current) window to /home or google.com but disable the ‘back’ button on that tab too. this would remove any trace of the site for those in a vulnerable situation.

This is a very important requirement. Any thoughts? I’ve seen JS and HTML/CSS code online, but when I tried these, they do not work on VELO

2

Leave a site = Log-Out
Take a look into VELO-API-DOSs and search for -->Wix-Users (log-out)

3

Thanks but that’s not what I’ve been looking for. that logs a user out of their session. I need the browser/tab to default to /HOME, disable dhte ‘back button’ and open a new tab. Just like the reference I gave ( https://safelives.org.uk/ ). look at the bottom of the page- (leave this site)

4

@mims You may be able to create this functionality using a Custom Element. This article will help you get started: https://support.wix.com/en/article/velo-about-custom-elements

5

Please observe the community guidelines and refrain from multiple posts on the same topic or question.

In any case, you can create a simple “leave this site” button like this…

Design your footer with the color and text that you want - I like grey. Then set “freeze position”.

1090×868 167 KB

To prevent the browser’s back button from being used, I added an HtmlComponent to the footer that has the following code:

<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
       let receivedData = event.data;
       if(receivedData === 'flush') {
            history.pushState(null, document.title, location.href);
            history.back();
            history.forward();
            window.onpopstate = function () {
                history.go(1);
            };
       }
    }
  };  
</script>

This code is called from the page by sending a message to the HtmlComponent.

Then, your masterPage.js onReady() code should look like this:

import wixLocation from 'wix-location';

$w.onReady(function () {
  // Write your code here
    $w("#footer1").onClick((event) => {
       $w("#html1").postMessage("flush"); // send message to HtmlComponent
       wixLocation.to('https://www.wix.com'); // go to another site
    }); 
});

This code first “flushes” the browser history to prevent someone from returning to the site by hitting the browser’s back button. It then redirects to another website (I’m using wix.com for the example).

If your site has a login, then you can also add a logout() before the redirect, to make sure the site visitor has “completely left” the site.

6

Thank you for the advice. I’ll give this a go and apologies for posting twice. I wasn’t sure the first actually went through but this is amazing that you found a solution to it. This is why we love WIX!

7

hi Yisrael. Almost there. Just a couple of points please.
1 - In the advanced page, under custom code, only head and body exist. so how did you add code to the footer please? I cannot embed HTML snippet to the footer. Seem the footer is locked!
2 - the html1 element does not exist on my page. What does this refer to on your page please? I cannot find anything for html except the htmlmenu (1 and 2) that are there. Not sure what this bit is for.

thanks
Mims

8

@mims I didn’t add the HTML snippet to the custom code blocks (under custom code). I added an HtmlComponent to the Footer right in the site editor. Add the Embed a Widget element:

1654×1392 275 KB

After adding the HtmlComponent, move it into the Footer, and then add the HTML code as shown.

2166×1358 287 KB

Don’t worry about html1 or html2 . Add an HtmlComponent, and then whatever element Id the Editor assigns, use that Id in the page code.

9

@yisrael-wix Thank you! I figured how to put the HTML in the footer (sorry, schoolboy error). Code is redirecting now but not disabling the ‘back button’, i.e. flushing. Is yours working properly? al-hasaniya.org.uk … code is identical except I’m using button32 instead of footer1

10

@mims Mine works as I constructed it - using only the Footer to click on.

I see the button on your Live site, but I don’t see it in the Editor.

1304×984 72.5 KB

11

@mims Well, one problem I see is that it works on Safari, but it doesn’t work on Chrome. Seems that there are some browser compatibility issues.

Sorry, this may be a problem finding a way to adapt to all browsers. I’ll see what I can find, but I would suggest that you also try to find a more “compatible” script than what I found.

12

Hey Mims, I think I figured it out. I hope to have this ready for you by tomorrow. Just working out some details.

13

Hey Mims,

As I said, I was working on something that had promise, but Chrome continues to be a problem. Safari and Firefox work fine.

In fact, even the site that you linked to as an example doesn’t work on Chrome. I click on “Leave this site”, it goes to Google, and then when I click the browser back button it goes back to the site.

I tried your example site on Safari and Firefox and they both behave as you want. Except on Safari, when I click on the browser’s back button, the original example site “flashes” and then disappears. That is, it almost works.

All in all a bit discouraging.

If you want the Safari/Firefox solution that I worked up, I’d be glad to share. It seems to work fine on Safari and Firefox with no issues. As long as you realize that Chrome remains an issue.

14

Thank you Yisrael,
I’d really appreciate the code as anything is better than nothing at this stage. The client runs a DV and Mental health Charity and it’s essential they have this feature. As a side note, would this site help for any code as it work in Chrome for me. I know it’s not WIX so works differently. Your time on this is really appreciated and invaluable. Thank you so much!

https://safelives.org.uk/

15

hi, Also, for me (MacOS), the ‘back button’ still appears on firefox, chrome, brave and safari. Might be something on my end I guess. anyway, I think I’ve taken up enough of you time on this. thank you so much for the help.

16

I think I’ve got something that even works on Chrome (as well as Firefox and Safari). This is what you’ve got to do (take a deep breath)…

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

● When you S et 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 LeaveButton 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 Setting like this:

1354×844 67.6 KB

● 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 (which is what you have).

● 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 worked 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.

I need a beer.

17

BTW - another method, albeit much less challenging and less fun, is to just use the Quit browser hotkeys (Cmd-Q on a Mac) with “Warn before Quitting” disabled.

18

@yisrael-wix , genius! I and our client owe you a large one my friend! Thank you so much. works a treat!

19

Unbelievable! It’s important work you and your client are working on and I’m glad I could help.

20

Hi ! Can you give please a step by step to do this ? I need the same : A “leave quickly this site” buttom in my homepage. Before leaving the site, clear cookies, storages, memory, or sessions. Redirects to google.com. Please i would be glad if you can help. I.m not a coder and it’s hard for me to understand. wix is easy to use but many things are missings. Please help