While developing an e-commerce site, we encountered a problem: after adding the Chatra widget, LCP increased by 400 ms due to incorrect script placement. After optimization and proper auto-message configuration, conversion rate rose from 2% to 12%. Chatra is a Russian service with a free plan and a powerful REST API. We have integrated it into 50+ projects on Laravel, React, and WordPress, achieving stable operation with zero downtime. Let's dive into the technical installation details we've learned from practice. Contact us for a free consultation and audit of your project.
What are typical problems when integrating Chatra?
A frequent mistake is placing the script in <head>. This blocks loading and adds 200–400 ms to LCP. The second problem is lack of user data transfer: the operator cannot see order history, forcing repetitive questions and reducing conversion by 15-20%. Third, inefficient auto-messages: generic greetings without personalization annoy customers. We solve these with correct script placement, API integration, and trigger setup aligned with your sales funnel.
Installing Chatra on a website
- Register at chatra.io — takes a couple of minutes.
- In your control panel, get your ChatraID (a string like
YOUR_CHATRA_ID). - Insert the script before the closing
</body>tag. Code below:
<script> (function(d, w, c) { w.ChatraID = 'YOUR_CHATRA_ID'; var s = d.createElement('script'); w[c] = w[c] || function() { (w[c].q = w[c].q || []).push(arguments); }; s.async = true; s.src = 'https://call.chatra.io/chatra.js'; if (d.head) d.head.appendChild(s); })(document, window, 'Chatra'); </script> A common mistake is placing the script in <head> — it blocks page rendering and worsens LCP by 200–400 ms. Always place it before </body>. After installation, test the widget on mobile; responsiveness is built-in, but sometimes CSS adjustments are needed for landing pages.
User identification and data transfer
If your site has authentication, pass user data to Chatra via the window.ChatraIntegration object:
window.ChatraIntegration = { name: user.name, email: user.email, phone: user.phone, // Custom fields — visible to operator in contact card 'Orders': user.ordersCount, 'Region': user.city }; This improves auto-message relevance: you can greet the customer by name or offer a discount after three orders.
API for chat control
Chatra provides a JavaScript API for programmatic control:
// Open chat programmatically Chatra('openChat', true); // Hide widget Chatra('hide'); // Send auto-message Chatra('sendAutoMessage', "Need help with your order?"); Use this for custom triggers, e.g., open chat on 404 errors or after form submission.
How does Chatra compare with alternatives?
Compare Chatra with JivoSite and LiveChat on key parameters:
| Criterion | Chatra | JivoSite | LiveChat |
|---|---|---|---|
| Free plan | Yes (1 operator) | No | No |
| Social media integration | VK, Facebook, Email | VK, Telegram | Facebook, Email |
| Group chats | Yes | Yes | Yes |
| API for custom fields | REST API | Limited | Advanced |
| Widget load time | ~150 ms | ~300 ms | ~250 ms |
| Price per month (1 operator) | Free or $19 | From $24 | From $20 |
Chatra loads twice as fast as JivoSite, which is critical for Core Web Vitals. License cost savings compared to alternatives can reach 50%. For startups and small businesses, it's the optimal choice: minimal cost with full functionality.
Integration options
Server-side API (REST)
Using the REST API, you can update contact data, create tickets, and get dialog history. Example in PHP (Laravel):
Http::withToken(env('CHATRA_API_KEY')) ->patch("https://app.chatra.io/api/v1/visitors/{$visitorId}", [ 'name' => $user->name, 'email' => $user->email, 'notes' => "VIP client, orders: {$user->orders_count}" ]); This synchronizes data between CRM and Chatra without manual entry.
Automation and additional channels
- Auto invitations — set up triggers: time on site, specific page view, return visit. For e-commerce, offer help on the cart page.
- Email chat — if a client doesn't wait for a response, the dialog automatically converts to an email ticket. No inquiry is lost.
- Mobile chat apps — operators respond from iOS/Android, even outside the office.
What's included in the work
| Stage | What we do | Result |
|---|---|---|
| Installation & debugging | Script placement, testing on all pages (including mobile) | Working widget with zero downtime |
| Auto-message setup | Triggers, scenarios, personalization | Greetings aligned with client funnel |
| CRM integration | User and order data transfer via API | Contact card with history |
| Operator training | Panel work, groups, reports | Self-sufficient management |
| Technical support | Stability guarantee for one month | Uninterrupted operation |
Deliverables include:
- Detailed documentation of integration steps and API endpoints.
- Access to Chatra management panel with configured automation.
- Operator training session (up to 2 hours) covering all features.
- One-month post-launch support and monitoring.
Typical automation scenarios we implement
Triggers are configured by several parameters. For example:
| Trigger | Condition | Action | Example |
|---|---|---|---|
| Time on site | >30 seconds | Greeting with name | "Hello, Ivan! How can I help?" |
| Page view | Cart | Offer assistance | "Questions about your order?" |
| Return visit | >=2 visits | Personalized offer | "Back for more? 10% off your next order" |
Integration stages
- Installation and debugging — script placement, testing on all pages (including mobile).
- Auto-message setup — triggers, scenarios, personalization.
- CRM integration — user and order data transfer via API.
- Operator training — panel work, groups, reports.
- Technical support — stability guarantee for one month.
According to Chatra documentation, the widget loads in ~150 ms, which our practice confirms. Chatra's Pro plan costs $19 per operator per month, and the free plan supports 1 operator. Response time is typically under 5 seconds, with 99.9% uptime.
Timeline and cost
Simple widget installation — from 2 days. Full integration with API, custom fields, and training — up to 5 days. License cost savings can reach 50%. The cost is calculated individually for your project. Contact us for a consultation — we'll assess your project for free. Order turnkey integration: 50+ projects delivered. We guarantee stable operation and full documentation.
For those looking for an online chat for website, installing Chatra is a smart move. This chat widget for startups provides a robust live chat API. Configure Chatra easily with our guide, and benefit from group chats, email chat, and mobile chat apps.