I’m stuck trying to get data from a URL to both text fields and href links. Can anyone shed some light on where I am going wrong? I’ve read many other posts on this but am lost.
Source link for URL Params here.
Console Log Results for reference here.
<script>
// create urlParams variable (constant) from URLSearchParams class using current window
const urlParams = new URLSearchParams(window.location.search);
var adobeUrl = 'https://adobeaero.app.link/'
var nwURL = 'https://nowwhere.io/CollectionDetails/'
var nowCertID = xurlParams.get('nowCertURL')
var nowCertURL = nwURL + nowCertID
// set variables (constants) based on results of URLSearchParams
const name = urlParams.get('name')
const sceneMainURL = urlParams.get('sceneMainURL')
const stillURL = urlParams.get('stillURL')
const nowCertURL = urlParams.get('nowCertURL')
// get the button element
// set ID in webflow to be last part of below ex ARscene
var sceneLink = document.getElementById("ARscene");
var stillLink = document.getElementById("ARstill");
var certLink = document.getElementById("cert");
// edit button element property with full URL
sceneLink.href = sceneMainURL;
stillLink.href = stillURL;
certLink.href = nowCertURL;
name.innerHTML = Name;
// log final button link to console
console.log(sceneLink.href);
console.log(stillLink.href);
console.log(certLink.href);
</script>
Depends on specifically what you want to do, but this library extracts querystring params and can apply them to your Webflow elements in 3 ways;
All <a> links are modiied so that the href querystring is replaced with the querystring of the current page request, so that e.g. utm_ params are carried through.
Any <input> elements ( including hidden ones ) tagged with a custom attribute of wfu-query-param=X will have the value of that <input> element replaced with the param value of X.
Any other elements that have this custom attribute will have the inner text replaced, so you can display param values visually.
Amazing, even though this kind of goes over my head I was able to get a text field passed through – thank you!
The text field worked, but I am confused why the same method didn’t work for the stillLink (stillURL). I see that all href links will be replaced with current page … though I anticipated the passed through URL.
Side question, why would anyone want all links to be the current page url? Perhaps this allows each link a way to reference the pass-thru data and select the important parts when clicked?
HREF/Link does not (shows page URL):
Here’s the link that is generated/being passed through:
Links are handled differently. In this very rough version, all links are processed, and the querystring of every link is replaced with the querystring of the current page’s url.
That should be what’s happening for you, are you getting a different result or trying to accomplish something different?
The most common use case I was seeing is where people wanted to pass through all utm_ querystring params to all links, so they’d get carried all the way through to e.g. a FORM POST.
Ah, one important thing I’m seeing is that you have two scripts I think that are modifying your URL querystrings. One is my webflow-url script, and the other is your original one-
<script>
// create urlParams variable (constant) from URLSearchParams class using current window
const urlParams = new URLSearchParams(window.location.search);
var adobeUrl = 'https://adobeaero.app.link/'
var nwURL = 'https://nowwhere.io/CollectionDetails/'
var nowCertID = xurlParams.get('nowCertURL')
var nowCertURL = nwURL + nowCertID
// set variables (constants) based on results of URLSearchParams
const name = urlParams.get('name')
const sceneMainURL = urlParams.get('sceneMainURL')
const stillURL = urlParams.get('stillURL')
const nowCertURL = urlParams.get('nowCertURL')
// get the button element
// set ID in webflow to be last part of below ex ARscene
var sceneLink = document.getElementById("ARscene");
var stillLink = document.getElementById("ARstill");
var certLink = document.getElementById("cert");
// edit button element property with full URL
sceneLink.href = sceneMainURL;
stillLink.href = stillURL;
certLink.href = nowCertURL;
name.innerHTML = Name;
// log final button link to console
console.log(sceneLink.href);
console.log(stillLink.href);
console.log(certLink.href);
</script>
Chances are, the two together will have some weird funky conflicts.
But let me know what result you’re trying to achieve on your final link, and a readonly link to your site designer would help too.
Thanks so much for taking a closer look. I’m starting to make sense of things but am lost in many specifics such as “utm_”.
To clarify, I am referencing an AirTable dataset (see img) and the page loads text (name) into the page and updates links for specific buttons. The goal is a personalized page for each user for a unique experience.
Initially I believe I followed this post (Pass URL Params). There is an example further down the post that I possibly should be following instead.
In my code I have loaded 3 scripts, 2 for text animation, and yours. Maybe I missed the script for my first pass-thru attempts were. I’m not sure which approach is the most suitable.
Does this help be able to point me in the right direction?
Thank you again! Read Only Link Here
I’m looking at your site and your messages above, and I’m not clear on what exactly you’re trying to accomplish, or where you’re running into problems. I’ve got a lot on this month, but a few thoughts that might help;
It will be easiest for you if you figure out which page you’re expecting people to land on, and what querystring params you’re expecting to get. From there, you’ll need to plan out exactly you’re wanting to happen at that point as they interact with your site.
The webflow-url library is updated and has a few new tricks, including querystring merging, so you have more NOCODE options. Have a look at the docs here, and update the version in the querystring to 3.6.
I’m guessing you need some combination of passing your utm-* params to FORM hidden fields, and maybe to other links on the page so they’ll be carried through the site as users navigate. The library supports both, and you can extend it by forking the GIT repo and adding your own features too if you need.
I hope that points you in the right direction!
If you get stuck and need some programming help, let’s turn this into a project- there are a lot of great JS devs here, or you can reach me at mike@sygnal.com
Thanks again for your reply. I agree the purpose of the page is unclear, but if I could successfully get 1 link and 1 text field passed through I can replicate the process and build the rest.
This is a splash page that adds a bit of a personalized story (ex Name) before linking to an AR experience via Adobe Aero app. The user is driven to this page from a physical object RFID tag.
I’ve read the docs and maybe your tool isn’t the right fit as it seems more complicated than my needs. Thanks for the option to turn this into a project. I may reach out if I continue hitting walls.
