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 ID

• Now on any link or button anywhere in your page, you can assign a [wfu-ix-trigger] attribute to that element

• 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.

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.

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

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.