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, and tie it to a button-click trigger
  • Assign the [wfu-ix-id] attribute to that 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.

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="[email protected]/dist/nocode/webflow-ix.js"></script>
Apply the attributes you want. See above.
Last modified 6mo ago