Search code examples
htmldynamicparameter-passingairtablepersonalization

Displaying URL parameter values as text in an element on webpage (Question from a non-programmer)

I don't have any expertise in programming, just from the little I've researched to solve one-off needs. However, the one thing I can't seem to find answers for is populating dynamic content on a page.

I currently build my website with no code programs (Airtable as my back-end). For my work, my clients each receive a link to a webpage that contains a few client-specific variables (name, birthdate, pdf link) - is it possible to pass these parameters through the URL to have them show on the webpage?

I assumed it would function similarly to passing form data to a thank you page URL, is this theory correct? And if so, can anyone help with what I need to do/what html & js codes I need to implement to make this happen?

Thanks in advance (this would make my life a million times easier)!

Solution

  • Yes you can easily parse URL parameters with JS, see simple example bellow:

    https://exampleurl.com/?birthdate=22091977&pdflink=yourlink123.pdf

    <html>
    <body>
        <span id="birthdate"></span>
    </body>
</html>

<script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const birthdate = urlParams.get('birthdate');
    const pdflink = urlParams.get('pdflink');
    document.getElementById("birthdate").innerHTML = birthdate;
</script>