Event Classes on Framer

How to label specific elements on your Framer website and assign events to them

For information on how to track events by assign a specific event to a particular URL, follow this guide.

To tag specific elements on your website that you'd like to track, follow the guide below.

How to Use Event Classes on Framer

Follow these instructions to tag specific elements on your Framer website so they can be tracked.

In Framer Designer, click on any element

On the right panel, scroll down to Code Overrides section and expand it

In the file field, click the dropdown, select New file, name your override, e.g. PixelFlowClasses, and click Create

It will generate a file. Delete the content it creates and replace it with the following code

import type { ComponentType } from "react";
        export function AddPaymentInfo(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-pymt-001-pf" : props.className = "action-btn-pymt-001-pf";
              return <Component {...props} />;
          };
        }
      
        export function Subscribe(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-sub-002-pf" : props.className = "action-btn-sub-002-pf";
              return <Component {...props} />;
          };
        }
      
        export function Contact(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-cntct-003-pf" : props.className = "action-btn-cntct-003-pf";
              return <Component {...props} />;
          };
        }
      
        export function InitiateCheckout(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-buy-004-pf" : props.className = "action-btn-buy-004-pf";
              return <Component {...props} />;
          };
        }
      
        export function AddToCart(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-cart-005-pf" : props.className = "action-btn-cart-005-pf";
              return <Component {...props} />;
          };
        }
      
        export function AddToWishlist(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-wl-006-pf" : props.className = "action-btn-wl-006-pf";
              return <Component {...props} />;
          };
        }
      
        export function CompleteRegistration(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-reg-007-pf" : props.className = "action-btn-reg-007-pf";
              return <Component {...props} />;
          };
        }
      
        export function CustomizeProduct(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-cstm-008-pf" : props.className = "action-btn-cstm-008-pf";
              return <Component {...props} />;
          };
        }
      
        export function Donate(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-don-009-pf" : props.className = "action-btn-don-009-pf";
              return <Component {...props} />;
          };
        }
      
        export function Lead(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-lead-011-pf" : props.className = "action-btn-lead-011-pf";
              return <Component {...props} />;
          };
        }
      
        export function StartTrial(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-trial-012-pf" : props.className = "action-btn-trial-012-pf";
              return <Component {...props} />;
          };
        }
      
        export function SubmitApplication(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-submit-013-pf" : props.className = "action-btn-submit-013-pf";
              return <Component {...props} />;
          };
        }
      
        export function SearchInput(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-inpt-srch-014-pf" : props.className = "action-inpt-srch-014-pf";
              return <Component {...props} />;
          };
        }
      
        export function SearchButton(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-srch-015-pf" : props.className = "action-btn-srch-015-pf";
              return <Component {...props} />;
          };
        }
      
        export function FindLocationInput(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-inpt-loc-016-pf" : props.className = "action-inpt-loc-016-pf";
              return <Component {...props} />;
          };
        }
      
        export function FindLocationButton(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-loc-017-pf" : props.className = "action-btn-loc-017-pf";
              return <Component {...props} />;
          };
        }
      
        export function Purchase(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-plc-ord-018-pf" : props.className = "action-btn-plc-ord-018-pf";
              return <Component {...props} />;
          };
        }
      
        export function ViewContent(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " action-btn-vc-019-pf" : props.className = "action-btn-vc-019-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseMainContainer(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-chk-itm-ctnr-pf" : props.className = "info-chk-itm-ctnr-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseItemContainer(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-chk-itm-pf" : props.className = "info-chk-itm-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseItemName(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-itm-name-pf" : props.className = "info-itm-name-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseItemPrice(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-itm-prc-pf" : props.className = "info-itm-prc-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseItemQuantity(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-itm-qnty-pf" : props.className = "info-itm-qnty-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseTotalAmount(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-totl-amt-pf" : props.className = "info-totl-amt-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseProductInfoContainer(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-pdct-ctnr-pf" : props.className = "info-pdct-ctnr-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseProductName(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-pdct-name-pf" : props.className = "info-pdct-name-pf";
              return <Component {...props} />;
          };
        }
      
        export function PurchaseProductPrice(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-pdct-price-pf" : props.className = "info-pdct-price-pf";
              return <Component {...props} />;
          };
        }
      
        export function FormContainer(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-frm-cntr-pf" : props.className = "info-frm-cntr-pf";
              return <Component {...props} />;
          };
        }
      
        export function FormValueOrPrice(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-val-pf" : props.className = "info-val-pf";
              return <Component {...props} />;
          };
        }
      
        export function FormNameInput(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-cust-fn-pf" : props.className = "info-cust-fn-pf";
              return <Component {...props} />;
          };
        }
      
        export function FormEmailInput(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-cust-em-pf" : props.className = "info-cust-em-pf";
              return <Component {...props} />;
          };
        }
      
        export function FormPhoneInput(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-cust-ph-pf" : props.className = "info-cust-ph-pf";
              return <Component {...props} />;
          };
        }
      
        export function FormLastNameInput(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-cust-ln-pf" : props.className = "info-cust-ln-pf";
              return <Component {...props} />;
          };
        }
      
        export function FormSearchLocationInput(Component): ComponentType {
          return (props) => {
              props.className ? props.className += " info-srch-ctnr-pf" : props.className = "info-srch-ctnr-pf";
              return <Component {...props} />;
          };
        }

Go back and click on the element you want to track
In the Code Overrides section select your created file, e.g. PixelFlowClasses, in the file field
Use the Event Classes list to find which class corresponds to the event you want to track, e.g. AddPaymentInfo from General events section or info-chk-itm-ctnr-pf from Purchase Events section. Click on the Override field in Framer Designer and select appropriate class from the dropdown, e.g. AddPaymentInfo or infoChkItmCtnrPf
Note: you can reuse the created file for other events. To track Subscribe event on other button click you would like to just click on that button in Framer Designer, select already created file in Code Overrides section and select appropriate class, e.g. Subscribe in Override field
Once done, publish your website again to apply the changes

How to Track Website Elements via Classes

Event Classes on Squarespace

Any other questions? Get in touch