Support Badger

Widget Configuration

Add live chat to your website

The Support Badger widget adds live chat to your website or app. Customers can start conversations without leaving your site, and Bramble AI can answer instantly.

Installation

Add the widget to your site in minutes:

Option 1: Script Tag

Add this code before the closing </body> tag: 

<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];
  w[l].push({'sb.start': new Date().getTime(),event:'sb.js'});
  var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s);j.async=true;
  j.src='https://widget.supportbadger.com/widget.js?id='+i;
  f.parentNode.insertBefore(j,f);
  })(window,document,'script','sb','YOUR_WIDGET_ID');
</script>

Option 2: NPM Package

npm install @supportbadger/widget

Then in your app:

import { init } from '@supportbadger/widget';
init('YOUR_WIDGET_ID');

Configuration

Configure the widget in Settings → Widget:

Appearance

Setting Description
Primary Color Widget button and header color
Position Bottom-right or bottom-left
Logo Your company logo in the header
Welcome Message Initial greeting text
Launcher Icon Custom icon or default chat bubble

Behavior

Setting Description
Auto-open Open widget automatically after X seconds
Pre-chat Form Collect email/name before chat starts
Offline Mode Show message when no agents available
Sound Play sound for new messages

Bramble AI Integration

With Bramble AI enabled:

  • Instant AI responses 24/7
  • Knowledge base article suggestions
  • Seamless handoff to human agents
  • No wait times for customers

Identifying Users

Pass logged-in user data to personalize the experience: 

SupportBadger.identify({
  email: 'user@example.com',
  name: 'Jane Smith',
  userId: 'usr_123',
  company: 'Acme Inc',
  plan: 'Pro',
  customFields: {
    signupDate: '2024-01-15'
  }
});

This data syncs with the contact record in Support Badger.

Widget API

Control the widget programmatically:

Method Description
SupportBadger.open() Open the widget
SupportBadger.close() Close the widget
SupportBadger.toggle() Toggle open/closed
SupportBadger.hide() Hide the launcher
SupportBadger.show() Show the launcher
SupportBadger.newConversation() Start a new chat

Events

Listen for widget events: 

SupportBadger.on('open', function() {
  console.log('Widget opened');
});

SupportBadger.on('message', function(message) {
  console.log('New message:', message);
});

SupportBadger.on('conversation:started', function(conversation) {
  console.log('New conversation:', conversation.id);
});

Pre-Chat Form

Collect information before the chat starts:

  • Name (required/optional)
  • Email (required/optional)
  • Custom fields (department, priority, etc.)

Pre-chat forms are skipped for identified users.

Mobile Apps

Native SDKs available for:

  • iOS (Swift, Objective-C)
  • Android (Kotlin, Java)
  • React Native
  • Flutter

Contact support for SDK documentation.

Troubleshooting

Widget Not Showing

  • Check script is added correctly
  • Verify widget ID is correct
  • Check browser console for errors
  • Ensure widget is enabled in settings

Styling Issues

  • Widget uses Shadow DOM to avoid CSS conflicts
  • Custom CSS not supported (by design)
  • Contact support for advanced customization