Is it possible to create personalised pages with data taken from an appended URL?

Site URL: https://www.little-loves.co.uk/

Hello!

Wondering if someone can help me with a quick question... Not even sure if this is possible, but here goes...

I'm building a Booking Confirmation page (/booking-confirmation) and the user gets directed here after they have completed by form on page (/booking-form).

The booking form is made using Paperform which handles the redirect, when redirecting it can also append the URL to include data from the form submission. So for instance, if the user's name is Sam then the form can redirect like this: /booking-confirmation?FirstName=Sam

Is there a way to have the Booking confirmation page 'read' any of that data in the URL and display it on the page? So for instance, if we want the text on the confirmation page to say "Thanks for your Booking [First Name]" is there a way to make that happen?

I'm imagining this would involve setting up some kind of tag / dynamic text. Is it even possible?

Thanks in advance!
Sam

On your booking confirmation page, add the following JS code below.

STEPS

1. Add a text block with generic confirmation text. Make sure not to include any other text because our JS code will override it.
2. Find and add the block id for the text block and add it to the BLOCK_ID variable in the JS code below. For information on how to find the block id value, see this article. Make sure to include the "block-" portion.
3. To target a child element in the block, update the BLOCK_ID_SELECTOR. The code below looks for an <h3> inside of the block to override. If it doesn't find it, then it'll replace the entire content of the block.
4. The CONFIRMATION_TEXT variable will be what replaces the content in the text block you created. Feel free to update that. Make sure the text remains in between the quotes.
5. The PARAMETER_NAME variable is the name of the query parameter that gets added to the URL

Once the steps above are complete, the code will append the PARAMETER_NAME value to the end of the CONFIRMATION_TEXT. 

(function(){
  // Place the id of the text block between the quotes of BLOCK_ID. Should be "block-****".
  // For information on how to get the text block id, see article below,
  // https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one
  var BLOCK_ID = '';
  var BLOCK_ID_SELECTOR = 'h3';
  var CONFIRMATION_TEXT = 'Thanks for your Booking, ';
  var PARAMETER_NAME = 'FirstName';
  
  
  /**************************************************************************
   * DO NOT EDIT ANYTHING BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   **************************************************************************/
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    BLOCK_ID = BLOCK_ID.replace('#', '');
    var parameterValue = getParameterByName(PARAMETER_NAME);
    var block = document.querySelector('#' + BLOCK_ID);
    var blockSelector = block.querySelector(BLOCK_ID_SELECTOR);
    var element = blockSelector || block;
    if(element && parameterValue){
      element.textContent = CONFIRMATION_TEXT + ' ' + parameterValue;
    }
  }

  function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

})()

Hi, 

Thanks so much for coming back to me.

To confirm, should this code be going in to Page Settings > Advanced > PAGE HEADER CODE INJECTION?

Thanks in advance,

Sam

18 minutes ago, sambradley said:

Hi, 

 

Thanks so much for coming back to me.

 

To confirm, should this code be going in to Page Settings > Advanced > PAGE HEADER CODE INJECTION?

 

Thanks in advance,

Sam

Correct. I personally would put it in the footer area and make sure the code is surrounded by <script> tags.

e.g.

<script>
  // Add JS Code Here
</script>

Thanks for the fast response.

So just to confirm, I'm working on this page: https://www.little-loves.co.uk/thanksforyourrequest

The block ID for the text we're replacing is #block-c6d10541e56caccb299c (though I've inserted this as 'c6d10541e56caccb299c' is that right)?

And so the code I'm injecting is as follows:

<script>

(function(){
  // Place the id of the text block between the quotes of TEXT_BLOCK_ID.
  // For information on how to get the text block id, see article below,
  // https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one
  var TEXT_BLOCK_ID = 'c6d10541e56caccb299c';
  var CONFIRMATION_TEXT = 'Thanks for your Booking';
  var PARAMETER_NAME = 'FirstName';


  
  /**************************************************************************
   * DO NOT EDIT ANYTHING BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   **************************************************************************/
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    TEXT_BLOCK_ID = TEXT_BLOCK_ID.replace('#', '');
    var parameterValue = getParameterByName(PARAMETER_NAME);
    var textBlock = document.querySelector('#' + TEXT_BLOCK_ID);
    if(textBlock && parameterValue){
      textBlock.textContent = CONFIRMATION_TEXT + ' ' + parameterValue;
    }
  }

  function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

})()
  
</script>

To confirm, it doesn't seem to be working just yet. I imagine there's probably something I've missed? Sorry!!

@sambradley I updated my code and description above. It looks like all you're missing is the "block-" portion of the block id. So in your case, the value should be block-c6d10541e56caccb299c.  I also added a 4th variable called BLOCK_ID_SELECTOR to target child elements in the block and I set it to target the <h3> in the block on the /thanksforyourrequest page you created. 

@jpeter thanks for this script. its awesome.

i'm curious, how would you edit that to allow for the ability to pass multiple url parameters to a page that edit different blocks?

Hey @andypage

