Rename SMS tab to WhatsApp QR

Overview

The customization updates the HighLevel Conversations UI by replacing the label "SMS" with "WhatsApp QR" in two places:

1. The main channel tab label in the composer.
2. The provider/channel selection popover.

Once installed, every agent on every sub-account opens GHL and immediately understands which channel they're about to write to. Confusion drops, support tickets drop.

Why rename the tab

• New agents joining your team don't accidentally think they're paying Twilio per message.
• Visual clarity for ops teams managing dozens of sub-accounts.
• Cleaner white-label experience when you resell HighLevel to your own clients.
• Removes ambiguity in QA, training videos, and screen recordings.

Installation

In HighLevel, go to:

Settings → Company → Custom JavaScript

Paste the script below into the Custom JavaScript field and click Save. The change takes effect on the next page refresh inside GHL.

The script

<script>
(function() {
  function renameTab() {
    // Selector 1 - Main tab
    const smsTab = document.querySelector('#composer-textarea > div > div.flex.flex-col.flex-1.min-w-0.h-full.rounded-md.border-none > div.flex.flex-row.py-1.items-center.justify-end.rounded-t-lg.\\!h-\\[32px\\].bg-gray-50 > div.flex.gap-6.items-center.w-full > div > span');
    if (smsTab && smsTab.innerText.trim() === 'SMS') {
      smsTab.innerText = 'WhatsApp QR';
    }

    // Selector 2 - Popover
    const smsPopover = document.querySelector('#provider-select-popover > div.hr-popover__content > div > div > div.flex.items-center.justify-between.py-2.px-2.cursor-pointer.transition-colors.duration-150.hover\\:bg-gray-50.bg-blue-50 > div > div');
    if (smsPopover && smsPopover.innerText.trim() === 'SMS') {
      smsPopover.innerText = 'WhatsApp QR';
    }
  }

  // Try immediately
  renameTab();

  // Watch DOM changes
  const observer = new MutationObserver(() => {
    renameTab();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();
</script>

The MutationObserver at the end is what makes the rename persist as HighLevel re-renders the composer when you navigate between contacts. Without it, the label would revert every time the conversation changes.

Validation

After saving the script:

1. Open Conversations in HighLevel.
2. Select any contact with an active thread.
3. Confirm the composer tab now shows WhatsApp QR instead of SMS.
4. Open the provider selection popover and confirm the label there is also WhatsApp QR.
5. Navigate between contacts and reload the page to confirm the change persists.

Notes and limits

• This is a UI-only change. Routing, providers, and deliverability are untouched.
• The script uses specific CSS selectors. If HighLevel updates the Conversations UI, the selectors can break and the rename stops working. The script then simply does nothing, no error visible to agents.
• The MutationObserver is necessary because GHL re-renders components dynamically as the user navigates the conversation list.
• The script runs on every page in HighLevel. The if guards keep it cheap, but if you have other Custom JavaScript already running, place this one last to minimize observer overlap.

Troubleshooting

The label didn't change after saving

Hard-refresh HighLevel (Ctrl+Shift+R on Windows / Cmd+Shift+R on Mac). Custom JavaScript loads on full page reloads, not on in-app SPA navigations.

The label changes back when I switch conversations

The MutationObserver isn't picking up the re-render. Make sure you pasted the full script, including the observer block at the bottom. Without that block, GHL reverts the label every time it repaints the composer.

The label changed in the composer but not in the popover (or vice versa)

HighLevel updated one of the two selectors. Open DevTools (F12), inspect the element that still says "SMS", and adjust the selector in the script to match the current DOM. The two querySelector calls are independent, so updating one doesn't affect the other.