# Working with Variables in Variations

Created: 28.11.2023\
Updated: 28.11.2023\
Author: Alexander Sugakov

Any HTML, CSS, or JS code element can be assigned a variable in the Gravity Field platform. Variables play a crucial role in streamlining campaign customization, allowing business users to adjust campaigns without relying on developers. This functionality empowers users to replace text, images, colors, and other design elements directly within the platform's interface. The use of variables facilitates the rapid templating of campaign variations, providing a more dynamic and user-friendly customization experience. For more details about templates, refer to the article [Working with Templates](/lang/en/platform-interface/working-with-templates.md)

## Creating Variables

<figure><img src="/files/HtEh4h7uxj3bzf2xkQht" alt="" width="375"><figcaption></figcaption></figure>

To create a variable, you need to select the desired element, right-click on it, and choose "Add Variable" from the context menu.

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

In a panel opened on the right, you need to provide a name for the variable, configure its type, and set the parameters. The parameters of variables depend on the selected type.

## Variable Types

For all variable types, you can configure the variable's name, type, and a tooltip that will be displayed in the popover when hovering over the variable.

In the Gravity Field platform, the following variable types and additional parameters are available (in addition to the basic ones):

| Variable Type                           | Available Parameters                                 | Campaign Type |
| --------------------------------------- | ---------------------------------------------------- | ------------- |
| Text                                    | Default Value                                        | Front / API   |
| Image                                   | Default Value                                        | Front / API   |
| Dropdown List                           | Values for the list in the format key-value          | Front / API   |
| Color Palette                           | —                                                    | Front / API   |
| Number                                  | Default Value, Maximum and Minimum value constraints | Front / API   |
| Recommendation Strategy                 | Default Value                                        | Front         |
| CSS Selector                            | Default Value                                        | Front         |
| Social Proof Data (Product Performance) | Default Value                                        | Front         |

## Working with Variables

When you hover the mouse cursor over a variable, icons on the right side of the field allow you to delete or reconfigure the variable, and a tooltip appears above the variable's value.

**Text** — a variable that allows you to enter arbitrary text.<br>

<figure><img src="/files/TaNyiQvgTr3BfK6otb3f" alt="" width="375"><figcaption></figcaption></figure>

**Image** — a variable that allows you to upload an image (video) up to 6 megabytes. The following file formats are supported: `tiff, pjp, pjpeg, jfif, tif, gif, svg+xml, bmp, png, jpeg, svgz, jpg, webp, ico, mp4`

**Dropdown List** — a variable that allows you to choose one of the pre-configured values set when creating the variation.

<figure><img src="/files/4kHTIeY4Wq10p0wgbeXf" alt="" width="375"><figcaption></figcaption></figure>

**Color Palette** — a variable that allows you to choose a color from the palette or specify it in HEX or RGB formats. You can also select the color transparency level.

<figure><img src="/files/VbmzPQDjvNC0za7Vw3q8" alt="" width="375"><figcaption></figcaption></figure>

**Number** — a variable that allows you to enter any number. When configuring the variable, you can set the maximum and minimum allowable values.

<figure><img src="/files/tACJVOebrMyu6w9HvjBH" alt="" width="375"><figcaption></figcaption></figure>

**Recommendation Strategy** — a variable that allows you to choose any of the recommendation strategies created in the section.

**CSS Selector** — a variable that allows you to enter an arbitrary CSS selector.

**Social Proof Data (Product Performance)** — a variable that returns Social Proof data for a product. The variable will only return data on the product page. It will provide information on sales or views of the product for the selected period. Available periods: day, two days, week, two weeks, month.

## Grouping Variables

Variables can be grouped for convenience. Variable groups can be collapsed and expanded in the interface. A new variable group is created by clicking the "+ Variables Group" button.

For a group, you can configure the name, color, and also check the variables that will be added to it.

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

Settings for the created group can be managed by clicking on the button with switches that appears when you hover over the group name.

<figure><img src="/files/SdXDcWtm4bhlnMga2wr2" alt="" width="375"><figcaption></figcaption></figure>


---

# 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://developer.gravityfield.ai/lang/en/platform-interface/working-with-variables-in-variations.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.