How to pass hidden fields data from url into embedded typeform by javascript?

I need help to pass hidden parameters in typeform form from the url. My Url is something like this.

usa.domasd.com/?utm_source=Social%20Media&utm_medium=Linkedin&utm_campaign=Mayank%27s%20profile

I need to fetch the utm values from the url that is I need values like utm_source,utm_medium etc.It needs to be passed in the typeform hidden values. Now the typeform is actually embedded in the page. Here is what my javascript code looks like

<script>
function parseURLParams(url) {
    var queryStart = url.indexOf("?") + 1,
        queryEnd   = url.indexOf("#") + 1 || url.length + 1,
        query = url.slice(queryStart, queryEnd - 1),
        pairs = query.replace(/\+/g, " ").split("&"),
        parms = {}, i, n, v, nv;

    if (query === url || query === "") return;

    for (i = 0; i < pairs.length; i++) {
        nv = pairs[i].split("=", 2);
        n = decodeURIComponent(nv[0]);
        v = decodeURIComponent(nv[1]);

        if (!parms.hasOwnProperty(n)) parms[n] = [];
        parms[n].push(nv.length === 2 ? v : null);
    }
    return parms;
}
var secondUrl = window.location.href; // this one is for getting the url
console.log(secondUrl);
urlParams = parseURLParams(secondUrl);
console.log(urlParams['utm_source']);

document.getElementById("utm_source").value = urlParams['utm_source'];
document.getElementsByName("utm_medium").value = urlParams['utm_medium'];
document.getElementByName('utm_campaign').value = urlParams['utm_campaign'];
document.getElementByName('utm_term').value = urlParams['utm_term'];
document.getElementByName('utm_content').value = urlParams['utm_content'];
</script>

I have also tried to pass the values by typescript documentation code but it is not working. Any suggestion on how to resolve it and pass the data. I am using notion and super so platforms to make the website. Please check the typeform code here

<a class="typeform-share button" id="TypeForm1" href="https://form.typeform.com/to/XzRHXdmJ?utm_source=%40utmsource&utm_medium=&utm_campaign=&utm_term=&utm_content=&typeform-medium=embed-snippet" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#0445AF;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:50px;text-align:center;margin:0;height:50px;padding:0px 33px;border-radius:25px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
  data-size="100" target="_blank">Launch me </a>
<script>
  (function() {
    var qs, js, q, s, d = document,
      gi = d.getElementById,
      ce = d.createElement,
      gt = d.getElementsByTagName,
      id = "typef_orm_share",
      b = "https://embed.typeform.com/";
    if (!gi.call(d, id)) {
      js = ce.call(d, "script");
      js.id = id;
      js.src = b + "embed.js";
      q = gt.call(d, "script")[0];
      q.parentNode.insertBefore(js, q)
    }
  })()
</script>

Solution

Typeform Embed SDK provides an out-of-the-box solution to pass URL query parameters from the parent window to the embedded typeform.

it's the transitiveSearchParams parameter.

Option 1: Plain HTML

<div
      id="wrapper"
      data-tf-widget="REPLACE_BY_YOUR_FORM_ID"
      data-tf-medium="demo-test"
      data-tf-transitive-search-params="foo,bar"
      data-tf-hidden="my_hiddenfield=value,another_hiddenfield=somevalue"
      data-tf-opacity="50"
    ></div>
    <script src="//embed.typeform.com/next/embed.js"></script>

Option 2: using Javascript

Add the embed SDK to your website

<script src="//embed.typeform.com/next/embed.js"></script>

Then add your typeform to the page.


var url = "https://picsoung.typeform.com/to/QXS2h1" // NOTE: Replace with your typeform URL

const embedElement = document.getElementById("wrapper") 

window.tf.createWidget("moe6aa", {
        container: embedElement,
        transitiveSearchParams: ["foo", "bar"],
        medium: "demo-test",
        hidden: { foo: "foo value", bar: "bar value" },
      });

Option 3: Modify the snippet given by Typeform

Add data-tf-transitive-search-params="utm_source, utm_medium” to the code snippet given by Typeform under the Share panel.