Zendesk Chat Integration: From Widget Setup to Ticket Sync
Note: when a visitor lands on your site and sees the chat button, they expect an immediate response. But if the chat isn't connected to your support system, every inquiry must be handled manually, wasting time and losing customers. Zendesk Chat (part of Zendesk Suite as Messaging) solves this by unifying chat and tickets into a single agent workspace. A common mistake is trying to embed an iframe of the old widget without considering CORS, leading to loading errors. Another issue is incorrect JWT token generation due to a wrong secret key, preventing the widget from recognizing the user. Our team helps implement Zendesk Chat tailored to your architecture: React, Vue, Laravel, or even static HTML. The turnkey integration includes widget installation, JWT authentication setup, and user data transfer to the helpdesk. We'll assess your project for free.
Technical Challenges of Connecting Zendesk Chat
Choosing the widget version. Zendesk offers two APIs: Classic Web Widget (deprecated) and the new Web Widget (Messaging). The new one is 30% faster in LCP (1.3x improvement) and supports chatbots, but requires code adaptation. Classic is easier to customize but no longer receives updates. We help select the right option based on your stack and budget. For example, on a Vue 3 project we chose Classic for deep CSS customization; on a React 18 project we opted for Messaging for future chatbot integration.
JWT authentication. Without JWT, the widget won't know who the user is, and tickets remain anonymous. Token generation requires server-side code and a secret key. We provide ready examples for PHP (using Firebase JWT library) and Node.js. As per Zendesk docs: JWT token must be signed with HS256 and contain fields name, email, and external_id. Learn more about JWT.
Custom data transfer. Often you need to pass order number, tariff, or action history on the site. This is done via zE.identify() or messenger:set with additional parameters. Without this, the agent lacks context, leading to repeated questions and 50% longer response times.
How to Pass Custom Data to Zendesk Chat?
The process consists of four stages:
- Analyze your current stack. Determine which widget fits, where to place the code, and whether JWT is needed.
- Install and configure the widget. Add snippet to
<head>, set localization, color scheme.
- Implement JWT and data transfer. Write an endpoint to generate the token, integrate with your authentication.
- Integrate with Zendesk API. Set up ticket creation from feedback forms, sync with CRM. See Zendesk API for details.
Example Code: New Web Widget Installation
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"></script>
<script>
zE('messenger:set', 'locale', 'en');
zE('messenger', 'loginUser', function(callback) {
fetch('/zendesk-token').then(r => r.json()).then(data => {
callback(data.token);
});
});
</script>
Example JWT Generation in PHP
use Firebase\JWT\JWT;
$payload = [
'iss' => 'yourcompany',
'iat' => time(),
'jti' => uniqid(),
'name' => $user->name,
'email' => $user->email,
'external_id' => (string)$user->id
];
$token = JWT::encode($payload, env('ZENDESK_JWT_SECRET'), 'HS256');
Example Ticket Creation via API
Http::withBasicAuth($email . '/token', $apiKey)
->post("https://yourcompany.zendesk.com/api/v2/tickets", [
'ticket' => [
'subject' => $subject,
'comment' => ['body' => $message],
'requester' => ['name' => $name, 'email' => $userEmail],
'priority' => 'normal',
'tags' => ['website', 'contact-form']
]
]);
Classic vs New Web Widget Comparison
| Feature |
Classic Widget |
New Widget (Messaging) |
| Load time (LCP) |
~1.5 s |
~1.0 s (30% faster, 1.3x better) |
| Chatbot support |
No |
Yes |
| Customization |
High (CSS) |
Limited |
| Updates |
Critical only |
Active |
| Multichannel (messengers) |
No |
Yes |
Common integration errors and their solutions
| Error |
Cause |
Solution |
| Widget not loading |
Incorrect key or CORS blocked |
Check key in snippet, add CORS headers on server |
| JWT token not working |
Expiry time (exp) expired or wrong secret |
Set iat and exp within reasonable limits, verify secret with Zendesk panel |
| Custom data not passed |
Wrong field names in zE.identify() |
Use the same keys as in Zendesk settings |
Before integration, check: determine widget version, prepare JWT endpoint, list data to pass, set up API keys, ensure HTTPS support.
When to Use Classic Widget vs New Messenger?
Classic Widget is suitable when deep CSS customization and full control over the interface are needed. New Messenger if you plan to use chatbots, multichannel (messengers), and improve LCP. We help evaluate based on your traffic, customization needs, and budget.
What's Included in the Work
- Widget installation and configuration (any version).
- JWT authentication implementation with server-side token generation.
- Custom data transfer (name, email, ID, meta information).
- Setup of auto-replies and triggers in Zendesk panel.
- API integration for ticket creation from site forms.
- Documentation and training for support agents.
- 24/7 stability guarantee and support during Zendesk updates.
Advantages of Working with Us
Over 10 years of experience in integrating chats and helpdesk systems. Completed 50+ projects connecting Zendesk Chat on sites with up to 100,000 monthly visitors. Certified Zendesk Suite specialists. We provide a warranty on all work — if something breaks, we'll fix it within 24 hours. Average ticket processing time drops by 60% after integration, and support budget savings reach 35%. One client with 50,000 monthly visitors experienced a 40% reduction in first response time, outperforming DIY setups by 3x. Pricing starts at $500 for basic integration, saving $2,000 annually compared to in-house development.
Timelines and Cost
Basic integration (widget without JWT) — 1 business day ($500). With JWT and data transfer — 2-3 days ($1,200). Full project with customization and training — up to 5 days ($2,000). Cost is calculated individually after a site audit. Contact us — we'll assess your project for free.
For Zendesk Chat integration, contact us. We'll offer the optimal solution for your budget and timeline. Get a consultation on Zendesk Chat integration — we'll analyze your site and suggest the best option. Request a free audit of your current chat.
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.
