React Project

Guide for installing Bitrix24 JS SDK in React applications.

We are still updating this page. Some data may be missing here — we will complete it shortly.

Add to a Vue project

Install the Bitrix24 JS SDK package

pnpm add @bitrix24/b24jssdk

yarn add @bitrix24/b24jssdk

npm install @bitrix24/b24jssdk

bun add @bitrix24/b24jssdk

Import

Import the library into your project:

import { LoggerFactory } from '@bitrix24/b24jssdk'

Init

To work with Bitrix24 from the application built into the Bitrix24 interface use the B24Frame object.

It is initialized on the client side using initializeB24Frame().

App.tsx

import type { B24Frame, ISODate } from '@bitrix24/b24jssdk';
import type { DateTime } from 'luxon';
import { useEffect, useRef } from 'react';
import { initializeB24Frame, LoggerFactory, EnumCrmEntityTypeId, Text } from '@bitrix24/b24jssdk';

const devMode = typeof import.meta !== 'undefined' && (import.meta.env?.DEV ?? false);
const $logger = LoggerFactory.createForBrowser('MyApp', devMode);

type CompanyResponse = { id: number; title: string; createdTime: ISODate };
type Company = Omit<CompanyResponse, 'createdTime'> & { createdTime: DateTime };

async function loadCompanyList(b24: B24Frame): Promise<Company[]> {
  const result: Company[] = [];

  const response = await b24.actions.v2.call.make<{ items: CompanyResponse[] }>({
    method: 'crm.item.list',
    params: {
      entityTypeId: EnumCrmEntityTypeId.company,
      order: { id: 'DESC' },
      select: ['id', 'title', 'createdTime'],
    },
  });

  if (!response.isSuccess) {
    throw new Error(`API Error: ${response.getErrorMessages().join('; ')}`);
  }

  const responseData = response.getData()!.result as { items: CompanyResponse[] };
  responseData.items.forEach((entity) => {
    result.push({
      id: entity.id,
      title: entity.title,
      createdTime: Text.toDateTime(entity.createdTime),
    });
  });

  return result;
}

function App() {
  const b24Ref = useRef<B24Frame | null>(null);

  useEffect(() => {
    let isMounted = true;

    async function init() {
      try {
        const b24 = await initializeB24Frame();
        if (!isMounted) {
          b24.destroy();
          return;
        }
        b24Ref.current = b24;

        const companies = await loadCompanyList(b24);
        $logger.notice('Companies loaded successfully', { companies });
      } catch (error) {
        $logger.error('Some problems', { error });
      }
    }

    init();

    return () => {
      isMounted = false;
      b24Ref.current?.destroy();
    };
  }, []);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>B24 JS SDK - React Demo</h1>
      <p>See the result in the developer console</p>
      <p style={{ color: '#666', fontSize: '14px' }}>
        Note: This app must be opened inside Bitrix24 as a frame application.
      </p>
    </div>
  );
}

export default App;

Key React-specific considerations:

Use React Hooks: Initialize B24Frame in useEffect with cleanup function
Use Refs: Store B24Frame instance in a ref to persist it between renders
Cleanup: Always call destroy() when component unmounts to prevent memory leaks
Environment: Remember that B24Frame only works within Bitrix24 iframe

The B24Hook object is intended exclusively for use on the server.

A webhook contains a secret access key, which MUST NOT be used in client-side code (browser, mobile app).
For the client side, use B24Frame

To work with Bitrix24 from a standalone server-side application, use the B24Hook object.

import { B24Hook } from '@bitrix24/b24jssdk'

// 1. Get the webhook URL from Bitrix24:
//    - Go to Bitrix24
//    - Settings → Developers → Webhooks
//    - Create a new webhook with the required permissions
//    - Copy the URL in the format: https://your-domain.bitrix24.com/rest/1/your-token/

// 2. Initialize B24Hook
const $b24 = B24Hook.fromWebhookUrl('https://your-domain.bitrix24.com/rest/1/your-token/')

// 3. Use API methods

The B24OAuth object is intended exclusively for use on the server.

A b24OAuth contains a secret access key, which MUST NOT be used in client-side code (browser, mobile app).
For the client side, use B24Frame

To work with Bitrix24 from a standalone server-side application, use the B24OAuth object.

import { B24OAuth } from '@bitrix24/b24jssdk'

// 1. Register an application in Bitrix24:
//    - Go to Bitrix24
//    - Settings → Developers → Applications
//    - Create a new application
//    - Get the Client ID and Client Secret

// 2. Initialize B24OAuth
const $b24 = B24OAuth.fromConfig({
  domain: 'your-domain.bitrix24.com',
  clientId: 'your_client_id',
  clientSecret: 'your_client_secret',
  accessToken: 'current_access_token',
  refreshToken: 'refresh_token'
})

// 3. Use API methods

// B24OAuth automatically refreshes tokens when they expire

Nuxt

Guide for installing Bitrix24 JS SDK in Nuxt applications.

Node.js

Guide for installing Bitrix24 JS SDK in Node.js applications.