# Creating an A/B Test

{% embed url="<https://www.youtube.com/watch?v=bMcg8twPZNc>" %}

If you are not using the Webflow App, you can create and manage A/B tests directly from the Optibase dashboard. This manual method gives you full control over how variants are triggered on any website.

***

### 1. Create the Test

1. Navigate to the Tests page in your Optibase dashboard.
2. Click Create Test.
3. Name your test: Use a descriptive name (e.g., `CTA Button Color`).
4. Select Type: Ensure A/B Test is selected by default and click Next.

***

### 2. Connect a Conversion

To measure which version wins, you must link the test to a goal.

1. Search for your existing conversion (e.g., `Get Started Clicked`).
2. Select it and click Next.
   * *If you haven't created a conversion yet, you'll need to set one up first in the Conversions tab.*

***

### 3. Define Your Variants

Now, create the different versions you want to compare.

1. Click Create Variant and give it a name (e.g., `Blue`).
2. Repeat for your other versions (e.g., `Red`).
3. Traffic Split: By default, traffic is split equally. You can adjust this—for example, sending 80% to `Blue` and 20% to `Red` if you want to test a new idea cautiously.

***

### 4. Add Custom Attributes to Your Site

For Optibase to know which elements to swap, you must add two specific HTML attributes to your website's elements.

#### The Required Attributes:

| **Attribute**              | **Value**        | **Description**                                    |
| -------------------------- | ---------------- | -------------------------------------------------- |
| `data-optibase-test-id`    | `your-test-name` | Identifies which test the element belongs to.      |
| `data-optibase-variant-id` | `variant-name`   | Identifies which specific variant this element is. |

#### Implementation Example:

If you are testing a button, your HTML should look like this:

HTML

```
<button data-optibase-test-id="cta-button-color" data-optibase-variant-id="blue">
  Get Started
</button>

<button data-optibase-test-id="cta-button-color" data-optibase-variant-id="red" style="display:none">
  Get Started
</button>
```

> Pro Tip: Only the "Main" variant should be visible on your live site. All other variants should have `style="display:none"` added to them. The Optibase script will automatically reveal the correct one and remove the others when a user lands on the page.

***

### 5. Go Live

1. Go back to the test page in the dashboard.
2. Change the status from Draft to Active.
3. (Optional) Toggle Auto-stop to automatically end the test once a statistically significant winner is found.

***

### Summary of Settings

* Restrictions: You can limit the test to specific locations, screen sizes, or browsers.
* Results: Once the test is active, click the Results tab to see real-time data on which variant is driving more conversions.