LiveChat Integration: Widget to CRM via API

During LiveChat integration, operators often complain about delays: the widget loads in 5 seconds, customer data doesn't reach the CRM, and order history is missing. We design the setup so the widget loads in 1–2 seconds and doesn't affect Core Web Vitals. Let's explore how to avoid these issues using proper installation, LiveChat API, and webhooks. Our experience spans over 50 projects (6+ years), from landing pages to high-load e‑commerce stores with custom logic. A standard solution doesn't suit complex sites. We'll examine each configuration stage: from async loading to data transfer to CRM via webhooks. We also cover typical routing errors and provide ready code for customer identification. Our guaranteed LiveChat integration ensures minimal performance impact and reliable data flow.

How to Ensure Widget Load Speed Without Losing LCP?

The LiveChat widget is connected via a JavaScript tracker. By default, the script loads synchronously, increasing LCP and FID. The solution is to load it asynchronously and defer initialization until the load event. According to LiveChat official documentation, this approach reduces time to interactive by 30%. The code below does exactly that:

<script>
window.__lc = window.__lc || {};
window.__lc.license = YOUR_LICENSE_NUMBER;
;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}
var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},
once:function(){i(["once",c.call(arguments)])},
off:function(){i(["off",c.call(arguments)])},
get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");
return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},
init:function(){var n=t.createElement("script");
n.async=!0,n.type="text/javascript",
n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};
!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
</script>

Note: the script has an async attribute, and init() is called inside a closure without blocking DOMContentLoaded. Additionally, you can remove unused widget CSS styles via tree-shaking in the LiveChat console settings. This method improves LCP by 30–50%.

Standard Installation Lacks CRM Data Transfer

Without additional configuration, LiveChat doesn't know who your customer is. The operator only sees 'Visitor 123'. To pass name, email, order ID, and more, use the JavaScript API right after user identification on the site:

// Identification
LiveChatWidget.call('set_customer_name', user.name);
LiveChatWidget.call('set_customer_email', user.email);

// Custom data (visible to operator)
LiveChatWidget.call('set_session_variables', {
    'Order ID':    orderId,
    'Cart Total':  cartTotal + ' ₽',
    'User Plan':   user.plan
});

// Show/hide
LiveChatWidget.call('hide');
LiveChatWidget.call('minimize');

These variables are automatically pulled into the customer card. For CRM integration (e.g., with Bitrix24), use the LiveChat REST API to create tickets or sync deals. Example:

// Create a ticket via REST API
Http::withBasicAuth('[email protected]', $personalAccessToken)
    ->post('https://api.livechatinc.com/v3.5/cases', [
        'subject'  => "Site inquiry",
        'customer' => ['email' => $email, 'name' => $name],
        'properties' => [
            'source' => ['type' => 'email', 'url' => 'https://shop.ru/contact']
        ]
    ]);

This approach is better than the ready-made LiveChat module for CRM because you control the data structure and can pass any properties.

Automating Data Transfer via Webhooks

LiveChat supports webhooks on events: new chat, chat close, new message, operator rating. This is convenient for logging or real-time data transfer to CRM. To configure, just add your endpoint URL in the LiveChat console → Integrations → Webhooks. Webhooks are processed within 200–500 ms, allowing data synchronization without delays. We have set up webhooks to transfer data to Amocrm and HubSpot — response time does not exceed 1 second. Our proven process ensures 99.9% uptime.

// Full identification with custom variables
function identifyCustomer(user) {
    LiveChatWidget.call('set_customer_name', user.name);
    LiveChatWidget.call('set_customer_email', user.email);
    LiveChatWidget.call('set_session_variables', {
        'Order ID': user.orderId,
        'Cart Total': user.cartTotal + ' ₽',
        'User Plan': user.plan,
        'UTM Source': user.utmSource
    });
}

Comparison of LiveChat Integration Methods

The ready code is the fastest but doesn't solve performance and integration issues. Async script with JS API is optimal for 90% of projects. Full custom integration via API and webhooks gives maximum control but requires more time.

Comparison of CRM Integrations: Bitrix24, AmoCRM, HubSpot

What Does the Integration Process Include?

1. Audit of current version and load — check compatibility, loading speed, existing scripts.
2. Data schema design — which fields to transfer from site to chat, how to sync with CRM.
3. Widget installation — optimized for Core Web Vitals (LCP, CLS, INP).
4. Routing configuration — by products, languages, visitor status.
5. CRM and webhook integration — test scenarios, logging, backup channels.
6. Load testing — simulate 50 simultaneous chats.
7. Documentation and handover — API spec, configs, credentials.

Budget savings on support — up to 30% ($5,000+ annually for mid-size stores), integration cost pays back in 2–3 months. Typical project cost ranges from $500 to $2,000 depending on complexity. For a typical mid-size e-commerce store, the ROI is achieved within 2-3 months, with annual savings exceeding $5,000. Get an audit of your site — we'll assess compatibility in 1 day.

What Are Typical Mistakes in Online Chat Integration?

• Ignoring async loading: leads to LCP increase of 30–50%.
• Passing data only via URL parameters: not all CRMs support them.
• Lack of fallback routing: data is lost on webhook failure.
• Using outdated API versions: LiveChat API v3.5 is recommended, v2.x is deprecated.

What Do You Get After Integration?

After completion:

• Working chat widget with minimal impact on Core Web Vitals.
• Automatic transfer of all custom data to LiveChat and CRM via webhooks.
• Configured routing by departments (sales, support, tech support).
• Full documentation: data schema, endpoints, configs.
• Operator training (1 hour).
• 30 days post-delivery support.

Get a free consultation on our LiveChat integration service — write to us and we'll find the optimal solution. Our reliable LiveChat integration focuses on fast widget loading and seamless CRM data transfer. Contact us to discuss your project. Our certified team guarantees a high-performance, cost-effective LiveChat integration with proven ROI.

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.

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:

1. Generate a key pair (e.g., openssl genrsa -out private.key 2048).
2. Publish the public key in DNS as a TXT record for the selector (e.g., mail._domainkey.tx.example.com).
3. Provide the selector to the provider (SendGrid, Mailgun, Unisender).
4. 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

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.