Crating a random URL Button with custom Code

Design help Custom code
1

What’s good y’all,

I’ve got my site about finished. Would like my landing page to have a link (as you can see) that directs the user to a number of random pages to my site. Currently I have it set up in a very cheap way, where each letter is its own link, but I’d like it to truly be random and not based off which letter they click.
How might I go about doing this? Very determined to get this done. Would happily sacrifice the text link for a button underneath if that’s easier, I just want a button that is a randomizer essentially.

Here is my site Read-Only: (https://preview.webflow.com/preview/jacobs-wondrous-project-408787?utm_medium=preview_link&utm_source=designer&utm_content=jacobs-wondrous-project-408787&preview=239072ed977e907ea99f8e11cc04a1df&workflow=preview)
(how to share your site Read-Only link)

2

Hi @jacobhop3,

Welcome to the forum!

You can use some code like this in Page Settings > Custom Code > Before tag:

<script>

const links = [
    "https://www.webflow.com/",
    "https://www.google.com/",
    "https://www.youtube.com/",
    "https://www.facebook.com/"
]

let randomLink = links[Math.floor(Math.random() * links.length)];
const button = document.querySelector(".random-link");
button.addEventListener("click", function() {
    window.location.href = randomLink;
}
)

</script>

You’ll just need to wrap your this text in a span and give it the class 'random-link) for this to work. Quick demo here.

Edit: Sorry, I wrote ‘random-text’ instead of ‘random-link’ in the demo

Hope this helps!

3

Hey @jacobhop3 !

I think I’m getting this in just after @mww replied, but I figured I’d still throw a reply in anyways.

My answer is basically the same as Milan’s, but instead of using JavaScript to change window.location.href, I make the “let fate decide” text a link and change its href attribute to a random URL on click.

Here’s a video of me showing you how I did it: CleanShot 2022-07-26 at 21.03.34 · CleanShot Cloud

And here’s the code I used:

<script>
  const urls = ["https://stripe.com/", "https://webflow.com/", "https://www.figma.com/"];
  
  fateText = document.querySelector('.fate-text');
  
  fateText.addEventListener("click", function() {
  	let randomUrl = urls[Math.floor(Math.random() * urls.length)];
    fateText.setAttribute('href', randomUrl);
  });
  
</script>

Either solution you go with should work great, though :slight_smile:

1 Like
4

Thank you! I’ll give this a shot and see how it shakes! I appreciate your help! :cowboy_hat_face:

5

I appreciate the help! Don’t trip, your explanation was just fine and I understand what I need to lol.

1 Like