Grab URL parameter passed and add to iframe URL

Question

I'm using typform embed code but they didn't provide any sample code to grab a custom parameter from the URL and insert it into the embed code they generate. They explain it can be done though. The steps are outlined below. I'm looking for some code that will grab any parameters passed on the URL and add them to the typeform URL within the iframe. Hopefully, the timing works out and by the time the iframe code executes, it will have the parameter passed.

User clicks on link https://mysite/embedpage.html?sfid=2324234
Page code should read the sfid passed to the URL and add this parameter plus the value passed to the typeform URL within the embed code as seen below:

<html> 
  <head> 
  </head> 
  <body> 
    <iframe id="typeform-full" width="100%" height="100%" frameborder="0" 
      src="https://mysite.typeform.com/to/tpEHHt?sfid=2324234">
    </iframe> 
    <script 
      type="text/javascript" src="https://embed.typeform.com/embed.js">
    </script> 
  </body> 
</html>

score 2 · Accepted Answer · answered Nov 14 '19 at 22:36

Did you try something like this ?

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    console.log('Query variable %s not found', variable);
}

document.getElementById('typeform-full').src = `https://mysite.typeform.com/to/tpEHHt?sfid=${getQueryVariable('sfid')}`;

score 1 · Answer 2 · answered Nov 14 '19 at 23:26

I believe this question has been asked before on Stackoverflow.

I made a working example on glitch that you can copy and use for your own.

Similar to @Twisting nether solution, extract the query parameter from the current page, with a function, and pass it to Typeform Embed SDK.

Hope it helps :)

Grab URL parameter passed and add to iframe URL

2 Answers2