Link Triggers 🧪
Trigger Your Click Interactions with a Link click
Webflow's interactions are powerful, but they are not easily triggered from JavaScript.
This library is designed to make interactions easier to trigger and easier to associate with specific CMS items, to open up a range of use cases.
Use Cases
Interactions-based CMS-driven pop-ups triggered;
from within within a slider or other overflow: hidden container, where the modal would be cut off if it were placed inside of the slider with the trigger button.
from a script-generated map pin
from simple user-generated links within a blog or article text
from script-generated text links such as automatically tagged glossary terms with a definition pop-up
Other complex CMS-based modal + trigger setups
Although we primarily use this as an interaction trigger, you can think of this more as a CMS-friendly proxy-click capability. This means that you can similarly trigger a tab change, a form submission, a slider advance, or anything else that can be clicked.
How Does it Work?
The basic idea is a very simple proxy-click.
You build your normal interactions setup, such as a set of CMS-driven modals ( rightmost collection list here )
You setup a hidden trigger button for each modal, that targets the interaction relative relative to the button, e.g. parent-only or sibling-only. This ensures you only display the desired popup.
That trigger button is then tagged with some custom attributes so that the SA5 scripts can identify it easily.
You generate a second collection list ( shown leftmost here ), which generates the buttons you want users to see. These proxy buttons are also tagged with attributes to match them up to the hidden buttons you want to trigger.
This can be used with Finsweet CMS Slider to generate slides
They can be rendered as map pins
Or any other setup you want
SA5's Trigger lib identifies both the trigger buttons and the proxy buttons, and establishes click handlers. Any click on the proxy button will issue a JavaScript click on the interactions trigger button, which will trigger whatever interaction you've setup- popup, animation, etc.
Proxy Trigger Setups
Once you've setup your interactions and click-triggers as described below, you can trigger your named interactions in one of two ways-
Attribute-Based Trigger
You can assign a custom attribute to the button or element you want to use as a trigger, with a value identifying the specific interaction you want to fire.
Link-Based Trigger
Or in a link element, we support a special link format.
##my-interaction-id
Link anything and set the URL to a double-hash ## link with the name of the interaction you want to trigger.
For example,
##cta1can launch your CTA #1 pop-up##enrollcan launch a pop-up form for enrollment##llm,##ai, and##chatgptcan all be connected to CMS-driven pop-ups to drive a glossary of terms##p0543can display a modal with product or product-category information from your ECommerce store
Because these are set as the link URLs, the test displayed to the user can be anything you like.
Usage Notes
STEP 1 - Add the Library
STEP 2 - Setup your data-binding attributes ( Basic Setup )
Create your interaction to do whatever you want
Create a button element, and set it to trigger your interaction on click
Assign the
[wfu-ix-id]attribute to that button element, and give it a unique IDNow on any link or button anywhere in your page, you can assign a
[wfu-ix-trigger]attribute to that element. Give it that same ID to proxy-trigger your interaction.Or, in any link on your page, assign a URL with
##with the ID you've assigned to the interaction you want
Now, clicking any of those links will trigger your interactions.
OR/ STEP 2 - Setup your data-binding attributes ( Advanced Setup )
When you are want CMS-sourced modals such as product pop-ups or glossary pop-ups, here are some tips;
Design your modal first
Place it inside of your CMS Collection List
Place your triggering button as an immediate sibling of your modal's parent element
In your interaction, trigger the modal by class, targeted to sibling elements only. That will give much more reliable results
Assign your
[wfu-ix-id]custom attribute to that button, and set the value using Webflow's CMS data-binding feature, to theslugof the collection item
Now, anywhere in your page, you can link to ##slug to trigger that item.
Specific Setup Examples
You want to click an element, and have a popup appear
Create your interaction-based popup so that it is triggered by a button. The button can be hidden, but it is needed to invoke the interaction.
Add the
wfu-ix-idcustom attribute to that buttonTo the triggering element, add the
wfu-ix-triggerattribute
You want to click a text link, like a dictionary definition, product, or a staff member's name, and have a link-specific pop-up appear
Create your interaction-based popup so that it is triggered by a button. The button can be hidden, but it is needed to invoke the interaction.
Add the
wfu-ix-idcustom attribute to that buttonIn your text, create any link you want, and set the link href so that it begins with
##and then the ID you've assigned to the your modal button
You can generate the modals and their triggering buttons from the CMS, and use the slug as the ID. This makes it easy for you to invoke CMS-generated popups.
Future
You want an interaction to trigger automatically after N seconds
FUTURE.
Last updated
Was this helpful?
