Dynamically add URL parameter into a menu button

Hey guys,

I’m looking to pass in a parameter into a button URL that lives in my unified menu component across all my pages.

Basically - if someone is on a particular landing page on my site - I’m looking to append ?click_src={page-title} to my www.link.com/get-started button url.

Right now I’m achieving the desired effect on any of my non-component buttons - by manually updating them. That’s effectively passing through into my hubspot forms already. Not fancy at all. But I’m at a loss for what to do for my main menu bar.

The end goal is to be able to see which page converted a user to submit our unified lead form - without have to rely on analytics. Their click_src will be saved as a value on their hubspot contact record.

Thanks for the help!


Here’s my webflow site: https://www.lennd.com/

The Get Started button is the url I’m hoping to dynamically adjust per page:

Shoutout to Ross :raising_hand_man: - my engineer friend & founder at Mixapop who helped me out with this - and it’s working great!

Here’s the code - hope it’s helpful to others! (some more notes below)

<script>
const linkIds = [
  'link_id_1', 'link_id_2', 'link_id_3'
];
linkIds.forEach(id => {
  const interval = setInterval(() => {    
    const link = document.querySelector('#' + id);
    if (link) {
      clearInterval(interval);
      const href = link.getAttribute('href');
      const pageTitle = 
        document
          .title
          .replace(/\s+/g, '_')
          .replace(/&/g, '')
          .toLowerCase()
      const newHref = `${href}?your_parameter_name=${pageTitle}`;
      link.setAttribute('href', newHref);
    }
  }, 20);
});
</script>

So this code is appending my designated links with a custom parameter.
It’s also replacing all the spaces with underscores and stripping out ampersands.
You may need to replace other special characters that aren’t covered in these cases.

This could also be tweaked to work with Class Names or even attributes…but for now ID’s work for me.

Also - we needed to add in a delay interval to make sure the elements had been created on the page, because without it, the code was being run first - before the elements had been created on the DOM.

Hello @Steve_Witmer great solution for the page name! Do you know how can this be applied to catch the hreflang ? that would help a lot!