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

npm

npm install configbee-client-core

yarn

yarn add 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();

Note

Target properties are maintained between multiple page loads until the next call of init with targetProperties, setTargetProperties, or 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();
    }
});

API Reference

Client Initialization

Configbee.init(options)

Initializes the ConfigBee client with your account details.

Parameters:

• accountId (string): Your ConfigBee account ID
• projectId (string): Your ConfigBee project ID
• environmentId (string): Your ConfigBee environment ID
• onReady (function, optional): Callback fired when configuration is first loaded
• onUpdate (function, optional): Callback fired on every subsequent configuration update
• targetProperties (object, optional): Initial targeting properties

Returns: ConfigBee client instance

Configuration Methods

Method	Returns	Description
getFlag(key)	boolean or undefined	Retrieves a boolean feature flag value
getNumber(key)	number or undefined	Retrieves a numeric configuration value
getText(key)	string or undefined	Retrieves a text configuration value
getJson(key)	object or undefined	Retrieves a JSON configuration value

Bulk Retrieval Methods

Method	Returns	Description
getAllFlags()	object or undefined	Retrieves all feature flags
getAllNumbers()	object or undefined	Retrieves all numeric configurations
getAllTexts()	object or undefined	Retrieves all text configurations
getAllJsons()	object or undefined	Retrieves all JSON configurations

Targeting Methods

Method	Description
setTargetProperties(props)	Sets or updates targeting properties
unsetTargetProperties()	Clears all targeting properties

Status Properties

Property	Type	Description
status	string	Current client status: "INITIALIZING", "ACTIVE", "DEACTIVE", or "ERROR"
sessionStatus	string	Current targeting/session status: "INITIALIZING", "ACTIVE", "DEACTIVE", or "ERROR"
targetingStatus	string	Alias for sessionStatus

Loading Methods

Method	Description
waitToLoad({timeout})	Returns a promise that resolves when the client becomes active. Default timeout: 60000ms
waitToLoadTargeting({timeout})	Returns a promise that resolves when targeting data is loaded. Default timeout: 60000ms

Configuration Types

Type	Method	JavaScript Type	Use Case
FLAG	getFlag()	boolean	Feature toggles, A/B testing
TEXT	getText()	string	UI labels, API endpoints, messages
NUMBER	getNumber()	number	Timeouts, limits, thresholds
JSON	getJson()	object	Complex structured configurations

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

• GitHub Repository
• ConfigBee Platform
• ConfigBee Website