Bitrix24 Application Development with React: Widgets and SPAs

We develop external web applications in React that are embedded into the Bitrix24 interface via an iframe or opened in a separate tab. Bitrix24 application development with React is our specialty. Over 5 years we have created more than 30 projects: from simple widgets to full-fledged standalone SPAs. A typical problem: standard Bitrix24 lacks SLA control in CRM. Our React application solves this with a widget in the deal card. Applications work through the Bitrix24 REST API, receive user context via the BX24.js SDK, and are placed in various locations: CRM sidebar, lead card, portal header, separate application page. React is the natural choice for such applications: component-based approach, rich ecosystem, TypeScript typing for REST API. We guarantee stable operation on all Bitrix24 versions (cloud and on-premise) and certify solutions according to security standards.

What problems do React applications in Bitrix24 solve?

Standard Bitrix24 does not cover all business scenarios: there is no SLA control in CRM, no flexible interfaces for external ERP, limited real-time notification capabilities. React applications fill these gaps by integrating into the portal interface. Typical pain points:

• Lack of SLA visualization: managers cannot see how long a deal has been stuck at a stage. Our widget with a timeline and color indication solves this.
• Complex integrations: external ERPs require custom UI that cannot be implemented with standard components. A React application with its own backend proxies data and displays it inside Bitrix24.
• Limited reports: built-in reports do not allow building complex dashboards. React + D3.js provides any charts.

Architecture of Bitrix24 applications on React

The application is divided into three layers: React frontend (SPA), custom backend (Laravel / Node.js), and the Bitrix24 REST API. The frontend communicates with the backend, and the backend communicates with Bitrix24 via server tokens or webhooks. This hides keys from the browser and allows caching data.

OAuth authentication workflow

Authorization uses OAuth 2.0. Bitrix24 issues an access_token when the application opens in an iframe (via postMessage or URL parameters). For server requests, authorization via client_id + client_secret + webhook. Typical architecture: React frontend makes requests to its own backend (not directly to Bitrix24), and the backend proxies to the Bitrix24 REST API with the server token. This hides tokens from the browser and allows caching repeated requests. According to the Bitrix24 REST API documentation, it is recommended to use Authorization Code Flow with PKCE for enhanced security.

// React hook for calling Bitrix24 REST via BX24.js (client side) function useBX24Method<T>(method: string, params: object) { return useQuery({ queryKey: ['bx24', method, params], queryFn: () => new Promise<T>((resolve, reject) => { window.BX24.callMethod(method, params, (result: any) => { if (result.error()) reject(result.error()); else resolve(result.data()); }); }), staleTime: 30_000, }); } // Usage const { data: deals } = useBX24Method<Deal[]>('crm.deal.list', { select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'], filter: { ASSIGNED_BY_ID: currentUserId }, order: { DATE_MODIFY: 'DESC' }, }); 

Using the Bitrix24 UI Kit in a React application

Bitrix24 provides the official package @bitrix24/b24jssdk with a set of React components: Button, Input, Select, Table, Modal. They are styled via CSS variables and automatically adapt to the portal theme (light/dark). Using the UI Kit ensures that the application looks like a native part of Bitrix24 — users do not notice the transition.

import { Button, Modal } from '@bitrix24/b24jssdk'; function MyApp() { return ( <> <Button>Open</Button> <Modal show={true}> <p>Modal content</p> </Modal> </> ); } 

Case study: application for SLA control in CRM

From practice: a B2B services company, 45 managers, deals go through 8 stages. Task: a widget in the deal card showing how long the deal has been on the current stage, a flag for SLA violation (if longer than the norm), and a history of stage transitions. Out-of-the-box Bitrix24 does not have SLA control in CRM Deal.

Implementation: Backend — Laravel (separate server). On each deal stage change, a webhook from Bitrix24 (event: ONCRMDEALUPDATE) writes the transition to a deal_stage_history table with timestamps. The React widget is embedded in CRM_DEAL_DETAIL_TAB. When the card is opened, a request to our backend with DEAL_ID returns: current stage, time on stage, SLA norm for that stage, status (normal / violated), and a list of transitions. Visualization: a stage timeline with color indication. Red — SLA violated, yellow — 75% of time used, green — normal.

function SlaWidget({ dealId }: { dealId: number }) { const { data } = useSlaData(dealId); if (!data) return <Spinner />; return ( <div className="sla-widget"> <SlaTimer currentStage={data.currentStage} timeOnStage={data.timeOnStage} slaLimit={data.slaLimit} status={data.status} /> <StageTimeline history={data.stageHistory} /> </div> ); } 

Notifications: when an SLA is violated, the backend sends a notification to the responsible manager and their supervisor via im.notify.system.add REST API.

React widgets load 3 times faster than classic PHP includes due to caching and asynchronous requests on the custom backend. Reduction in SLA monitoring costs — up to 70%. The savings amounted to about 15,000 RUB/month.

Integration via webhooks

Bitrix24 applications can subscribe to events via webhooks: changes to deals, tasks, contacts. This allows building near-real-time updates. For real-time in React — Server-Sent Events (SSE) or polling. WebSocket over Bitrix24 — only via BX24.callMethod('pull.application.event.add') with the Push & Pull module.

Process and timelines

1. Analysis — determine embedding locations, API methods, authorization scheme.
2. Design — application architecture, prototype design.
3. Register the application in Bitrix24, configure OAuth, obtain client_id/client_secret.
4. Backend development — REST proxy, business logic, webhooks.
5. React SPA development — components, state, integration with BX24.js.
6. Testing on a real portal, edge cases of authorization.
7. Deployment — HTTPS, iframe configuration, Marketplace verification.
8. API and deployment documentation.
9. Training portal administrators.
10. Post-launch support (on request).

Timelines: simple embedded widget — 1–2 weeks. Full standalone application with its own backend — 4–12 weeks depending on functionality. We will evaluate your project — contact us to discuss. Get a consultation: our experience guarantees quality and adherence to deadlines. Order application development to discuss your task and get a preliminary estimate.