Customization of Bitrix24 Mobile App

Customization of Bitrix24 Mobile App

Imagine fifty agents in the field, each opening CRM on their phone—and seeing twenty tabs, when only three are really needed. Switching between them takes up to thirty seconds per action, and over a day that adds up to an hour of downtime. We solve this by customizing the Bitrix24 mobile app in two ways: widgets (embedded UI elements, loading in 200 ms) and web applications via JavaScript SDK (full screens in 2–3 seconds). The choice depends on the scenario: for quick actions (call, status change) — widgets, for complex forms (order processing) — web apps. Savings after deployment can be substantial for a team of 50 employees.

What customization methods are available?

Web applications via JavaScript SDK. The platform provides the BX24.js SDK for embedded apps. In the mobile context, the app opens in a WebView inside the system. The SDK allows reading and writing CRM data through the REST API, opening standard screens, getting user data, and calling methods like crm.deal.list, crm.contact.get, tasks.task.list. Example API call from a mobile app:

BX24.callMethod('crm.deal.list', {
    filter: { ASSIGNED_BY_ID: BX24.getAuth().user_id },
    select: ['ID', 'TITLE', 'STAGE_ID', 'UF_CRM_CUSTOM_FIELD'],
}, function(result) {
    if (result.error()) {
        console.error(result.error());
    } else {
        renderDeals(result.data());
    }
});

Web applications are placed in the marketplace or installed locally (on-premise version). Technically, they are HTML/CSS/JS hosted on your server and registered in the "Settings → Applications" section.

Widgets in CRM. Widgets are the most popular customization type. They run 3 times faster than full web apps because they don't require a complete reload. Widget placement:

Widgets are registered via placement.bind:

BX24.callMethod('placement.bind', {
    PLACEMENT: 'CRM_DEAL_DETAIL_TAB',
    HANDLER: 'https://your-app.ru/widgets/deal-tab',
    TITLE: 'Additional Data',
    DESCRIPTION: 'Delivery history',
});

How to run a business process from mobile?

Combination: button in widget → REST call → start BP via bizproc.workflow.start. The user presses a button in the deal card, the server starts a business process, changes the status, sends a notification. In 2 days we implement the chain: task list, approval, document sending.

Step-by-step guide:

1. Develop a widget with an "Approve" button and register it on the deal card.
2. In the widget handler, call BX24.callMethod('bizproc.workflow.start', { ... }) with template parameters and deal ID.
3. On the server, the business process runs 5 steps: condition check, deal status change to "In Progress", send notification to manager, write to history, notify client.
4. After completion, the mobile app receives the response and updates the interface.

White Label: your own branding

For on-premise platform, White Label is available—building your own branded mobile app. The system allows recompiling the app with custom name, icon, and splash screen. Requires an Enterprise license and a separate agreement with 1C-Bitrix. We help prepare resources: icons in 5 resolutions, splash screens for 3 resolutions, build configuration.

Case study: insurance broker, custom agent interface

Timelines and pricing

Development timelines depend on complexity: MVP (minimum viable product) — from 5 days; standard project with web app and several widgets — from 10 to 20 days; comprehensive customization with White Label — up to 30 days. Cost is calculated individually after auditing your business processes and approving the technical specification. Payback period for customization is 3–4 months due to reduced deal processing time.

What is included in the work

Within the project we provide:

• Technical specification with architecture description, screen prototypes, and your approval.
• Source code of web apps and widgets registered in your system.
• Documentation for REST methods and usage scenarios.
• Installation and configuration guide, including access rights.
• Testing on real devices (iOS, Android) and bug fixing.
• Support for 30 days after delivery (consultations, adjustments as agreed).

Every project starts with an audit of current processes. Get a consultation—we'll assess your scenario in 1 day. Contact us to discuss architecture and timelines. Order customization of your mobile app—start with an audit.

How to choose the right mobile app technology for your Bitrix project?

