Custom CRM Card Development for Bitrix24

When the standard deal card falls short

A sales manager for equipment sees the same fields as a rental manager: fields are not grouped, no computed values, no conditional display logic. We've encountered such requests dozens of times and have accumulated expertise that allows us to solve the task in 3–7 days instead of months. Our engineers guarantee: a custom card will show the manager exactly what is needed at the current stage, without extraneous information.

Custom CRM cards: two levels of customization

Bitrix24 offers two ways to modify the CRM entity card, and they are fundamentally different in depth.

Level 1: UI settings. In the deal card (contact, smart process), click "Card settings" → "Edit fields and sections". Here you can: rename sections, drag fields between sections, hide unnecessary fields, set field required by stages (for deals). This is free and covers ~40% of requests. But you cannot add computed fields, conditional logic, custom widgets, or data from external systems.

Level 2: Development via REST Placement API. This embeds arbitrary HTML/JS content into specific zones of the card. This is where real customization begins.

What can be embedded via Placement API?

The CRM entity card has several zones (placements) where you can embed custom content:

• CRM_DEAL_DETAIL_TAB — a tab in the deal card. Full area for any UI.
• CRM_DEAL_DETAIL_ACTIVITY — a block in the timeline. Suitable for custom actions.
• CRM_CONTACT_DETAIL_TAB, CRM_COMPANY_DETAIL_TAB — analogously for contacts and companies.
• CRM_DYNAMIC_ITEM_DETAIL_TAB — a tab in the smart process card.

Register a placement via REST:

BX24.callMethod('placement.bind', { PLACEMENT: 'CRM_DEAL_DETAIL_TAB', HANDLER: 'https://your-app.com/deal-tab.html', TITLE: 'Margin calculator' }); 

After registration, a new tab appears in the card. When opened, Bitrix24 loads the HANDLER in an iframe and passes the context: ENTITY_ID (deal ID), AUTH_ID, REFRESH_ID.

Deep dive: custom tab with data

Consider a typical case — a "Finance" tab in the deal card that shows: total by product items, cost from external 1C, margin, payment history.

Step 1: get deal data

BX24.init(function() { var dealId = BX24.placement.info().options.ID; BX24.callBatch({ deal: ['crm.deal.get', {id: dealId}], products: ['crm.deal.productrows.get', {id: dealId}] }, function(result) { var deal = result.deal.data(); var products = result.products.data(); renderFinanceTab(deal, products); }); }); 

Step 2: request cost from external API

The tab makes a request to your backend, passing product SKUs. The backend proxies to 1C or ERP and returns the cost.

Step 3: render

Calculate margin client-side and display a table. For visual consistency, use B24 CSS variables or the @bitrix24/b24-ui library.

Why conditional field logic doesn't work out of the box?

A frequent request: show/hide fields based on another field's value. E.g., "Reason for rejection" field visible only on "Lost" stage. Standard functionality allows making a field required by stage, but not hiding it.

Solution — a custom handler via placement CRM_DEAL_DETAIL_TAB or embedding JS code via a user field type. In the on-premise version, you can modify the bitrix:crm.deal.detail component template and add JS logic to script.js.

For the cloud version, the only clean way is a placement with full redrawing of the required field section. This means: you fetch data via REST, render fields with conditional logic in your iframe, and on save, send changes back via crm.deal.update.

Timeline widgets

Placement CRM_*_DETAIL_ACTIVITY embeds a block directly into the activity feed of the card. Suitable for:

• Displaying delivery status (data from a transport company API)
• Showing client balance from an accounting system
• Displaying the latest tickets from helpdesk

The widget updates on every card open. For caching, use BX24.appOption — the app storage on the B24 side.

Performance: approach comparison

Iframe tabs load on activation (click on the tab). For heavy tabs, this is fine — the user doesn't wait for something they haven't opened. But if you embed a widget in the main card area, it loads immediately. Every REST request from an iframe is a network round-trip. Use BX24.callBatch to batch requests: one batch instead of five sequential calls. Custom tabs via Placement API are 3 times faster to develop than overriding templates in the on-premise version and do not require core updates.

Custom card development stages

What's included

• Development of technical specification and card prototype
• Placement registration and REST integration setup
• Implementation of custom tab/widget with testing
• Integration with 1C (CommerceML) or other external systems
• API documentation and access transfer
• Employee training on the new card
• 1 month support after launch

Cloud version limitations

In the cloud, you cannot modify standard card sections — only add new tabs and widgets. You cannot remove standard fields from the main view (only hide via card settings). For full interface control, use the on-premise version with component template override (crm.deal.detail).

Estimate your project in one day

We develop custom CRM cards turnkey. 10+ years of Bitrix24 experience, over 50 successful projects. Development cost is calculated individually, manager time savings after implementation reach 30%. Order custom CRM card development — we'll send a preliminary estimate of timeline and cost. Get a free engineer consultation.