> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tracking counters in the Widget Studio

> Add visits, transaction, and products-in-cart counters as dynamic variables in Widget Studio text elements to display real-time social proof data.

This tutorial explains how to use **tracking counters** (Visits counter, Transaction counter, or Products in Cart counter) directly in the **Widget Studio**. These counters help increase user trust and engagement by displaying real-time activity data inside your widget text.

Be sure to implement [the relevant tracking](./get-started) in your code before using them in your widget.

## Available counters

The Widget Studio provides **three built-in counters** that you can use as **custom variables** in any text element:

* **Visits counter**: shows the number of visits
* **Transaction counter**: shows the number of transactions
* **Products in Cart counter**: shows how many products are in carts

<Note>
  Kameleoon populates these counters **dynamically** and updates them in real time.
</Note>

## How to add a counter to your widget

Follow these steps to insert a social proof counter into your text:

1. Open your widget in **the Widget Studio**.
2. Select the **text element** you want to edit.
3. In the text editor, click the **three dots menu** (three vertical dots) and select **Custom variables**.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/product-targeting-and-social-proofing/tracking-counters-in-widget-studio/text.png)
</Frame>

4. Use the filter and type **`api`**.
5. Choose the counter you want to insert (Visits counter, Transaction counter, or Products in Cart counter):

Kameleoon adds the selected counter directly into your text.

## Counter configuration options

You can customize each counter using the following settings:

### 1. Start counting from

Define the initial value from which the counter starts counting.

### 2. Number format

Choose how to display the number, for example as a full number or in abbreviated format.

### 3. Display threshold

Set a minimum value the counter must reach before it appears:

* **Display if more than *X* views**
* **Display if more than *X* transactions**
* **Display if more than *X* products in cart**

Setting a display threshold lets you hide the counter until it reaches a meaningful number.