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 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 similarly, but targeting the exact pop-up you want. Different offers, different CTA's, additional info, or display a definition when someone clicks a glossary term.

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.


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.


wfu-ix-trigger-type ( optional ) = click | timer

wfu-ix-trigger-ms = 10000

Use Cases

Trigger -> Interaction

You want to click an element, and have an interaction run

This data may be from the CMS

You want an interaction to trigger automatically after N seconds

Getting Started ( NOCODE )

STEP 1 - Add the Library

Install this code in before HEAD, site-wide or on the specific pages you want the script to affect.

<!-- Sygnal Attributes 5 | Interactions --> 
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/nocode/webflow-ix.js"></script> 

Apply the attributes you want. See above.

Last updated