Workaround for Dynamic Redirect for a Webhook Form

HHiram Broemme

As mentioned by @Oleg Isonen on Github I created the workaround for a redirect of a webhook form.

→ So I added an HTML embed inside the webhook form's success box with this code (and changing it to my path).

<script>
  location.href = '/whatever'
</script>

This worked great for a static link/slug/redirect.

Now I wanted to make it dynamic based on the Slug in AirTable (think redirection based on a specific product for example).

In the Webstudio University its documented how to create dynamic links for the filtering of the Airtable data by the slug (which worked perfectly).

https://example.com?filterByFormula={YOUR_COLUMN_NAME}="${system.params.YOUR_DYNAMIC_PATH}"

Now I wanted to do the same (creating a dynamic URL with the slug) and add it into Oleg's workaround code mentioned above (inside of an HTML embed in the success box of the webhook form).

It always says: "Unexpected token".

I guess it doesn't work the same way because the Airtable integration in the Variables panel is based on JSON and the embed on HTML?
I tried every method that came to mind (and from ChatGPT)… still doesn't work.

Does anyone has an idea? Any solution is much appreciated since this is a core part of my next project I am working on right now.

Attachments

22 comments

JJohn Siciliano

You would need to drill down into the json object and get just the value you need.

Let's see what you've tried and I'll provide feedback based on that

HHiram Broemme

Hey John!

Thanks for the fast reply. How can I provide you useful data on that so you can give me feedback?

JJohn Siciliano

A screenshot of the HTML embed where you are attempting this with the expression

HHiram Broemme

I guess it's wrong how I concatenate
I tried multiple versions, this is one of them

Attachment

JJohn Siciliano

The whole thing needs to be in backticks not quotes

JJohn Siciliano

let me see if docs have an example

JJohn Siciliano

basically this https://docs.webstudio.is/university/foundations/expression-editor#schema

backticks and the ${}

HHiram Broemme

That worked John, thanks…

Attachments

HHiram Broemme

Unfortunately it doesn't redirect the form now 😂 😅

JJohn Siciliano

script is not correct 🙂

<script>
your code
</script>

you currently are placing location in the script tag like <script YOUR CODE>should actually be here</script>

HHiram Broemme

🤦‍♂️😅 You are obviously right

Fixed it… it still doesn't redirect the form

Attachment

JJohn Siciliano

looks right. can you screenshot what that looks like in the right sidebar in setting? ie the computed expression

HHiram Broemme

Weird… now it doesn't even work with the static URL

<script> 
  location.href = /go/landing-1a/video
</script>

OOleg Isonen

you don't have regular quotes around path

OOleg Isonen

path is a string

OOleg Isonen

you will see the error in the dev tools console

OOleg Isonen

Plain Text

`<script> 
  location.href = "/go/landing-1a/video"
</script>`

HHiram Broemme

When I use the dynamic link with backticks and the ${} it transforms it from image 1 to image 2 (looks good, but doesn't redirect)

Attachments

HHiram Broemme

What am I missing here for dynamic redirects of the webhook forms?

HHiram Broemme

Oleg, you say the link is with "/slug"? Let me try…

HHiram Broemme

Thanks! That worked!

HHiram Broemme

Already a great start! Now let's get to work and something great

Add a reply

Join the Webstudio community

Workaround for Dynamic Redirect for a Webhook Form