Dynamic Interaction Trigger Links ❺

Trigger Your Click Interactions with Links

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,

##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

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

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 ID
Now 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 the slug of the collection item

Now, anywhere in your page, you can link to ##slug to trigger that item.

Specific Setup Examples

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 button
To 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 button
In 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 1 month ago