---
title: "Choose the Basic or Enhanced Chat Experience (Web)"
slug: "choose-the-basic-or-enhanced-chat-experience-web"
updated: 2026-10-05T13:36:52Z
published: 2026-10-05T13:36:52Z
canonical: "help.gladly.com/choose-the-basic-or-enhanced-chat-experience-web"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.gladly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Choose the Basic or Enhanced Chat Experience (Web)

| **REQUIRED USER ROLE** Administrator and Team Manager | **PERMISSION OVERVIEW** [View permissions by role](https://help.gladly.com/docs/managing-users-and-roles#roles-and-responsibilities) |
| --- | --- |

Gladly Chat can show your Customers one of two experiences: Basic, the [original Chat design](https://help.gladly.com/docs/create-and-configure-chat-original), or Enhanced, the [newer Chat design](https://help.gladly.com/docs/configure-enhanced-and-basic-chat). You choose which one your site shows with a setting called `legacyUI` in your Chat embed code.

With this setting, you can:

- Run an A/B test that shows Basic to some visitors and Enhanced to others.
- Show a different experience on specific pages of your site.
- Preview either experience without changing your Gladly settings.

If you don't add the setting, your site shows whichever experience is selected in Gladly under **Settings → Chat**.

## Before you start

You'll need three things:

| What | Where to find it |
| --- | --- |
| The current Gladly Chat embed code on your site | The code that loads `Gladly.init` or `window.gladlyConfig`. Ask your Gladly contact if you're unsure which version you have. |
| Your Chat app ID | In Gladly, go to **Settings → Chat**. The app ID is the Embed Name there. |
| Someone who can edit your website's code | A web developer, or your site platform's custom code or script area. |

> [!NOTE]
> The default experience still comes from Settings → Chat
> 
> The code in this article only overrides that default on the pages where you add it.

## How it works

You add `configurationOverride.v2.legacyUI` to the options you pass to `Gladly.init`:

| Value | Experience shown |
| --- | --- |
| `true` | Basic |
| `false` | Enhanced |
| Not set | Whatever is selected in Settings → Chat |

## Choose an experience on your site

#### Step 1: Add the chat loader

Place this near the end of your page, before `</body>`. Leave it exactly as it is.

```xml
<script>!function(c,n,r,t){if(!c[r]){var i,d,p=[];d="PROD"!==t&&t?"STAGING"===t?"https://cdn.gladly.qa/gladly/chat-sdk/widget.js":t:"https://cdn.gladly.com/chat-sdk/widget.js",c[r]={init:function(){i=arguments;var e={then:function(t){return p.push({type:"t",next:t}),e},catch:function(t){return p.push({type:"c",next:t}),e}};return e}},c.__onHelpAppHostReady__=function(t){if(delete c.__onHelpAppHostReady__,(c[r]=t).loaderCdn=d,i)for(var e=t.init.apply(t,i),n=0;n<p.length;n++){var a=p[n];e="t"===a.type?e.then(a.next):e.catch(a.next)}},function(){try{var t=n.getElementsByTagName("script")[0],e=n.createElement("script");e.async=!0,e.src=d+"?q="+(new Date).getTime(),t.parentNode.insertBefore(e,t)}catch(t){}}()}}(window,document,'Gladly','PROD')</script>
```

#### Step 2: Start chat and choose the experience

Add this right after the loader. Replace `your-embed-name` with your app ID.

```xml
<script>
  Gladly.init({
    appId: 'your-embed-name',
    configurationOverride: {
      v2: { legacyUI: false }   // false = Enhanced, true = Basic
    }
  });
</script>
```

#### Step 3: Check it

Open your site in a new private or incognito window and confirm that the experience you chose appears. The examples below build on this same code.

### Examples

Examples A through D replace the Step 2 script. Keep the Step 1 loader above them.

Examples E through G are for sites that use `window.gladlyConfig` instead of `Gladly.init`. Place those scripts before the Step 1 loader, and don't add the Step 2 script.

#### A. 50/50 split, remembered per browser

Half of visitors see Basic and half see Enhanced. The choice is saved in the browser, so a returning visitor keeps seeing the same experience.

```xml
<script>
  let gladlyChatLegacyUi = localStorage.getItem('gladlyChatLegacyUi');
  if (gladlyChatLegacyUi === null) {
    gladlyChatLegacyUi = Math.random() < 0.5 ? 'yes' : 'no';   // 0.5 = 50% see Basic
    localStorage.setItem('gladlyChatLegacyUi', gladlyChatLegacyUi);
  }
  Gladly.init({
    appId: 'your-embed-name',
    configurationOverride: { v2: { legacyUI: gladlyChatLegacyUi === 'yes' } }
  }).then(() => {
    console.log('Gladly chat started, Basic experience =', gladlyChatLegacyUi);
  }).catch((e) => {
    console.error('Gladly chat failed to start', e);
  });
</script>
```

#### B. A different percentage

Change `0.5` in Example A to the share of visitors who should see Basic:

| Value | Basic | Enhanced |
| --- | --- | --- |
| `0.5` | 50% | 50% |
| `0.2` | 20% | 80% |
| `0.1` | 10% | 90% |

To change the split for visitors who were already assigned, also rename the storage key (for example, `gladlyChatLegacyUi` to `gladlyChatLegacyUi_v2`) in both places.

#### C. Enhanced only on specific pages

This shows Enhanced on pages whose address starts with `/help` or /`support`, and Basic everywhere else. Change the paths to match your site.

```xml
<script>
  const enhancedPages = ['/help', '/support'];
  const useEnhanced = enhancedPages.some((p) => window.location.pathname.startsWith(p));
  Gladly.init({
    appId: 'your-embed-name',
    configurationOverride: { v2: { legacyUI: !useEnhanced } }
  });
</script>
```

> [!NOTE]
> This matches every page whose address begins with those paths, including addresses like `/help-center`
> 
> To match pages under a path more precisely, see [Example F](/product-docs/docs/choose-the-basic-or-enhanced-chat-experience-web#f-enhanced-on-contactus-and-faq-basic-everywhere-else).

#### D. Preview with a URL parameter

Adding `?chat=basic` to any page address shows Basic. Without it, visitors see Enhanced. This is useful for internal review before launch.

```xml
<script>
  const params = new URLSearchParams(window.location.search);
  Gladly.init({
    appId: 'your-embed-name',
    configurationOverride: { v2: { legacyUI: params.get('chat') === 'basic' } }
  });
</script>
```

For example: `https://www.yoursite.com/?chat=basic`

#### E. Using window.gladlyConfig instead

If your site uses `window.gladlyConfig` rather than `Gladly.init`, add the same setting there:

```xml
<script>
  window.gladlyConfig = {
    appId: 'your-embed-name',
    configurationOverride: { v2: { legacyUI: true } }   // true = Basic
  };
</script>
```

Place this script before the Step 1 loader, and keep your existing `gladlyConfig` settings alongside it.

#### F. Enhanced on /contact-us and /faq, Basic everywhere else

This also covers pages under those paths, such as `/faq/shipping`. For the exact pages only, use `path === p`. Place this script before the Step 1 loader.

```xml
<script>
  const enhancedPages = ['/contact-us', '/faq'];
  const path = window.location.pathname;
  const showEnhanced = enhancedPages.some((p) => path === p || path.startsWith(p + '/'));

  window.gladlyConfig = {
    appId: 'your-embed-name',
    configurationOverride: {
      v2: { legacyUI: !showEnhanced }   // true = Basic (V1), false = Enhanced (V2)
    }
  };
</script>
```

#### G. Saved version, or a 20% Basic / 80% Enhanced split

If the browser already has `gladlyChatUIVersion` saved as `V1` or `V2`, that version is shown. Otherwise, 20% of visitors get Basic (V1) and 80% get Enhanced (V2), and the result is saved. If the browser blocks storage, the visitor still gets a random version, but it isn't saved. Place this script before the Step 1 loader.

```xml
<script>
  let version = null;
  try {
    version = localStorage.getItem('gladlyChatUIVersion');
  } catch (e) {}

  if (version !== 'V1' && version !== 'V2') {
    version = Math.random() < 0.2 ? 'V1' : 'V2';   // 20% V1, 80% V2
    try {
      localStorage.setItem('gladlyChatUIVersion', version);
    } catch (e) {}
  }

  window.gladlyConfig = {
    appId: 'your-embed-name',
    configurationOverride: {
      v2: { legacyUI: version === 'V1' }
    }
  };
</script>
```

### Things to keep in mind

- **The setting is read once, when Chat loads.** Changing it later on the same page has no effect. On single-page apps (sites that change pages without a full reload), the experience chosen on the first page stays for the whole visit. Choose the experience before `Gladly.init` runs.
- **Keep each visitor on one experience.** Save the assignment (as Example A does) so returning visitors don't switch between Basic and Enhanced. Visitors on a new browser or device, or who clear their browser data, may be assigned again.
- **Record the variant in your analytics.** Without it, you can't compare results. For example, with Google Analytics (this snippet uses the variable from Example A):

```javascript
  gtag('event', 'gladly_chat_variant', {
    variant: gladlyChatLegacyUi === 'yes' ? 'basic' : 'enhanced'
  });
```
- **Check your privacy and consent rules.** Example A stores one small value in the visitor's browser (`localStorage`). If your site needs consent before storing data, include it in your consent setup.
- **Use the right environment.** Live sites use `'PROD'` at the end of the loader. `'STAGING'` is only for Gladly test environments, and chat will not load on your live site with it.

## Run a good A/B test

- Pick one main success measure before you start. Examples are chat start rate, conversion rate among chatters, customer satisfaction (CSAT), or the rate of conversations resolved without an Agent.
- Start with a 50/50 split. An even split reaches a clear result fastest.
- Run it for 2 to 4 weeks. That covers weekday and weekend patterns. Avoid launching during a major sale or holiday, which can skew results.
- Compare all visitors in each group, not only those who chatted. This shows the full effect, including whether more people choose to start a chat.
- Change nothing else during the test. Keep chat hours, AI settings, and page design the same for both groups.
- Roll out the winner. Set it as the default in Settings → Chat and remove the test code, or set `legacyUI` to the winning value.

### Test before you go live

Before you launch, check that:

- Chat loads on your live site with `'PROD'` in the loader.
- `appId` matches the Embed Name in Settings → Chat.
- Both experiences appear when you test in private or incognito windows. For a 50/50 split, open several new windows.
- The browser console shows no Gladly errors.
- Your analytics tool receives the variant.

## FAQs

#### How do I see the other experience again while testing?

The choice is saved in your browser. Open a new private or incognito window, or clear this site's data in your browser. Each private window gets a new random assignment, so it may take a few tries.

#### Does this change my settings in Gladly?

No. It only overrides the experience on pages that include the code. Settings → Chat stays as it is.

#### Do Basic and Enhanced work differently for my Agents?

No. Conversations arrive in Gladly the same way. The difference is the experience your Customers see in the Chat widget.

#### Can I switch experiences without a page reload?

No. The setting is read only when Chat loads. See [Things to keep in mind.](/product-docs/docs/choose-the-basic-or-enhanced-chat-experience-web#things-to-keep-in-mind)

#### How do I stop the test?

Remove the `configurationOverride` setting to go back to your Settings → Chat default. You can also set `legacyUI` to one fixed value.

#### Chat doesn't appear at all. What should I check?

Confirm the loader ends with `'PROD'` and that appId is correct. Then check the browser console for errors.