Entitlement - launchdarkly/SupportService GitHub Wiki

Chatbox

This feature flag will toggle a fixed-position chatbox modeleded after the Gchat boxes to appear in the bottom right corner of the screen. Typically this can be positioned as an Entitlements Use Case, such that groups with 'VIP' (or 'Gold Plan,' etc.) will be the only ones enabled for this additional level of support. Created through front-end javascript and can be toggled dynamically.

Try It Out

You can try this out with the following steps.

1. In LaunchDarkly, create a new boolean feature flag called 'chatbox'
2. Under the feature flag targeting rules select "false" as the variation to serve when targeting is turned off.
3. Turn on targeting. In the bottom corner of the page you'll see a chatbox pop-up!
4. Typically I like to add additional targeting for specific entitlements cases like VIP, or Gold (make sure your current user is in the segment!)

How It Works

This is being loaded through the front-end JavaScript SDK. The HTML/CSS needs to exist for the code (in the chat.html partial, and the custom.css file respectively). The outermost div of the chatbox div (with class "chatbox") should be hidden by default, as such:

<div class="chatbox chatbox--tray" style="display:none;" >

The code for the chatbox function exists in the footer.html file. It is initialized on the LDClient 'ready' event, and an event listener that fires the LDclient on 'change' that will trigger a show or a hide of the function depending on the state of the chatbox feature flag.

       // LD Client Rendering
       ldclient.on('ready', function() {
           console.log("It's now safe to request feature flags");
           console.log(ldclient);
           renderButton();
           renderChatbox();
       });
   
       ldclient.on('change', function() {
           console.log('this should change')
           renderButton();
           renderChatbox();
       });