You could use the modified code below. It contains a BLOCKS_TO_UPDATE variable that is an array of objects whose property names are similar to the original code I created. The example code below contains 2 objects that will update the block based on the FirstName and Email query parameters in the URL. 

JavaScript

(function(){
  // The BLOCKS_TO_UPDATE variable is an array of objects with properties that will be used to replace content.
  // Place the id of the text block between the quotes of blockId property. Should be "block-****".
  // For information on how to get the text block id, see article below,
  // https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one

  var BLOCKS_TO_UPDATE = [
    { 
      blockId: "block-10987654321", 
      blockIdSelector: "h3", 
      text: "Thanks for your Booking, ", 
      parameterName: "FirstName"
    },
    { 
      blockId: "block-1234567890", 
      blockIdSelector: "p", 
      text: "Your email is: ", 
      parameterName: "Email"
    },
    { 
      blockId: "block-987654321", 
      blockIdSelector: "a", 
      url: 'https://google.com',
      text: "Click here: ", 
      parameterName: "url"
    },
  ];
  
  /**************************************************************************
   * DO NOT EDIT ANYTHING BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   **************************************************************************/
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    BLOCKS_TO_UPDATE.forEach(item => {
      item.blockId.replace('#', '');
      var parameterValue = getParameterByName(item.parameterName);
      var block = document.querySelector('#' + item.blockId);
      var blockSelector = block && block.querySelector(item.blockIdSelector);
      var element = blockSelector || block;
      if(element && parameterValue){

        if(element.nodeName == 'A' && item.url) {
          element.setAttribute('href', item.url)
        }

        element.textContent = item.text + ' ' + parameterValue;
      }
    });
  }

  function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
})()

@jpeter you're incredible - thank you!

@jpeter okay diving deeper into this. Let's say i wanted to dynamically set elements for a button (both the button text and the href)

I'm thinking i would have to do this

     blockId: "block-yui_3_17_2_1_1669044754565_76599", 
      blockIdSelector: "a", 
      link: "google.com", 
      parameterName: "button_link"
    },
      { 
      blockId: "block-yui_3_17_2_1_1669044754565_76599", 
      blockIdSelector: "a", 
      text: "",
      parameterName: "button_text"
    },

and then something link this

 

function init(){
    BLOCKS_TO_UPDATE.forEach(item => {
      item.blockId.replace('#', '');
      var parameterValue = getParameterByName(item.parameterName);
      var block = document.querySelector('#' + item.blockId);
      var blockSelector = block && block.querySelector(item.blockIdSelector);
      var element = blockSelector || block;
      if(element && parameterValue){
        element.textContent = item.text + ' ' + parameterValue;
        element.linkContent = item.link + ' ' + parameterValue;
      }
    });
  }

But for some reason I'm not able to get that to work

On 11/21/2022 at 8:42 AM, andypage said:

But for some reason I'm not able to get that to work

Did you ever get this to work??

I am looking to do the exact same thing.  Please help if you got it!

@andypage and @AustinC I updated the code in this comment to support modifying an <a> by specifying a url property that will be used for the <a> tag. 

incredible - appreciate you @jpeter!

Hey, is this still working on 7.1? I just cannot seem to get it working. 

• Added the code in <script></script> tags under the advanced section for the page itself, not site-wide.
• I got the block-id's correctly from inspecting the page. 
• I have added some text to the block for it to load, but nothing is replaced? 

Are their variables that I need to add to the page? Or is the script (from my understanding) replacing current text in format <h3> etc... ?

I am redirecting users from Typeform, with their names, email, and order details in the URL, and just want them to have a personalised order confirmation screen. 

For anyone who wants to do this, I got it to work on 7.0 and 7.1. You can pass any number of URL parameters, and the script allows you to push them into a code block:

The URL I used for this: https://website.com/ordered?firstname=Jack&order=2545346&email=jack@email.com

1. Log in to your Squarespace account and navigate to the page where you want to display the URL parameters as payload.
2. Click on the page's settings icon and select "Advanced" from the menu.
3. Click on "Code Injection" in the Advanced menu.
4. In the "Header" section of the Code Injection panel, paste the following code:

<script>
window.onload = function() {
  const urlParams = new URLSearchParams(window.location.search);
  const firstName = urlParams.get('firstname');
  const order = urlParams.get('order');
  const email = urlParams.get('email');
  const payloadString = `Thank you, ${firstName}<br/> Here is yout order number: ${order}<br/> And lastly, we will send order updates to the following email address on file: ${email}`;
  document.getElementById('url-payload').innerHTML = payloadString;
}
</script>

Then on the page, you want to display the payload:

1. In the page editor, add a "Text" block where you want to display the URL payload.

2. In the text block, add the following code:

<h1>Your order has been submitted</h1>
<p id="url-payload"></p>

You can add/change the number of parameters by adding and removing  "const parameter = urlParams.get('parameter');" within the Java Script above, and then add it to your payload under PayloadString: by adding ${parameter}. 

Thanks to everyone that put me on the right path!