Service Worker on Bitrix – a separate adventure. The composite cache (CPagesCache) serves an HTML page from the file cache, while the Service Worker caches resources via the Cache API. Two caching layers that know nothing about each other. If you don't separate their strategies, the user sees an outdated cart after adding an item. We start any PWA project on Bitrix by configuring proper separation: Service Worker handles static assets (CSS, JS, fonts) with Cache First, while HTML and API responses always use Network First with a cache fallback. The Bitrix composite cache operates server-side and does not intersect with the client side.

What mobile app types fit your Bitrix ecosystem?

PWA (Progressive Web App) – a web application that looks like a native app but lives in the browser. No store installation needed — add to home screen. React Native – cross-platform by Meta. JavaScript, one codebase — native iOS and Android app with full device API access. Flutter – cross-platform by Google on Dart. Own Skia rendering engine, stable 60/120 FPS. Bitrix24 mobile app – ready-made corporate solution: CRM, tasks, chat, video calls.

PWA beats native development in launch speed by 3 times, and React Native is 40% cheaper than Flutter in labor costs for a typical online store.

How to implement PWA on Bitrix without cache conflict?

manifest.json – icon, name, display: standalone, theme_color, start_url. The user installs the site on the home screen. Place the file in the root and include via <link rel="manifest"> in header.php of the template.

Service Worker – the core of PWA. Register in footer.php:

• Cache First for static: /bitrix/cache/, CSS, JS, fonts, product images
• Network First for HTML and API (/ajax/, /bitrix/services/). If network unavailable – serve cache
• Stale While Revalidate for catalog — show cached, update in background
• Separate logic for cart: always Network Only, otherwise the user sees phantom items

Key nuance – conflict with Bitrix composite. The composite module caches HTML on the server and serves static files. Service Worker should not intercept these responses for authorized users — otherwise a logged-out user will see the previous cart. Solve by checking the BX_USER_ID cookie in the fetch handler.

Push notifications – Firebase Cloud Messaging or OneSignal. Order status (OnSaleStatusOrder → trigger push), promotions, stock arrival. Save device token in user UF field.

Offline catalog – previously viewed items available without internet. IndexedDB for cards, Cache API for images.

Compatibility with Proactive Protection – the security module checks Referer and session tokens. Service Worker during prefetch may not send required headers — configure exceptions in BX_SECURITY_SESSION_VIRTUAL.

Performance improvement of mobile site after PWA implementation is 60-80% Time to Interactive, and mobile conversion rates increase by 25-35%.

According to Wikipedia, PWA combines the best of web and native apps, and with proper Service Worker strategy it works seamlessly on Bitrix CMS.

React Native for online stores on Bitrix

When PWA is not enough – React Native provides a full native app with a single codebase.

Architecture:

• Backend: Bitrix serves data via REST API. Standard methods catalog.product.list, sale.order.add for catalog and orders. For custom entities – custom controllers via \Bitrix\Main\Engine\Controller
• Intermediate layer: BFF (Backend for Frontend) on Node.js or GraphQL. Aggregate 3-5 requests to Bitrix API into one response for the mobile client – mobile internet doesn't tolerate extra round trips
• Frontend: React Native application

Online store functionality:

• Catalog: search, filters, sorting – data from CIBlockElement::GetList via REST
• Product page: gallery (react-native-fast-image), description, specs, reviews
• Cart and checkout with persistence via AsyncStorage
• Personal account: orders, favorites, profile, addresses
• Push: order status, promotions, abandoned cart – FCM/APNs, triggers on Bitrix events
• Native features: barcode scanner (react-native-camera), geolocation for pickup points, Face ID / Touch ID (react-native-biometrics)
• Offline: catalog and favorites via AsyncStorage / WatermelonDB
• Deep linking: react-navigation deep link → specific product from push or ad

React Native is chosen because:

• React developers already know 80% of the stack
• Ecosystem: thousands of ready packages in npm
• Hot Reload – instant feedback during development
• CodePush by Microsoft – update JS bundle without store publication. Fix a bug in minutes instead of 2-3 days of review

