Update Button text to include value from record on Detail page

Hi all,

I’d like to dynamically update the Button copy on a Detail page based on a record value of that page. The use case is that visitors will continue their booking on another platform, i.e. the CTA should say ‘Book now on X’ or ‘Book now on Y’ depending on the record.

To accomplish this, I have written the following custom code in a block on the page:

<script>
const wait = setInterval(function() {
  if (typeof $ === "function") {
    clearInterval(wait);

    const element = document.querySelector('#list-details-broker');
    const operator = element.innerText;
    
    // The value of operator is not empty
    if(operator){
        
        // Get all link elements
        var links = document.querySelectorAll('a');
    
        // Iterate over the links
        for (var i = 0; i < links.length; i++) {
          // Get the innerText of the current link
          var innerText = links[i].innerText;
          
          if(innerText == "BOOK NOW"){
         
            // Update the button text 
            links[i].innerText = 'BOOK NOW ON ' + operator.toUpperCase()
          }
        }
    }

   
  }
}, 1000);
</script>

While this works okay-ish, the delay is not ideal and it distorts the button height on Mobile:

Curious if there are easier ways to achieve this, especially as the response from Airtable must already include this value. Ideally I could simply include it as a variable, i.e. {RECORD:operator} within the button text.

I think the thing I would try would be a field in the table whose type is Formula, and whose formula constructs the HTML for the button. You can then map that field to a text field in the list details block, and the HTML will be rendered in the page as whatever button you like, with whatever text you specify.

Nice one. I like the approach; definitely less complexity. Let me give this a try to see if I can make it aesthetically pleasing too.