# Create an A/B Variant

*If you using Webflow then you should follow the guide here:* [optibase-webflow-app](https://docs.optibase.io/webflow-app/optibase-webflow-app "mention")

*How to connect an A/B Variant:* [connect-an-a-b-variant](https://docs.optibase.io/features/tests/connect-an-a-b-variant "mention")

A/B Variants are different versions of an element that you want to test on the same page.

They’re used in both A/B Tests and Variant Groups (inside Multivariate Tests).

### How to create an A/B Variant

1. Go to the Tests page<br>

   <figure><img src="https://2665225050-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvnlQY2elcSlIpeLEpEAd%2Fuploads%2FrlSobiAYmrdTea78LB1Z%2FScreenshot%202025-10-13%20at%2021.01.09.png?alt=media&#x26;token=7447fcf6-c324-4555-add7-c2fc0cc149d6" alt=""><figcaption></figcaption></figure>
2. Click on the A/B Test you want to add a variant to<br>

   <figure><img src="https://2665225050-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvnlQY2elcSlIpeLEpEAd%2Fuploads%2FG8c1FpHo4eWNAwDzZCqe%2FScreenshot%202025-10-13%20at%2021.08.50.png?alt=media&#x26;token=102503f1-16ac-4130-b7f4-f3dea1955fd8" alt=""><figcaption></figcaption></figure>
3. On the test page, click the New Variant button
4. Enter a name for your variant<br>

   <figure><img src="https://2665225050-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvnlQY2elcSlIpeLEpEAd%2Fuploads%2Fx9RFl5Xkj2ygMTg5wi6P%2FScreenshot%202025-10-13%20at%2021.09.10.png?alt=media&#x26;token=41524390-b18f-4801-ab3a-16adb470a146" alt=""><figcaption></figcaption></figure>
5. Click Create\ <br>

   <figure><img src="https://2665225050-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvnlQY2elcSlIpeLEpEAd%2Fuploads%2FaAXWFQY6FcipQmrNZrzG%2FScreenshot%202025-10-13%20at%2021.09.20.png?alt=media&#x26;token=96ae8c4b-e278-482f-81e5-b0731a7df3e3" alt=""><figcaption></figcaption></figure>

Once created, the variant will appear in the list under that test.

***

### Connect the variant to your website

You should now connect this Variant to an element on your page. Read about how to do that here: [connect-an-a-b-variant](https://docs.optibase.io/features/tests/connect-an-a-b-variant "mention")

To display the variant on your site, you need to connect it to a specific HTML element.

Each element must be tagged with both:

* data-optibase-test-id
* data-optibase-variant-id

Optibase will automatically:

* Show one variant to each user
* Remove all other variants from the page
* Track which version the user saw

***

### Variant options and actions

Clicking on a variant gives you several management options:

* Rename the variant
* Reset its conversion and page view data
* Delete the variant entirely
* Disconnect the variant (stops showing it to users but keeps the data)

> Use disconnect if the variant is underperforming but you still want to analyze its historical results.

***

### Variant performance metrics

Each variant tracks the following automatically:

* Page Views: How many times the variant was shown to users
* Conversions: How many conversion events were triggered while this variant was active
* Conversion Rate: Shown in parentheses (Conversions / Page Views)
* P2BB: [probability-to-be-best-p2bb](https://docs.optibase.io/features/tests/probability-to-be-best-p2bb "mention")The probability this variant is the top performer based on Bayesian stats

You can filter conversion performance using the “Filter by conversion” dropdown above the results.