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.
Email Campaign Integration: Why Does It Often Break?
We’ve observed that a trigger email sent 10 minutes after registration converts 4–5 times better than the same email sent after 24 hours. This isn’t a marketing myth—it’s mechanics: while the user is still warm, while they remember the context. But most integrations with email services are built like this: form submits → synchronous HTTP request to API → if the API is slow, the user waits 3 seconds → the email either goes out or doesn’t, nobody knows. In one project, we saw a 30% drop in conversion simply because the email service responded with 504 and Laravel’s queue driver wasn’t configured. Lost emails often hit customers silently – no log, no alert, just a missing order confirmation.
If you’re facing lost emails or spam folder issues, order an audit of your current integration – we’ll find bottlenecks within 2 days.
Providers and Their APIs
Unisender — a Russian provider popular in the SMB segment. REST API, simple. Adding a contact: importContacts, sending a transactional email: sendEmail. Important: for transactional emails (order confirmations, password resets), Unisender Go is a separate service with a different API and separate pricing. Mixing bulk and transactional mailings in one stream is bad for domain reputation. Unisender Go handles up to 1000 requests per second.
SendPulse — provides email, SMS, web push, Viber, and Telegram bots through a unified API. Convenient for projects requiring an omnichannel approach. Automation 360 is a visual chain builder; you can trigger automation via API events. The PHP SDK (sendpulse/rest-api-php-sdk) is maintained but updated irregularly – better to use Guzzle directly.
Mailchimp — a choice for international audiences and marketing teams accustomed to the Mailchimp ecosystem. Transactional email via Mandrill (a subsidiary service). Marketing API v3 for list, tag, and campaign management. Webhooks for opens, clicks, unsubscribes, bounces.
SMS. For Russia: SMSCenter, MTS Exolve, Devino Telecom, SMS Aero. Their APIs are similar: a send method with phone, message, sender parameters (sender name must be registered separately with the operator). One nuance: the sender name must be registered through the aggregator with a contract – otherwise SMS won’t be sent on MTS/MegaFon/Beeline networks.
| Provider |
Type |
Transactional Emails |
Marketing |
Notes |
| Unisender |
email+SMS |
Unisender Go (separate) |
Yes |
Popular in Russia, simple REST |
| SendPulse |
email+SMS+web push+Viber |
Yes |
Yes |
Unified API, omnichannel |
| Mailchimp |
email |
Mandrill |
Yes |
Analytics, international |
| Twilio |
SMS+email |
Yes |
No |
Global, expensive in Russia |
How to Build an Integration That Doesn’t Lose Emails?
Separate Transactional and Marketing Streams
Transactional emails (order confirmations, password resets, delivery status) go through a dedicated sender domain or subdomain tx.example.com. Marketing campaigns go through mail.example.com or news.example.com. If a marketing campaign receives many spam complaints, it should not affect the reputation of the transactional stream. According to SendGrid documentation, transactional messages should be sent through a dedicated IP pool to prevent cross-contamination.
Queue and Retry
Any call to the email API goes through a queue (Laravel Queue, Bull, Celery). If Unisender returns a 503, the job retries after 5 minutes, then 15, then 60. After 5 failed attempts, it goes to a dead letter queue with an alert. The user already received their 200 OK and knows nothing about the issue. This approach reduces bounce rate on projects to 0.5%.
Example Laravel job:
public function handle(): void
{
try {
$response = Http::post(config('services.unisender.email_url'), $this->params);
if ($response->failed()) {
$this->release(300); // retry after 5 min
}
} catch (\Throwable $e) {
$this->release(300);
}
}
Templates
We store templates in code (Blade, Twig, React Email), not in the provider’s interface. Reasons: versioning via Git, browser preview without sending, testability. For complex templates with dynamic content — react-email with export to HTML via @react-email/render.
Validation and Consent
Before adding a contact to a list — double opt-in (confirmation email). Store the confirmation timestamp in your own database. Upon unsubscription — synchronously unsubscribe both at the provider and in your database. Ignoring webhook unsubscriptions is a direct path to account suspension at the provider. All processes comply with Федеральный закон № 152-ФЗ «О персональных данных».
Deliverability Monitoring and DKIM Setup
Connect provider webhooks for events: bounce (hard and soft), spam_complaint, unsubscribe. Hard bounce — immediately mark the email as invalid in your database, stop sending. Soft bounce 3 times in a row — same. Metrics: open rate, click rate, bounce rate, unsubscribe rate — review at least once a week. Our certified engineers configure alerts in Grafana/Prometheus.
DKIM configuration steps:
- Generate a key pair (e.g.,
openssl genrsa -out private.key 2048).
- Publish the public key in DNS as a TXT record for the selector (e.g.,
mail._domainkey.tx.example.com).
- Provide the selector to the provider (SendGrid, Mailgun, Unisender).
- Verify with
dig TXT mail._domainkey.tx.example.com.
SPF, DKIM, DMARC must be configured separately for each stream. We use subdomains with different DNS records.
Why Is It Important to Separate Streams?
If you send a marketing campaign from the same domain as transactional emails and receive spam complaints, you risk getting the domain blocked — and users will stop receiving even order confirmations. SPF, DKIM, DMARC (Sender Policy Framework, DomainKeys Identified Mail, Domain‑based Message Authentication, Reporting and Conformance) must be configured separately for each stream. In one project, a marketing blast with 12% spam complaints blocked the transactional domain for 48 hours — we had to re‑authenticate with Google and Yandex.
What Does the Integration Scope Include?
- Audit of current communication streams and domain reputation (SPF, DKIM, DMARC)
- Provider and schema selection: transactional vs marketing traffic
- Configuration of SPF, DKIM, DMARC DNS records
- Development of email templates (HTML + dynamic content)
- Backend integration via queues and API
- Webhook setup for deliverability and complaints
- Operations documentation and team training
- Deliverability guarantee and post‑launch support
We deliver production‑ready documentation, access to monitoring dashboards, and a handover session with your engineers. Our certified engineers provide a 30‑day post‑launch health check guarantee.
Timelines and Cost
| Scenario |
Timeline (business days) |
Notes |
| Basic transactional emails (one provider) |
5–7 days |
Price is calculated individually after audit |
| Trigger sequences + SMS + web push |
10–20 days |
Price is calculated individually after audit |
| Full omnichannel automation |
20–40 days |
Price is calculated individually after audit |
Cost is calculated individually after audit. We provide turnkey service: from analysis to production monitoring. Contact us for a free engineer consultation — we’ll evaluate your project and give accurate timelines. Over 7 years of experience in email service integration, 50+ projects implemented. Order a free audit of your current integration and receive a report with recommendations and estimated savings.
