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.
) same thing right now, and would love to know what worked best for you!