> For the complete documentation index, see [llms.txt](https://alhena.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alhena.gitbook.io/docs/features/embeddable-agents/configuration.md).

# Configuring placements

A **placement** is one configured instance of an embeddable agent: where it appears, what it looks like, and how it answers. You can create several placements for the same agent — for example, one Virtual Try-On tuned for shoes on your shoe pages and another tuned for dresses on your dress pages.

### Navigating to settings

1. Log in to your Alhena AI dashboard.
2. In the sidebar, click **Integrations**.
3. Choose the embeddable agent you want to set up — for example, **Embeddable Virtual Try-On**.
4. Click **Configure settings**.

<figure><img src="/files/9gvRjchHVW2StXZGpkEy" alt="" width="563"><figcaption><p><em>Each embeddable agent has its own entry under Integrations.</em></p></figcaption></figure>

***

### The placement list

The first screen shows every placement you've created for that agent.

* **Drag to reorder.** When a shopper loads a page, the agent shows the **first placement whose conditions match** that page, working from the top down. Drag placements to set their priority.
* **Status.** Each placement is **Enabled** or **Disabled**. Disabled placements never show to shoppers.
* **Appears on.** A short summary of the page conditions for each placement.

Click **Create placement** to add a new one, or **Configure settings** on an existing row to edit it.

<figure><img src="/files/EGG46VLcbyzRvmNwlzDB" alt="" width="563"><figcaption><p><em>Placements for an agent. The first one whose conditions match the page is the one shoppers see.</em></p></figcaption></figure>

{% hint style="info" %}
A placement with **no conditions** acts as the default — it shows wherever you place the snippet and no other placement matches the page. Keep your most specific placements near the top and a catch-all default at the bottom.
{% endhint %}

***

### The placement editor

Each placement opens in an editor with up to three tabs: **Style**, **Setup**, and **Playground**.

#### Style tab

The Style tab controls everything the shopper sees. The left side is the form; the right side is a live **Preview** that updates as you type. Every field is optional — leave one blank and the agent falls back to a sensible default.

**Placement**

* **Show this placement to shoppers** — the enable/disable switch.
* **Name** — an internal label so you can recognise this placement in your list (for example, *"Shoes — collection page"*). Shoppers never see it.
* **When a shopper taps it** — choose **Answer in the panel** or **Open in chat**. (See [Where the answer appears](/docs/features/embeddable-agents.md#where-the-answer-appears).)
* **Opening message** — the message the agent receives when the panel opens. Leave blank to use the agent's default.

**Button**

* **Button label** — the text on the launcher button (for example, *"Try on"*).
* **Launcher icon** — upload a custom icon, or keep the default sparkle.
* **Accent color** — the colour of the button and the panel's accents. Use your brand colour.
* **Corner radius** — how rounded the button and panel are.

**Panel** (the container that opens)

* **Title** and **Subtitle** — the heading and subheading shown at the top of the panel.
* **Background color** and **Show panel border** — match the panel to your page.
* **Width** and **Height** — the panel size on desktop. On mobile the panel is always full-width.

{% hint style="info" %}
Fonts, text colours, and spacing are inherited from your storefront automatically, so the panel blends into your page without extra styling.
{% endhint %}

**Photo step** *(Virtual Try-On and See It In Your Room only)*

* **Photo step heading** and **subtext** — the instructions shown on the upload screen (for example, *"Upload a full-body photo"*).
* **Choose-photo button label** — the button that opens the file picker.
* **Photo disclaimer** — the privacy wording shown next to the upload. Whether a consent step is required follows your **Website Chat** settings.

**Waiting** *(agents that produce a result — everything except the Product Quiz)*

* **Working message** — what the shopper sees while the result is generating (for example, *"Creating your try-on — this can take a minute…"*).

**Result** *(Virtual Try-On and See It In Your Room only)*

* **Try-another button label** — lets the shopper try a different photo after seeing the result.

**Preview states**

The Preview on the right has a row of buttons — **Button**, **Photo step**, **Ready**, **Waiting**, **Result** — that step through exactly what a shopper sees at each stage. The available states depend on the agent (a Product Quiz, for instance, has no photo or result state). Walk them in order to check your copy and colours at every step.

<figure><img src="/files/miNF976GuHKBmMNZY3eY" alt="" width="563"><figcaption><p><em>The Style tab. The Preview on the right updates live and steps through each state.</em></p></figcaption></figure>

#### Setup tab

The Setup tab controls **where** the placement appears and how it's installed.

**Where it appears**

Click **Add condition** to limit this placement to specific pages. Each condition can match by:

* **Page URL** — *contains*, *equals*, *starts with*, or *ends with* a value.
* **Page title** — the same operators, matched against the page's title.

All conditions must match for the placement to show. With no conditions, the placement is the default for that agent (shown wherever the snippet is placed and no higher placement matches).

<figure><img src="/files/e8PqSmRaT7Vtv8qswko6" alt="" width="563"><figcaption><p><em>Conditions decide which pages a placement appears on.</em></p></figcaption></figure>

**Install** and **Auto-insert** — these cover putting the agent on your website and are described in detail on the [Installation](/docs/features/embeddable-agents/installation.md) page.

#### Playground tab

The Playground is a live test bench — run the **real** agent on a page before you publish, without installing anything on your site.

1. Pick a **Language**.
2. Pick a **Product** (for Virtual Try-On, Outfit Builder, See It In Your Room, and Room Designer) or a **Page URL** (for the Product Quiz).
3. Use the panel exactly as a shopper would — upload a photo, generate a try-on, or take the quiz.

Every time you change the language or product, the Playground starts a fresh session, so you can re-test cleanly.

<figure><img src="/files/XTP8FNLWY3sMqjDHmhtA" alt="" width="563"><figcaption><p><em>The Playground runs the real agent so you can test before publishing.</em></p></figcaption></figure>

***

### Saving

Click **Save changes** (or **Create placement** for a new one) to publish. Changes go live within a few minutes. To remove a placement, open it and click **Delete placement**.

Next: [add the agent to your website →](/docs/features/embeddable-agents/installation.md)
