# Connect an A/B Variant

*If you using Webflow then you should follow the guide here:* [Optibase Webflow App](/webflow-app/optibase-webflow-app.md)

*Note: This is relevant for both A/B Tests and Variant Groups.*

Once you have created a Variant inside the Optibase web app, you need to connect it to an actual HTML element inside your website. This way, Optibase knows which HTML element belongs to which Variable/Test.

To connect a Variant to an HTML element, you need to add two custom attributes to the HTML element. One is the `data-optibase-test-id` , and the other is `data-optibase-variant-id`. If any of these are missing, your Test will not work.

You can find the `data-optibase-test-id` under the Test title on the Test Page:

 

<figure><img src="/files/wKXWjjcL8fOmiFHKljNQ" alt=""><figcaption></figcaption></figure>

You can find the `data-optibase-variant-id` in the Variants table under Trigger

<figure><img src="/files/TZVHltmoX0M1MLn6AOUJ" alt=""><figcaption></figcaption></figure>

You can copy them simply by clicking on them.

## Main Variant

When you first create a Variant, it will be marked as "Main". This Variant will be visible by default. This means that if a test is restricted or in Draft, this is the Variant that will be shown.

To connect the Main Variant, you simply need to add the custom attributes to the HTML element inside of your page.

Before:

```
<h1>Original Title</h1>
```

After:

```
<h1
  data-optibase-test-id="title"
  data-optibase-variant-id="original"
>
  Original Title
</h1>
```

## Non-main Variant

After the Main Variant, you should create a new Variant inside of the web app the same way you created the Main one. All Variants created after the Main Variant should be hidden by default.

To connect a non-main variant, you should:

1. Copy of the HTML element connected to the main
2. Add the custom attributes of the newly created Variant to the copied HTML and hide it using the inline style: `style="display:none"`

Before:

```
<h1
  data-optibase-test-id="title"
  data-optibase-variant-id="original"
>
  Original Title
</h1>
```

After:

```
<h1
  data-optibase-test-id="title"
  data-optibase-variant-id="original"
>
  Original Title
</h1>
<h1
  data-optibase-test-id="title"
  data-optibase-variant-id="alternate"
  style="display:none"
>
  Alternate Title
</h1>
```

Notice the different `data-optibase-variant-id` and the inline display style is set to none.

Your variants are now set up. You can set the Test to Active to start running it.

*Note: If you want to stop showing an A/B Variant to the users because it is underperforming, but don't want to delete it because you want to keep the data, you can simply disconnect it.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optibase.io/features/tests/connect-an-a-b-variant.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.