Dynamic Interaction Trigger Links ❺
Trigger Your Click Interactions with Links
Webflow's interactions are powerful, but they are not easily script-accessible.
Our goal is to make them even more useful by making them easier to trigger specific interactions from dynamic content such as rich-text links throughout your page.
Use Cases
Perhaps the most common use case for this is triggering Interaction-based modal pop-ups;
Trigger a CTA pop-up from text-links easily, even within CMS rich text content like a blog post.
Trigger CMS-based pop-ups, targeting the exact pop-up you want. Different offers, different CTA's, additional info, or display a definition when someone clicks a glossary term.
Although we primarily use this as an interaction trigger, you can think of this more as a 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.
Special Note
Once you've setup your interactions and click-triggers as described below, you can trigger your named interactions in one of two ways-
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.
Or as a shortcut, we have 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,
##cta1
can launch your CTA #1 pop-up##enroll
can launch a pop-up form for enrollment##llm
,##ai
, and##chatgpt
can all be connected to CMS-driven pop-ups to drive a glossary of terms##p0543
can 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
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 elementOr, 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.
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 theslug
of the collection item
Now, anywhere in your page, you can link to ##slug
to trigger that item.
Use Cases
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-id
custom attribute to that buttonTo the triggering element, add the
wfu-ix-trigger
attribute
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-id
custom 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.
You want an interaction to trigger automatically after N seconds
FUTURE.
Getting Started ( NOCODE )
There are currently no configuration options for the data-binding feature, so we’ll use a no-code integration approach.
STEP 1 - Add the Library
First, add the library as detailed in Quick Start.
STEP 2 - Setup your data-binding attributes
Apply the attributes you want. See above.
Last updated