Configuration Reference

The default chat experience works immediately after installation. Use the options below to customize the widget appearance and behavior.

Hide the Default Launcher

Set icon to "2" to hide the default launcher in the lower-right corner, then trigger chat through your own button.

tip

Replace button with the ID of your own trigger element.

<script>
  // Hide default badge
  if (window.__twt__config) {
    window.__twt__config.icon = '2';
  }
  // Customize the trigger for the visitor chat window
  document.getElementById('button').addEventListener('click', function () {
    if (window.__twt__api && window.__twt__api.open) {
      window.__twt__api.open();
    }
  });
</script>

Listen for Unread Count Changes

Listen for unread count changes through a custom event so you can display a badge on your own launcher.

warning

Place this code after the widget installation script.

<script>
  window.addEventListener('__twt__custom_event', (e) => {
    console.log('Unread message count:', e.detail.unread);
  });
</script>

Change Language Dynamically

Switch the widget language at runtime without reloading the page.

Supported language codes: zh-cn (Simplified Chinese), zh-tw (Traditional Chinese), and en (English).

<script>
  // lang: zh-cn | zh-tw | en
  document.getElementById('button').addEventListener('click', function () {
    if (window.__twt__api && window.__twt__api.setLanguage) {
      window.__twt__api.setLanguage('{lang}');
    }
  });
</script>

Pass Customer Information from Your System

Sync signed-in customer information from your own system into TWT Chat so agents can identify visitors inside the console.

Option 1: Static Assignment on Page Load

Assign customer data through window.__twt__config during page load. These values must be set before the widget script initializes.

<script>
  if (window.__twt__config) {
    // unique customer identifier
    window.__twt__config.sbs = '{sbs}';
    // customer signature
    // sbs_mm rule: md5(md5(sbs + '_' + AppSecret) + '_' + ranstr)
    // MD5 output must be lower-case 32 characters
    // AppSecret is required to generate sbs_mm and must be kept private.
    window.__twt__config.sbs_mm = '{sbs_mm}';
    // random string, recommended 16+ characters
    window.__twt__config.ranstr = '{ranstr}';
    // customer name
    window.__twt__config.name = '{name}';
    // customer nickname
    window.__twt__config.nickname = '{nickname}';
    // customer email
    window.__twt__config.email = '{email}';
    // customer phone
    window.__twt__config.phone = '{phone}';
  }
</script>

Option 2: Dynamic Assignment After Load

Use the login method to inject customer data after the widget has loaded. This is useful when login state becomes available later.

<script>
  if (window.__twt__api && window.__twt__api.login) {
    window.__twt__api.login({ sbs }, { sbs_mm }, { ranstr }, { name }, { nickname }, { email }, { phone });
  }
</script>

sbs_mm Signature Rule

sbs_mm is used to verify customer identity and must be generated on the server side:

sbs_mm = md5( md5(sbs + '_' + AppSecret) + '_' + ranstr )

Step	Action	Example
1	Concatenate sbs + _ + AppSecret	1001_your_app_secret
2	MD5 the result from step 1 in lower-case 32-char format	a1b2c3d4...
3	Concatenate the step 2 hash + _ + ranstr	a1b2c3d4..._random16string
4	MD5 the result from step 3 in lower-case 32-char format	final sbs_mm value

danger

AppSecret is required to generate sbs_mm. Generate it in Developer Settings, calculate the signature on the server, and never expose AppSecret to frontend code.