Pass Airtable data into custom code in detail page

Custom Coding
1

Hi everyone.

I’m working on a contractor directory for my building. It’s basically a list of contractors and a contractor detail page for each.

I’m trying to create a sticky button that is shown on every contractor’s detail page. When clicked, the button should open an external URL (specific to that contractor) in a new tab. I created a field in my Airtable database with a formula that creates the WhatsApp message link (this is how it works, if you’re not familiar).

I’m using this for the sticky button part:

<!DOCTYPE html>
<html>
<head>
<style>
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}

.whatsapp-icon {
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.whatsapp-icon img {
  width: 35px;
  height: 35px;
}
</style>
</head>
<body>

<a href="{{whatsappLink}}" class="whatsapp-button" target="_blank">
  <div class="whatsapp-icon">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/WhatsApp_icon.png/479px-WhatsApp_icon.png" alt="WhatsApp"/>
  </div>
</a>

</body>
</html>

I just don’t know how to pass Airtable’s data into the href, to pull the link I need from Airtable for that specific contractor.

Thanks in advance!

2

Hey,

If the WhatsApp URL is stored in your main users’ table then you might try this code:

<script>
window.addEventListener('block-loaded-yourBlockName', () => {
    if (window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
        let customButtonWhatsappUrl = window['logged_in_user']['your airtable field name with whatsapp link'];
        // You can use 'customButtonWhatsappUrl' within this block
    }
  });
</script>
1 Like
3

Hi acjnas! Thanks a lot for your reply.

Sadly, the WhatsApp URLs are not stored in the main users’ table.

In this case, users are the neighbors in my building and the WhatsApp URLs belong to contractors, who don’t use the platform, and whose information is located in a table called “contractors”.

The button is shown on the detail page for a every contractor.

What can be done then?

4

No problem,

There are also ways to capture values from your list details fields. Check out this thread:

5

Hi @acjnas, I used the Artur’s approach in the thread you shared. Thank you so much. I’m gonna share the code with the community just in case anyone else can find it useful

6

This is how I solved it: Implementation: A "Send WhatsApp Message" sticky button for list-details page