§ 00अवलोकन
Flutter SDK वही एनॉनिमस विजेट प्रोटोकॉल बोलता है जिसका उपयोग आपकी वेबसाइट चैट करती है — ताकि ग्राहक आपके मोबाइल ऐप के अंदर से ही सपोर्ट तक पहुँच सकें, उन्हीं बातचीत पर जिन्हें आपके एजेंट पहले से ही साझा इनबॉक्स में संभालते हैं।
यह दो पैकेज के रूप में आता है:
easylivechat— हेडलेस प्रोटोकॉल क्लाइंट के साथ रिएक्टिव स्टेट, कोई UI नहींeasylivechat_ui— प्रीबिल्ट, थीम-योग्य विजेट — लॉन्चर, चैट स्क्रीन, प्री-चैट फ़ॉर्म, अटैचमेंट, CSAT
§ 01इंस्टॉल
अपने ऐप की pubspec.yaml में SDK जोड़ें। अधिकांश ऐप easylivechat_ui चाहते हैं — यह core को री-एक्सपोर्ट करता है। हेडलेस easylivechat का अकेले उपयोग केवल तभी करें जब आप पूरी तरह कस्टम UI बना रहे हों।
dependencies: easylivechat_ui: ^0.1.0 # prebuilt UI + the headless core # — or, headless only — easylivechat: ^0.1.0
Flutter 3.19 या नया चाहिए। सर्वर से मेल खाने के लिए socket_io_client को 3.x रिलीज़ (Engine.IO v4) होना चाहिए।
§ 02क्विक स्टार्ट (ड्रॉप-इन UI)
क्लाइंट को अपने workspace slug के साथ एक बार बूट करें, फिर अपने विजेट ट्री में एक लॉन्चर ड्रॉप करें। यह बबल एक पूरी तरह वायर्ड चैट खोलता है: प्री-चैट फ़ॉर्म, रियल-टाइम थ्रेड, टाइपिंग, अटैचमेंट, CSAT, एक वर्किंग-आवर्स ऑफ़लाइन फ़ॉर्म, साथ ही सर्वर-संचालित थीमिंग और RTL।
import 'package:easylivechat_ui/easylivechat_ui.dart';
await EasyLiveChat.instance.boot(
const EasyLiveChatConfig(
apiBase: 'https://api.livechattools.com',
tenantSlug: 'acme', // your workspace slug
),
storage: SecurePrefsStorage(), // durable visitorId + JWT
);
// In your widget tree — a floating bubble that opens the full chat:
Stack(children: [ MyApp(), const EasyLiveChatLauncher() ]);अपना workspace slug अपने डैशबोर्ड में खोजें। लॉन्चर पहली बार खुलने पर लेज़ी तरीके से बूट होता है; एक टिकाऊ स्टोरेज पास करें ताकि विज़िटर की पहचान ऐप रीस्टार्ट के बाद भी बनी रहे।
§ 03हेडलेस (अपना खुद का UI बनाएँ)
अपना खुद का डिज़ाइन सिस्टम पसंद है? हेडलेस क्लाइंट को सीधे चलाएँ। सब कुछ ValueListenables और Streams के रूप में एक्सपोज़ किया गया है जिन्हें आप किसी भी स्टेट मैनेजमेंट से बाइंड कर सकते हैं।
import 'package:easylivechat/easylivechat.dart';
final chat = EasyLiveChat.instance;
await chat.boot(const EasyLiveChatConfig(
apiBase: 'https://api.livechattools.com', tenantSlug: 'acme'),
storage: myDurableStorage); // implement EasyLiveChatStorage
await chat.open(); // config → resume → prechat/anon → connect
chat.messages.addListener(rebuild); // ValueListenable<List<ChatMessage>>
chat.agentTyping.addListener(rebuild);
final res = chat.sendMessage('Hello!'); // optimistic; res.serverMessageId on ack
await chat.submitFeedback(rating: 5);open() पूरे लाइफ़साइकल को व्यवस्थित करता है: कॉन्फ़िग फ़ेच करना, किसी भी खुली बातचीत को फिर से शुरू करना, प्री-चैट फ़ॉर्म पर गेट लगाना या एनॉनिमस रूप से शुरू करना, फिर रियल-टाइम सॉकेट से कनेक्ट करना।
§ 04यह कैसे काम करता है
जब कोई सेशन खुलता है, तो सर्वर एक अल्पकालिक, प्रति-बातचीत टोकन बनाता है। SDK इसका उपयोग REST कॉल और रियल-टाइम सॉकेट के लिए करता है, इसके एक्सपायर होने से पहले इसे पारदर्शी रूप से फिर से बनाता है, और जब मोबाइल नेटवर्क गिर जाता है तो एक गैप-सुरक्षित बैकफ़िल के साथ फिर से कनेक्ट करता है।
सब कुछ एनॉनिमस-फ़र्स्ट है: SDK डिवाइस पर एक टिकाऊ विज़िटर id बनाता है — किसी लॉगिन की ज़रूरत नहीं — और वैकल्पिक रूप से टेनेंट प्री-चैट फ़ॉर्म के माध्यम से नाम और ईमेल एकत्र करता है।
सुरक्षा: किसी शिप किए गए ऐप में अपनी टेनेंट API key को कभी एम्बेड न करें — यह एक सर्वर-टू-सर्वर सीक्रेट है। Flutter SDK केवल प्रति-विज़िटर सेशन टोकन का ही उपयोग करता है, जो एक वितरित क्लाइंट के लिए सुरक्षित है।
§ 05किसमें सर्वर-साइड काम की ज़रूरत है
पूरा फोरग्राउंड चैट अनुभव आज बिना किसी बैकएंड बदलाव के काम करता है। एकमात्र क्षमता जिसमें सर्वर काम की ज़रूरत है, वह है बैकग्राउंड पुश — एक बंद ऐप तक “एजेंट ने जवाब दिया” सूचना पहुँचाना — क्योंकि बैकएंड वर्तमान में केवल एजेंट को ही पुश करता है। इसे सक्षम करने के लिए एक विज़िटर पुश रजिस्ट्री और फ़ैन-आउट ज़रूरी है; तब तक SDK का पुश हुक निष्क्रिय रहता है।
सार्वजनिक लॉन्च से पहले अनुशंसित फ़ॉलो-अप: सेशन निर्माण और मैसेज भेजने पर रेट-लिमिटिंग, एक टोकन-रिफ़्रेश एंडपॉइंट, और फ़ोन मीडिया के लिए HEIC/MOV अपलोड सपोर्ट।