Develop Reference

Pass url parameters to a embedded forms/iframes on landingpages

I want to pass url parameters (hidden fields) to iframe/embedded forms on our Hubspot landing pages.
The url parameters I want to pass to the Typeform are utm_source, email and referralcode.
An example of a page I'm currently working on:
<div class="typeform-widget"
data-url="https://xxxxxx.typeform.com/to/xxxx"
data-transparency="50"
data-hide-headers=true
data-hide-footer=true
style="width: 100%; height: 600px;" > </div>
<script> (function() {
var qs,js,q,s,d=document,
gi=d.getElementById,
ce=d.createElement,
gt=d.getElementsByTagName,
id="typef_orm",
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>
What code do I need to add to pass the url parameters to my embedded form?
Thanks

This is possible using Typeform Embed API
See a working example on Glitch
You can edit here.
Steps to reproduce:
Include Typeform Embed SDK in your HTML
Extract parameters from URL
let params = new URLSearchParams(location.search);
Reconstruct your form URL
var url = "https://YOUR_SUBDOMAIN.typeform.com/to/YOUR_TYPEFORM_ID"
url += "?utm_source=" + params.get('utm_source');
Display form in a target div
const embedElement = document.querySelector('.target-dom-node')
window.typeformEmbed.makeWidget(
embedElement,
url,
{
hideHeaders: true,
hideFooter: true,
}
)
Hope it helps :)

How to get the wildcard in the URL and apply argument to a link

Hello I am super new to building websites. Please excuse my lacking terminology!!
I have a website that has Wildcard sub-domains. It is using this script to pull the wildcard sub-domains usernames.
<p id="dist-info"></p>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
return;
var get_data_url = 'https://backoffice.WEBSITE.com/api/v2/public/users/{username}';
$.getJSON(get_data_url, function( data ) {
var dist_info = "<p>"+data.response['first-name']+"</p>" +
"<p>"+data.response['last-name']+"</p>" +
"<p>"+data.response['distributor-id']+" "+data.response.email+"</p>" +
"<p>"+data.response['image-url']+"</p>" +
"<p>Phone: "+data.response.phone+"</p>";
$('#dist-info').html(dist_info);
});
});
</script>
Now I need to make a URL that will parse the username/user id out of the Wildcard Subdomain page. What code do I need to use?
For example
The URL is
USERNAME.WEBSITE.com/page/subpage/
I need to make this URL
backoffice.WEBSITE.com/page?sponsor-id=USERNAME
What do I need to do so that the username from the first page is parsed out and applied to the link of the second URL

You want to modify this JavaScript so it uses the subdomain instead of {username}?
$(document).ready(function() {
var get_data_url = 'https://backoffice.WEBSITE.com/api/v2/public/users/';
var hostname_parts = location.hostname.split('.');
var username = hostname_parts.shift();
// add username to the data URL
get_data_url += username;
// add username to some link on the website
var $aTag = $('#id-of-the-link');
var link_url = $aTag.attr('href');
link_url += username;
// set the new href attribute
$aTag.attr('href', link_url);
location.hostname gives you USERNAME.WEBSITE.com, split() splits it into parts separated by a dot. shift() takes the 1st element of this array (you could also use hostname_parts[0]) and with += you concatenate it to the URL.
The second example shows how to add the username at the end of a link like
click
Edit: added example for changing a href attribute

How can I append "?new_page=2" to a URL within javascript? It seems the question mark isn't allowing me to parse

My original code which works is this:
function changeURL() {
var theURL = location.pathname;
var newURL = theURL.replace("/page1/", "/page2/");
return newURL;
}
$('.currentpagediv').load(changeURL() + ' .secondpagedivclass');
Basically, per How can I dynamically add a URL into javascript, to get a second page's div to display on the first page?, I am trying to add new content from second page into the first page.
However, Now I am trying to also add the SECOND PAGE of the second page into the first page, because the way it is set up, it shows page 1, 2, 3, 4, 5 etc pagination at the bottom. I am trying to also show the other pages in the same page.
For example,
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
[CONTENT HERE]
Page 2, Page 3, Page 4, etc.
</div>
</body>
</html>
But I want:
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
[CONTENT HERE]
[Page 2 Pagination Link CONTENT HERE]
[Page 3 Pagination Link CONTENT HERE]
[Page 4 Pagination Link CONTENT HERE]
[etc.]
</div>
</body>
</html>
Original URL that I am inserting, looks like this:
http://theurl.com/page2/somethingsomewhere.html
The pagination pages look like this:
http://theurl.com/page2/somethingsomewhere.html?new_page=2
http://theurl.com/page2/somethingsomewhere.html?new_page=3
etc.
Here is the code I tried first that does not work:
$('.currentpagediv').load(changeURL() + ' .secondpagedivclass' + '?new_page=2');
But I learned it does not work because you can't parse the question mark. I read that instead I should use .search to parse the new page. So I tried this:
function changeURL() {
var theURL = location.pathname;
var newURL = theURL.replace("/page1/", "/page2/");
return newURL;
}
function secondPage() {
var secondURL = changeURL()
var secondnewURL = secondURL.search('new_page', 2);
return secondnewURL;
}
$('.currentpagediv').load(secondPage() + ' .secondpagedivclass');
In the above code, the only difference from the original working code is the addition of the secondPage() function, and adding that function after .load(.
In the code above, I tried to:
fetch the url of current page
modify the url, and then
append ?new_page=2 to the end of the new url, and
add the function secondPage() to create the URL

Dynamically change text based on URL input

I am using the following code to dynamically change the text on my clients website (www.mydomain.com.au):
<script type="text/javascript">// <![CDATA[
var url = window.location.toString();
var query_string = url.split("?");
if (query_string[1]) {
var params = query_string[1].split("&");
var param_item = params[0].split("=");
param_item[param_item[0]] = unescape(param_item[1]);
document.write(param_item["city"]);
} else {
document.write("24 Hour Glass Replacement");
}
// ]]></script>
It works perfectly fine on the index page. e.g. www.mydomain.com.au/?city=test
but when I am using the same code on other pages e.g. http://www.mydomain.com.au/Brisbane.html/?city=test I get a 404 error.
Appreciate any help

Remove the / before starting querystring. So,
try http://www.mydomain.com.au/Brisbane.html?city=test instead of http://www.mydomain.com.au/Brisbane.html/?city=test

Passing javascript variable from iframe to URL

Lets say I have a function like this:
<script type="text/javascript">
function ReturnURL()
{
var url = document.URL;
var url2 = url.split("=");
var urlID = url2[url2.length-1];
//window.open('http://localhost/POSkill/skillshow.aspx?user_id =' + urlID);
return urlID;
}
</script>
And I also have iframe in my html file which is something like below:
<iframe id="showSkill" scrolling="yes" src="http://localhost/POSkill/skillshow.aspx?user_id = ReturnURL()" height="350" runat="server" ></iframe>
Now all I want to do is to send the urlID value of javasrcipt as the user_id value in iframe. I have tried by using user_id = ReturnURL() but its not working.
How can I do this?
Thanks in Advance.

I answered something very similar at enter link description here
The answer is that you must set the "src" value on the JS rendering.
This means that somewhere in your javascript you should have the following code
...
document.getElementById("showSkill").src="http://localhost/POSkill/skillshow.aspx?user_id =" + ReturnURL()
...
This should work just fine.