Appending parameters to onClick URL

Question

We're trying to append UTM parameters to a calendly link. It was working great when it was a standard anchor link, but now the site dev has changed the button to an onClick event.

Here is the code we were using to append the parameters to the URL:

(function() {
var links = document.querySelectorAll('a');
    for (var i = 0; i < links.length; i++) {
      if (links[i].hostname == "calendly.com") {
        var calendlyLink = links[i];
        if({{Javascript - finalParams}} !== '?' || {{Javascript - finalParams}} !== 'undefined'){
        calendlyLink.href = calendlyLink.href + {{Javascript - finalParams}};
      console.log(calendlyLink);
            }
      }
    };
 
 })();

Here is the new button code:

<a class="demo-button" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/xxxxxx/product-demo'});return false;">Button Text</a>

What do I need to change to fix this so the UTM parameters are added to the URL?

Answer 1

The Calendly.initPopupWidget method accepts a utm parameter option that can be used to prefill the utm parameters in the iframe (see here)

<a class="demo-button" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/xxxxxx/product-demo', utm: { utmSource: 'utmSource', utmCampaign: 'utmCampaign' } });return false;">Button Text</a>