Signal Listener

Sits inside the component you want to control and runs an interaction — switch variant, open an overlay — whenever a matching Signal Trigger is clicked.

Last updated

Signal Listener icon

How to use

  1. Place it in the component you want to control. It renders nothing on the live site.

  2. Set Signals to how many different buttons should reach this spot (1–8).

  3. Enter a Signal ID for each slot, matching the ID on the Signal Trigger that should reach it.

  4. Under Interactions, wire each Signal 1Signal 8 to what should happen — Set Variant, Create an event, or Open an overlay.

Why it's a separate component

The Listener is the half that acts. Framer only lets an interaction target a layer it can reach, so the Listener has to sit beside the thing being controlled — while the button can live anywhere. One Listener handles up to eight different signals, so a single placement can respond to several buttons.

Because it's invisible at runtime, use Canvas Hint to keep it findable while you're designing, or hide it to get it out of the way.

Questions? Join our Slack community