Flutter vs React Native: when to choose Flutter

Alternative to React Native. Choose when you need custom UI with heavy animations.

Strengths:

• Skia engine – 60/120 FPS on complex animations where React Native starts to lag due to bridge
• Pixel-perfect identity on iOS and Android – own rendering, not platform widgets
• Dart: strictly typed, errors at compile time, not in production on user's device
• Material Design and Cupertino widgets out of the box

When Flutter:

• Interface with complex animations and custom screen transitions
• Critical to have identical UI on both platforms
• Plans for web and desktop (Flutter supports all three targets)
• Team knows Dart or is ready to invest

Integration with Bitrix:

• REST API on Bitrix side (similar to React Native)
• dio package for HTTP with interceptors: automatic auth token addition, retry on 5xx
• State: Riverpod or BLoC – depends on scale
• Local storage: Hive for key-value, sqflite for complex offline queries

For non-standard interface, Flutter provides identical behavior on both platforms – saving up to 30% of time on cross-platform bugs.

How to prepare API for mobile app on Bitrix?

A mobile app is only as good as its API.

Design:

• RESTful with versioning (/api/v1/, /api/v2/) – backward compatibility during updates
• JWT + refresh token. Access – 15 minutes, refresh – 30 days. Store refresh in Keychain (iOS) / EncryptedSharedPreferences (Android)
• Cursor pagination (?after=eyJ...) – stable loading without duplicates when adding new items
• Sparse fieldsets: ?fields=id,name,price,image – return only what the screen needs, save traffic

Optimization for mobile networks:

• Aggregated endpoints: one request per screen instead of five. /api/v1/home returns banners, recommendations, promotions, and categories in one response
• Gzip compression – in Bitrix enabled via \Bitrix\Main\Config\Option::set('main', 'use_compression', 'Y')
• ETag / Last-Modified – 304 Not Modified saves traffic and time
• Retry with exponential backoff + offline queue (requests accumulate and send when network restores)
• Images by device size: CFile::ResizeImageGet() with parameters from DPR header

Push notifications:

• FCM (Android) + APNs (iOS)
• Triggers on Bitrix events: OnSaleStatusOrder, OnCatalogStoreProductUpdate, OnSaleBasketSaved
• Segmentation: personalization based on CRM behavior
• Funnel analytics: delivery → open → transition → conversion

What is included in turnkey mobile app development?

• Analysis – current site audit, load testing, bottleneck profiling (SQL queries, caching). Feature requirements gathering
• API design – REST/GraphQL schema design with cursor pagination and sparse fieldsets, integration with 1C via CommerceML, fiscalization (54-FZ, ATOL, OFD)
• PWA implementation – Service Worker setup, manifest, push notifications, offline catalog, testing on real devices
• Native app development – React Native or Flutter: screen layout, API integration, camera, geolocation, deep linking
• Bitrix24 integration – REST OAuth, webhooks, Open Lines, Bizproc, CRM synchronization
• Testing – load testing (k6), regression, cross-platform on iOS/Android, offline scenario testing
• Deployment – publication on App Store / Google Play, CI/CD setup, monitoring (Sentry, Firebase Crashlytics)
• Documentation – API description, architecture, update instructions. Handover of access and source code

Result: working application, documentation, server and store access, client team training.

Why is PWA recommended as the first step?

PWA validates your mobile hypothesis quickly. With 2-3 weeks of work you get a working prototype that users can install on their home screen. If mobile traffic and conversion data confirm demand, we scale up to a native app with full device access. This approach reduces upfront investment and provides real metrics before committing to a 4-6 month native development cycle.

Our team consists of certified 1C-Bitrix developers with over 7 years of experience. During this time, we have completed 20+ mobile projects – from PWA for retail chains to native apps for distributors with CDEK and 1C integration. We guarantee compatibility with current platform and module versions.

Order a preliminary assessment: we will send an architectural plan and timeline within 2 business days. Contact us for a developer consultation on technology choice – fill out the form on the website or call. Get your project started with a clear roadmap.