DEMO: Insert custom URL parameters to any text/link/image

Just sharing this little script we created to easily pull any number of custom parameters from the page URL and replace them with placeholder you set in webflow text or custom HTML embed.

The Webflow project is here

The live demo is here (try changing the URL parameters): https://webflow-demos.webflow.io/insert-custom-url-parameters?custom_text_title=Title%20from%20URL!&custom_text_subtitle=Try%20changing%20this%20subtitle%20in%20the%20URL&custom_thref_link=https://google.com&custom_src_image=https://gizzmo.si/uploads/emoji/5.png

Implementation:

  1. Copy this script to your page (or project) custom code, before the tag (2nd custom code field):
<script>
function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = window.location.search.replace('?','');
var parsed_qs = parse_query_string(query_string);

for(key in parsed_qs) {
    if( $( "a[href='[["+key+"]]']" ).length > 0 ) {
        $( "a[href='[["+key+"]]']" ).attr('href', parsed_qs[key]);
    }
    if( $( "img[src='[["+key+"]]']" ).length > 0 ) {
        $( "img[src='[["+key+"]]']" ).attr('src', parsed_qs[key]);
    }
}

$('body *').each(function(index, element) {
    var unstripped = $.trim($(element).text());
    var stripped = unstripped.replace('[[','').replace(']]','');
    if(typeof parsed_qs[stripped] !== "undefined") {
      $(element).html($(element).html().replace(unstripped, parsed_qs[stripped]));
    }
});
</script>
  1. Insert placeholders to your webflow page:
  • For text (use anywhere in the project)t: [[custom_text_anything]]
  • For image/video source (HTML embed): [[custom_src_anything]]
  • For link href (HTML embed): [[custom_href_anything]]
  1. Just insert the parameters to your URL, named the same as placeholders (without [[ and ]]), like on the demo url above.

Important notes:

The script replaces stuff in the DOM after its load, this usually happens quite fast, however in cases of big pages/slow connection/many parameters, there may be a “flash/replacement” visible on load. In this case it would be better to modify the script so it would pull get parameters right on the load and insert them to specified places.

If the URL parameter is empty or missing, nothing is displayed.

Tip: You can use onerror="this.src='backup-image.jpg';" added before src of the image/video to prevent broken images in case URL parameter is not a valid source. Shown in the demo.

4 Likes

This is awesome! Any idea how to format an “iso-8601-date” that’s being passed through?
ie. 2020-05-27T11:00:00-05:00

This is great @cheechee. Exactly what I was looking for.

I was able to get this to work when the placeholder is isolated.

Is there a way to get the placeholder to work surrounded by other text, like:

<p>Your score is: [[score]]</p>

Or even better, within the HTML embed:

<img src="http://foo.com/images/[[score]].png>

I’m redirecting people from a Typeform and wanting to pull a graph image based on their score. Here is a test page that shows the working and not working parameters. Here is the read-only link to the project page.

I think I can get this to work by modifying the parameter that Typeform sends over by sending the whole src link. The ultimate would be to build a dynamic graph like this based on the score.

Any assistance appreciated.

Hi Justin,
I’m late to the party but if you simply wrap the text with a span, it should work fine.

For example, just highlight [[score]] and then hit the “wrap with span” button that pops up.

1 Like

Any idea on how to remove the “undefined” text from showing if no parameters are present? https://georgia-seb-2021.webflow.io/

Were you able to remove the “undefined” text? If so, how?

Hej,
Thanks fo much for posting this. Has helped a lot.
One question that I cannot figure out:
One of my parameters is part of a url, but not the full urls.
e.g. the parameter is ?movie=HarryPotter and the Url will be mywebsite.com/movies/harrypotter.
I can of course display the link with your instructions but i cannot manage to actually link it to the site. Any inputs on how to combine this into an url?
Thanks
Alex

is it possible show the image with url only (not jpg/png format)