Skip to content
ConfigBee Docs

JavaScript SDK Integration

The ConfigBee JavaScript Client Core is a lightweight library that allows you to integrate feature flags and dynamic configurations into your JavaScript applications without requiring a specific framework.

Installation

You can include the ConfigBee JavaScript SDK in your project using a CDN or by installing via npm/yarn.

CDN Method

Add the following script tag to your HTML file:

<script src="https://unpkg.com/[email protected]/dist/cb-client-core.min.js"></script>

NPM/Yarn Method

Use the following command to install library

Terminal window
npm install configbee-client-core

Then import it in your JavaScript file:

import Configbee from 'configbee-client-core';

Initialization

Initialize the ConfigBee client with your account details:

const cb = Configbee.init({
    accountId: "YOUR_ACCOUNT_ID",
    projectId: "YOUR_PROJECT_ID",
    environmentId: "YOUR_ENVIRONMENT_ID",
    onReady: function() {
        console.log("ConfigBee is ready!");
        // Initialize your app with ConfigBee configurations
        initializeApp();
    },
    onUpdate: function() {
        console.log("ConfigBee configuration updated!");
        // Update your app with new configurations
        updateAppFeatures();
    }
});

Core Features

Feature Flags (Boolean Values)

Feature flags let you enable or disable features without code deployments.

// Check if a specific feature is enabled
const isFeatureEnabled = cb.getFlag('new_feature');
if (isFeatureEnabled) {
    // Show new feature
} else {
    // Show original feature
}


// Get all feature flags
const allFlags = cb.getAllFlags();
console.log(allFlags); // { feature1: true, feature2: false, ... }

Number Configuration

Use number configurations for thresholds, limits, etc.

// Get a specific number configuration
const itemLimit = cb.getNumber('item_limit');
console.log(`User can add up to ${itemLimit} items`);


// Get all number configurations
const allNumbers = cb.getAllNumbers();
console.log(allNumbers); // { item_limit: 10, retry_count: 3, ... }

Text Configuration

Text configurations are useful for messages, labels, etc.

// Get a specific text configuration
const welcomeMessage = cb.getText('welcome_message');
document.getElementById('welcome').textContent = welcomeMessage;


// Get all text configurations
const allTexts = cb.getAllTexts();
console.log(allTexts); // { welcome_message: "Welcome!", error_text: "Error occurred", ... }

JSON Configuration

JSON configurations provide structured data.

// Get a specific JSON configuration
const appConfig = cb.getJson('app_config');
console.log(appConfig.theme); // "dark"


// Get all JSON configurations
const allJsons = cb.getAllJsons();
console.log(allJsons); // { app_config: {...}, user_preferences: {...}, ... }

Advanced Features

User Targeting

Configure feature flags and settings based on user properties.

// Set targeting properties during initialization
const cb = Configbee.init({
    accountId: "YOUR_ACCOUNT_ID",
    projectId: "YOUR_PROJECT_ID",
    environmentId: "YOUR_ENVIRONMENT_ID",
    targetProperties: {
        user_id: "user123",
        country: "US",
        plan: "premium"
    }
});


// Or update targeting properties later
cb.setTargetProperties({
    user_id: "user123",
    country: "US",
    plan: "premium"
});


// Clear all targeting properties
cb.unsetTargetProperties();

Real-time Updates

ConfigBee automatically updates configurations in real-time. Use the onUpdate callback to respond to changes:

const cb = Configbee.init({
    // ... other options
    onUpdate: function() {
        // Re-check features and update UI
        if (cb.getFlag('new_feature')) {
            enableNewFeature();
        } else {
            disableNewFeature();
        }


        // Update other configuration-dependent components
        updateUIComponents();
    }
});

Best Practices

  1. Initialize Early: Initialize ConfigBee as early as possible in your application lifecycle.

  2. Handle Loading State: Provide fallback values while ConfigBee is loading.

  3. Use Meaningful Flag Names: Use descriptive, consistent naming conventions for your flags.

  4. Secure Sensitive Data: Don’t store sensitive data in your configurations.

Example Implementation

Here’s a complete example of ConfigBee integration:

<!DOCTYPE html>
<html>
<head>
    <title>ConfigBee Example</title>
    <script src="https://unpkg.com/[email protected]/dist/cb-client-core.min.js"></script>
</head>
<body>
    <div id="feature-container"></div>


    <script>
        var cb = Configbee.init({
            accountId: "YOUR_ACCOUNT_ID",
            projectId: "YOUR_PROJECT_ID",
            environmentId: "YOUR_ENVIRONMENT_ID",
            onReady: function() {
                updateUI();
            },
            onUpdate: function() {
                updateUI();
            }
        });


        function updateUI() {
            const container = document.getElementById('feature-container');


            if (cb.getFlag('new_feature')) {
                container.innerHTML = '<h1>' + cb.getText('feature_title') + '</h1>';
                container.innerHTML += '<p>This feature is enabled!</p>';
            } else {
                container.innerHTML = '<p>The new feature is not available yet.</p>';
            }
        }
    </script>
</body>
</html>

Resources