Installation and Usage of B24JsSDK

If you are developing integrations for Bitrix24 using AI tools (Codex, Claude Code, Cursor), connect to the MCP server so that the assistant can utilize the official REST documentation.

B24JsSDK is the official library for working with the Bitrix24 REST API using JavaScript. Unlike BX24.JS, B24JsSDK offers the following advantages:

Works both on the frontend in the browser and on the backend in Node.js;
Supports authorization via tokens and webhooks;
Formats REST API data into corresponding JavaScript types (numbers, IBAN invoices, dates, etc.);
Utilizes modern language features - async/await, promises, AsyncGenerator;
Automatically generates unique request identifiers, simplifying debugging;
And much more!

Installation

There are several ways to install the SDK:

For generating and server-side rendering applications in Node.js and Nuxt;
For using the UMD version of the SDK in the browser via CDN or from a local server.

Installation in Node.js / Nuxt

Details can be found in the B24JsSDK documentation.

Usage in the Browser

Include the library via CDN by adding the following tag to your HTML file:

<script src="https://unpkg.com/@bitrix24/b24jssdk@latest/dist/umd/index.min.js"></script>

Or download the UMD version from unpkg.com and add it to your project:

<script src="/path/to/umd/index.min.js"></script>

Once included, the library will be accessible via the global variable B24Js. Here’s an example of initialization:

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Bitrix24 Frame Demo</title>
        </head>
        <body>
        <p>See the result in the developer console</p>
        <script src="https://unpkg.com/@bitrix24/b24jssdk@latest/dist/umd/index.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', async () => {
                try
                {
                    let $b24 = await B24Js.initializeB24Frame();
                }
                catch (error)
                {
                    console.error(error);
                }
            });
        </script>
        </body>
        </html>

Usage with Webhooks

For working with local webhooks, use them only in server applications.

Example of server-side usage of the SDK: https://github.com/bitrix24/b24sdk-examples/tree/main/js/05-node-hook

Usage in Frontend Applications

<script src="https://unpkg.com/@bitrix24/b24jssdk@latest/dist/umd/index.min.js"></script>
        <script type="module">
        try
        {
            const $logger = B24Js.LoggerBrowser.build('local-app', true);
            
            const $b24 = await B24Js.initializeB24Frame();
            $b24.setLogger(
                B24Js.LoggerBrowser.build('Core')
            );
            
            $logger.warn('B24Frame.init');
            
            const response = await $b24.callMethod(
                'crm.item.add',
                {
                    entityTypeId: B24Js.EnumCrmEntityTypeId.deal,
                    fields: {
                        title: `New Deal ${B24Js.Text.getUuidRfc4122()}`,
                        typeId: 'SALE',
                        stageId: 'NEW'
                    }
                }
            );
            
            const newDeal = response.getData().result.item;
            
            $logger.info(
                `${B24Js.Text.getDateForLog()} crm.item.add >>`,
                {
                    newId: newDeal.id,
                    createdTime: B24Js.Text.toDateTime(newDeal.createdTime).toFormat('HH:mm:ss'),
                    fields: newDeal
                }
            );
            
            // Open the added deal in the standard slider
            $b24.slider.openPath(
                $b24.slider.getUrl(`/crm/deal/details/${newDeal.id}/`),
                950
            );
        }
        catch( error )
        {
            console.error(error);
        }
        </script>