Dynamic URL for normal button

Ask the community
1

Hi there,

I’m wondering if it’s possible to have dynamic URL for a button. Currently I made some workarounds with the List block or with a form and webhook with MADE.

But I’m wondering if there is an easier solution? Simply put, I just need a button and when you click it, it opens a dynamic URL based on the user (the custom URL is already created in airtable).

Is this possible?

Thanks!! :slight_smile:

2

Yes,

but only if you use an action button (open url) in a list details block. That way it can point towards the URL in the airtable record. Would this work?

3

Yes, that’s what I’m currently doing. But it doesn’t look good. You can’t center it etc.

What I’m looking for is a simple button (like the CTA buttons), but with a dynamic URL.

4

aayyyy theres no tokens yet for those. Se Passing URL Parameters Through a Softr Form - #12 by dramirez

5

Yes, you can do exactly what you asked for with either a static block or a custom code-centered button.

You’ll need to populate the URL data from the active record or the user’s session, and then replace the “#” URL in your button with the dynamic URL using a touch of JavaScript.

If the destination URL is not at the user’s session level (user’s table) but at the record level, make sure to add a block that displays this destination URL, and then keep it hidden from your users. Internally, you can use JavaScript to map that data to your custom button URL.

6

Using a custom button might be the best solution to have a full control over design

Here is the full code to be inserted in a custom code block:

<button id="myButton">Go to Details Page</button>

<style>
  #myButton {
    width: 160px;
    height: 40px;
    background-color: #23406F;
    border-radius: 10px;
    padding: 10px 10px;
    margin: auto;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    font-weight: bold;
    color: #f8f8f8;
    text-align: center;
    float: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #myButton:hover {
    background-color: #FFFFFF;
    color: #23406F;
  }
</style>

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    if (window['logged_in_user'] && window['logged_in_user']['Field to point']) {
      window.location.href = window['logged_in_user']['Field to point'];
    } else {
      console.error('Formula project URL is not available.');
    }
  });
</script>

You need to replace Field to point (appearing twice) by the exact field name in the users table (case sensitive)