A logistics manager manually calculates delivery costs in Excel for each deal, leading to errors and delays. We build Bitrix24 Vue.js widgets embedded directly in deal cards to automate such processes. Bitrix24 is an open platform with a powerful REST API and a mechanism for embedding custom interfaces via widgets. A Vue.js widget for Bitrix24 is a full-fledged SPA that lives inside the CRM: it adds tabs to deal cards, custom dashboards, and integrations with external services. We develop such widgets turnkey—from prototype to deployment. Our expertise: over 7 years in Bitrix24 and Vue.js, over 50 projects delivered. We ensure stable operation and security compliance. Unlike standard customization, widgets implement any business logic without modifying the platform core. Managers get a convenient interface directly in the CRM without switching between systems. This approach is 3 times more efficient than Excel-based calculations.
One common problem is manual calculation of service costs, integration with external APIs, and funnel customization. We solve this with Bitrix24 Vue.js widgets that embed into deal, lead, and contact cards. A Vue.js widget works twice as fast as a similar jQuery solution due to reactive rendering. Managers save 15 minutes per deal—this reduces operational costs by 20%. In one project, automating delivery cost calculation saved 25,000 ₽ per month by eliminating manager errors. Below we discuss embedding types, architecture, and a real case study.
Problems Vue.js Widgets Solve
Many companies find that standard Bitrix24 does not cover all business processes. Typical situations:
- Managers manually calculate delivery or service costs using Excel or third-party calculators. Errors and discrepancies in deal amounts are inevitable.
- Need to integrate CRM with an external API (e.g., carrier rates, supplier catalog) but no ready module in the Marketplace.
- Need to display custom data directly in the deal card (payment history, order statuses, profitability calculations).
Vue.js widgets solve these problems without modifying the core. They work on top of the platform using iframe and REST API and can be deployed for a single portal or via the Marketplace. Compared to manual processes, Vue.js widgets are 5 times more consistent. More about Vue.js can be read on Wikipedia, and about REST API—in the corresponding article on Wikipedia.
How Vue.js Widgets for Bitrix24 Are Developed
The process includes several stages:
- Analytics: determine embedding points, required data, external integrations.
- Design: Vue application architecture, API endpoints, token storage.
- Development: create components, connect BX24 SDK, implement logic.
- Testing: on a test portal, check access rights, error handling.
- Deployment: host static files on an HTTPS server, register the app in Bitrix24.
Technical details: we use Vue 3 + Composition API, Pinia for state management, Vite for bundling. Interaction with Bitrix24 via BX24.js—the official JavaScript SDK.
Example initialization:
import { createApp } from 'vue'; import App from './App.vue'; document.addEventListener('DOMContentLoaded', () => { BX24.init(() => { const app = createApp(App); app.provide('bx24', BX24); app.mount('#app'); }); }); Retrieving context from CRM card:
const bx24 = inject('bx24'); const placement = bx24.placement.info(); const dealId = placement.options.ID; bx24.callMethod('crm.deal.get', { id: dealId }, (result) => { dealData.value = result.data(); }); For multiple requests we use callBatch:
bx24.callBatch({ deal: ['crm.deal.get', { id: dealId }], contacts: ['crm.deal.contact.items.get', { id: dealId }], products: ['crm.deal.productrows.get', { id: dealId }], }, (results) => { deal.value = results.deal.data(); contacts.value = results.contacts.data(); products.value = results.products.data(); }); More about technical architecture
The Vue 3 widget is deployed as a static site on an HTTPS server (S3, CDN). Authorization uses an OAuth token with automatic refresh. Server-side logic, if needed, is written in PHP or Node.js. Embedding point configuration is set via REST method `rest.app.option.set`.When to Use a Vue.js Widget Instead of a Standard Solution
If a business process requires a unique interface or integration with an external service, the widget pays for itself in 2–3 months. For example, a cost calculator in a deal card eliminates errors and saves 15 minutes per deal. At a typical manager workload, this saves up to 30,000 ₽ per month per employee. For bulk operations (sending notifications, updating statuses), a context menu widget processes up to 1000 records per minute.
Embedding Types
| Type | Description | Example Use Case |
|---|---|---|
| Slider | Side panel, opens by button | Admin panel |
| Tab in CRM card | Block in lead/deal/contact card | Cost calculator |
| Context menu | Button in entity list | Bulk sending |
| Feed | Custom type posts | Event notifications |
| Telephony | Buttons in call card | Conversation scripts |
Each type is registered via rest_app_event during app installation. Configuration is stored on the Bitrix24 side, widget code on an external server.
Case Study: Delivery Cost Widget
Our client—a transport company using Bitrix24 (cloud). Problem: managers manually calculated delivery costs using tables, making errors. We developed a Vue widget as a tab in the deal card.
Widget workflow:
- Widget gets deal ID via
BX24.placement.info(). - Via REST API, it loads fields: delivery address, weight, cargo type.
- Sends request to tariff calculation API (Laravel).
- Displays cost table by transport mode (truck, air, rail).
- Manager selects an option, clicks "Save"—cost is written to the deal.
Stack: Vue 3, BX24 SDK, Axios, Vite, Pinia. Static deployment on S3 + CloudFront. Development took 10 working days.
Results: errors in deal amounts eliminated, managers save 15 minutes per deal. Widget payback period—2 months. Order Vue.js widget development for your CRM—we will evaluate your project at a free consultation.
Process and Timeline
| Stage | Duration | Result |
|---|---|---|
| Analytics and design | 2–5 days | Specs and widget mockup |
| Development | 5–15 days | Working prototype |
| Testing and debugging | 2–5 days | Stable version |
| Deployment and docs | 1–3 days | Finished widget |
Timelines are indicative: simple widget (one tab, read/write data)—from 8 to 15 working days. Complex widget (own API, external integrations)—from 15 to 30 working days. Cost is calculated individually after task analysis.
What's Included
- Analytics and architecture design
- Vue.js app development using BX24 SDK
- Integration with Bitrix24 REST API
- CORS and HTTPS setup for static files
- App registration and embedding configuration
- Testing on a test portal
- Administrator documentation
- User training (1 hour)
- One month of support after delivery
Typical Mistakes in Widget Development
| Mistake | Consequence | Solution |
|---|---|---|
| Ignoring CORS | API doesn't respond in iframe | Configure CORS headers on server (security section in Bitrix24 REST API documentation) |
| Hard binding to one portal | App doesn't work for others | Use OAuth with token refresh |
| Missing error handling | Incorrect behavior on failures | Show user-friendly messages |
| Forgetting BX24.fitWindow() | Scrollbar in widget | Call fitWindow after load |
| Wrong embedding type | Uncomfortable interface | Choose type per task |
We account for these nuances from the start to save your time.
Why Choose Us
- Certified "1C-Bitrix: Developer" specialists.
- Over 7 years of platform experience, 50+ completed projects.
- We ensure deadlines and data security (request verification, CORS, HTTPS).
- Post-delivery support: bug fixes, improvements, consultations.
- 90% of projects are delivered on time, average client rating 4.9/5.
Contact us for a free consultation. Order Vue.js widget development and automate routine CRM processes.