URL parameters triggering interactions

[tietoa (Tomas Westerholm)]

How could we have a returning webhook (303 location) call with query parameters trigger an interaction on a page? Wouldn’t it be great if there was a specific ‘Element trigger’ for URL parameters to trigger elements?

Use case: user sends a form on web page > our backend manages the submission > and returns the traffic back to the same page using webhook response 303 with the originating page URL + some added query parameters > to fire up a chosen element interaction on the web page like confirming that the submitted data was successfully received and processed.

We assume that there are no direct API calls or else by Webflow to fire up the element interactions by code?

Webflow’s inbuilt ‘Page Load’ trigger kind of works for now. It will though show up always when page is being entered first time - even if database is not truly updated by that ‘first’ page load yet. On subsequent occasions when user edits the data on page and triggers the form push to database the on page load “Success” popup is relevant notice as we trigger the 303 response only on successful data update.

More elegant option would be to use URL parameters to inform what to “say” on the page to the user.

This topic has been brought up already 2016 and 2017 on these closed discussions:

Ability to activate interactions by url parameter

Thanks Dave, I’ll use that method for now.

Trigger specific interaction via url on page load

Hi there. I had built this page where the text of individual blog pieces could be revealed via an interaction triggered by clicking a button (the elipses …). Is there any way, via a url, that a specific interaction can be triggered on page load, just like www.website.com/#section would take you to a specific section on page load? This would enable the author to send readers a direct link to a specific blog piece. Thanks

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[memetican (Michael Wells)]

@tietoa

Use case: user sends a form on web page > our backend manages the submission > and returns the traffic back to the same page using webhook response 303 with the originating page URL + some added query parameters > to fire up a chosen element interaction on the web page like confirming that the submitted data was successfully received and processed.

You don’t strictly need the redirect.

Typically I’d do this by having my own JS intercept the form submit event, and make the API call directly, that way the process ( success / error / data / messages ) can be immediately processed with no page refresh.

In terms of triggering interactions though you can use either approach.
Use a hidden button with a click trigger to trigger your interaction, and then use script to click the button. If you use the querystring approach, you’d just need an on-load script to check the querystring and act accordingly.

[vicramv_wmd (Vicram V)]

Could you please direct me to a sample of the custom code needed to achieve the ‘hidden button’ technique you’ve described?

[memetican (Michael Wells)]

Not much to it, there are three parts;

• Your interation

• A button, here I’ll give it an id of my-button. Use the button as a trigger for your interaction. You can then mark that button as display: none to hide it.

• JS to click it whenever you want that interaction to fire.

    <script>
        document.getElementById('my-button').click();
    </script>