---
title: "How do I find the Element ID or Class for a button on my website?"
description: "Use this article to learn how to locate the HTML attributes (like ID or Class) for a button or element when setting up Conversions or Actions in Knotch."
url: https://help.knotch.com/en/articles/114-how-do-i-find-the-element-id-or-class-for-a-button-on-my-website
collection: "Conversions"
updated: 2025-07-22
language: en
---

# How do I find the Element ID or Class for a button on my website?

Use this article to learn how to locate the HTML attributes (like ID or Class) for a button or element when setting up Conversions or Actions in Knotch.

When setting up rules in the Event Builder, you may want to use **Element ID** or **Class** as your matching attribute. These are HTML properties used to identify and style elements on a page.

Follow these steps to locate the **Element ID** or **Class** for a button (or other element):

### **Steps to find the Element ID or Class:**

1.  **Open your webpage** in Google Chrome (or any browser with developer tools).
    
2.  **Right-click** on the button or element you want to track. (or use `Cmd + Option + I` on Mac / `Ctrl + Shift + I` on Windows).
    
3.  Select **“Inspect”** (this opens the browser’s developer tools).
    
4.  In the Elements panel, you’ll see the HTML for the page. The part you clicked will be highlighted.
    
5.  Look for one of the following attributes in the highlighted code:
    
    -   `id="your-element-id"` → This is the **Element ID**.
        
    -   `class="your-class-name"` → This is the **Class** name (note: there can be multiple class names).
        

* * *

### **Example**

```javascript
html

<button id="submit-button" class="cta-button primary">   
Submit 
</button> 
```

-   **Element ID:** `submit-button`
    
-   **Class:** `cta-button`, `primary` (you can use either in your rule)
    
-   If `cta-button` is reused on many pages but `primary` is more unique to the element you're targeting, then `primary` might be the better choice.
    
-   For **maximum precision**, especially if this class appears on multiple pages, combine it with a **Page URL rule** to isolate the button instance on a specific page.
    

* * *

### **Best Practices**

-   Use **Element ID** when available — it’s usually unique.
    
-   Use **Class** when the ID isn’t present or when you want to track a group of elements.
    
-   Use **Element Text** if the button always says something specific (e.g., “Download Now”).
    
-   For **maximum precision**, combine your rule with a **Page URL rule** to isolate the button instance on a specific page.
    

You can now plug this attribute into the **Event Builder** in Knotch when defining your conversion or action rule.

* * *

### If you don’t see an ID—don’t worry!

Many modern sites rely on **class names** rather than unique IDs. This is totally normal.

-   **Classes are safe to use**, but they might be shared across multiple buttons.
    
-   To ensure accuracy, **pair your class with a Page URL condition** in the Event Builder.
    
    -   Example: Match `class="cta-button"` **only** when the Page URL contains `/checkout`.
        

By combining multiple rules (like Class + Page URL), you can track the right interaction precisely.