Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


sambradley

Question

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

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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, ' '));
}

})()

 

Edited by jpeter
Added new BLOCK_ID_SELECTOR to support targeting child elements.
Link to post
  • 0

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

Link to post
  • 0
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>

 

Link to post
  • 0

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!!

Link to post
  • 0

@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. 

Edited by jpeter
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...