Mirror Click Events

Mirror a click event from one Webflow element to another element. Replicate user clicks on other elements on the page.

Get Started

loads per month

Step #1

Copy the Solution <script> and paste into the <head> of your page

Copy Script

Scroll horizontally to see documentation

Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

TRIGGER

I want this

Button, Text Link, Link Block, or Div Block

to trigger mirror events.

See how it works

Add this attribute

Description

Name

fs-mirrorclick-element

Value

trigger

When clicking on this element, a different element on the page will be clicked.

For example, a div block on the page that should submit a form when clicked, but is not the native form submit button.

how to add mirrorclick trigger attribute

TARGET

I want this

Div Block or any element

to be clicked when the trigger is clicked.

See how it works

Add this attribute

Description

Name

fs-mirrorclick-element

Value

target

This element is the mirrored click. This element will be clicked when the "trigger" is clicked.

For example, a Webflow form submit button.

Option

DELAY

I want the target element to be clicked after waiting for a specific amount of time.

See how it works

Add this attribute

Description

Name

fs-mirrorclick-delay

Value

TIME_IN_MS

When clicking on the "trigger" element, the "target" element will be clicked after waiting the specified time.

Where?

Add to an element with fs-mirrorclick-element"trigger"

I want to have more than one instance of Mirror Click Events on the same page

See how it works

Optional

This element is optional to add

You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
‍
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.

Example of this solution:

Attributes that must have instances

Second instance example

Third instance example

fs-mirrorclick-element = "trigger"

fs-mirrorclick-element = "trigger-2"

fs-mirrorclick-element = "trigger-3"

fs-mirrorclick-element = "target"

fs-mirrorclick-element = "target-2"

fs-mirrorclick-element = "target-3"