Choose the Basic or Enhanced Chat Experience (Web)

Gladly Chat can show your Customers one of two experiences: Basic, the original Chat design, or Enhanced, the newer Chat design. 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:

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:

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.

<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.

<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.

<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:

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.

<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>

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.

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.

<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:

<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.

<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.

<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):

    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