Button to hide on click, as well as open a link in a new tab

Ask the community
,
1

I made a similar post to this a few weeks ago but hadn’t done much of my own testing and ultimately got nowhere. I’ve been trying to figure this out since, but I just can’t do it so I’m making another post with, I think, a clearer premise.

I’m trying to create a button as a 'sub to unlock" feature, where by a user clicks a button, opening an link in a new tab to my YouTube channel, and when they return to the original tab, the button has hidden, revealing the text underneath.

I’ve made a test page for this ( https://www.liambetham.com/test-two ). The page contains only a button and the text underneath.

My First Idea is this:

Set the button to hide using an onClick event, something like this:

export function button_click(event) {
  let fadeOptions = {
  "duration":500,
  "delay":1000
};

$w("#button65").hide("fade", fadeOptions);
}

And then set the button to also open the link to subscribe in a new tab, with the addition of this:

$w.onReady(function () {
$w("#button65").link = "https://www.youtube.com";
$w("#button65").target = "_blank";
}

However, with this setup the button hides, but the link doesn’t open. I believe this is as .link is supposed to go under “$w.onReady(function)”, rather than an onClick event and the onClick event which is required to hide the button overrides the “$w.onReady(function)” code.

The alternative, which does work with an onClick event, is “wixLocation.to”, but this lacks the ability to open a link in a new tab, therefore directing users away from the original content which is supposed to be ‘unlocked’.

My second idea is this:

Set the button to open the YouTube link in another tab, and in the original tab open a copy of the page where the button doesn’t exist to block the content. For example, open https://www.youtube.com in a new tab, and take the current tab to my home page; https://www.liambetham.com.

I tried this with this code:

$w.onReady(function () {
$w("#button65").link = "https://www.youtube.com";
$w("#button65").target = "_blank";

$w("#button65").link = "https://www.liambetham.com";
});

However, this just opens my home page in a new tab and I’m really not sure why.

If someone could either point out any error(s) in my code, tell me another solution entirely, or come up with a fix for the overall goal itself that would be really appreciate.

Thanks,
Liam

2

You can change the link property from anywhere, but you can’t use click handlers and link properties on the same element. I’d like to know why they made this design decision, because this seems like an obvious and unfortunate sticking point.

Your second idea is a nonstarter. You set the button to link somewhere and then set it again. You may as well have never pointed it to YouTube. The URLs don’t stack: a link can only be pointing to one place at any given time.

I think you might have to make the button (or whatever HTML element) inside a HTMLComponent.

Test

And to hide the iframe after the timer has elapsed:

$w.onReady(() =>
{
$w(‘#html1’).onMessage(event => $w(‘#’ + event.target.id).hide());
});

3

Thanks for the reply.

Could you please explain what you mean by “… make the button (or whatever HTML element) inside a HTMLComponent.”

I’m not very experienced at this and am not sure what the goal of that code is?

Cheers.

4

Adding HTML Content

  1. Click Add on the left side of the Editor.

  2. Click More .

  3. Click Embeds .

  4. Click HTML iframe , or drag it to the relevant location on your page.

  5. Click Enter Code .

And paste what I wrote above. The unstyled button won’t look great though, so you might want to venture into basic CSS.

5

I decided to do it for you.

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:700&display=swap" rel="stylesheet">
    <style>
        #subscribe {
            background-color: rgba(242, 0, 0, 1);
            border: 0;
            color: white;
            height: 40px;
            width: 240px;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <button id="subscribe">SUBSCRIBE TO UNLOCK</button>
    <script>
        var button = document.getElementById('subscribe');
        button.addEventListener('click', function()
        {
            window.open('http://www.youtube.com/', '_blank');
            setTimeout(function() {
                window.parent.postMessage('button was clicked', '*'); //send message to Wix page
            }, 5000); //after five seconds
        });
    </script>
</body>
</html>

Don’t forget you need the last piece of code in my first reply to respond to the message and hide the iframe.