We are big fans of Webflow at Variance and have done a lot of work to get our website sending valuable events that we can use to help sell and grow customers. To help make that process easier, we have documented an easy way to integrate Variance.js, Segment, RudderStack, or any other CDP with Webflow. This allows you to add a simple HTML attribute to any element (`data-event-name`) rather than having to hand code events.
Within that same Custom Code are you'll now want to add an additional snippet to the Footer Code section. This snippet will allow you to capture any click or form events you want. Since Webflow automatically loads jQuery, this utilizes the library. Here is the code, if you are using Segment, simply replace `variance.` with `analytics.` and you'll be good to go.
What does this do? Most simply it looks for the attribute `data-event-name` on any clicked HTML element. If it finds that attribute, it will generate an event. It does a few additional things (like check for reserved traits and makes sure the capitalization is consistent), but the core of it is explained in the next section.
Sometimes it's easiest to use email addresses as User ID for tracking. If you want to do that, simply adapt this part of the snippet to send email as `userId`:
From there, capturing interactions are easy. Simply go into any HTML element you want to track clicks for, go to the Element Settings menu (the little gear on the top right), and add a Custom Attribute with the name `data-event-name` and the value of whatever you want to call the event (we recommend the noun-verb structure).
Once you click the + button it will bring up this simple form with two boxes for the Name and Value:
If you have any additional properties you want to capture, you can do that too by adding a seperate `data-event-properties` attribute. Please note: you must use double quotes (`"`) and not single quotes with your properties.
The capture snippet above should automatically handle any Forms as long as you add a `data-event-name` attribute to the Submit button. This should work exactly the same as any other element.