§ 00جائزہ
Flutter SDK وہی anonymous ویجٹ پروٹوکول بولتا ہے جو آپ کی ویب سائٹ کی چیٹ استعمال کرتی ہے — تاکہ صارفین آپ کی موبائل ایپ کے اندر ہی سے سپورٹ تک پہنچ سکیں، انہی گفتگوؤں پر جنہیں آپ کے ایجنٹ پہلے سے مشترکہ ان باکس میں سنبھالتے ہیں۔
یہ دو پیکجز کے طور پر فراہم کیا جاتا ہے:
easylivechat— headless پروٹوکول کلائنٹ بمع reactive state، کوئی UI نہیںeasylivechat_ui— پہلے سے تیار شدہ، تھیم کے قابل ویجٹس — launcher، چیٹ اسکرین، pre-chat form، اٹیچمنٹس، CSAT
§ 01انسٹال
SDK کو اپنی ایپ کی pubspec.yaml میں شامل کریں۔ زیادہ تر ایپس کو easylivechat_ui درکار ہوتا ہے — یہ core کو دوبارہ ایکسپورٹ کرتا ہے۔ صرف اسی صورت میں headless 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فوری آغاز (drop-in UI)
کلائنٹ کو اپنے workspace slug کے ساتھ ایک بار boot کریں، پھر اپنے ویجٹ ٹری میں ایک launcher شامل کریں۔ بَبل ایک مکمل طور پر منسلک چیٹ کھولتا ہے: pre-chat form، ریئل ٹائم تھریڈ، ٹائپنگ، اٹیچمنٹس، 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 اپنے ڈیش بورڈ میں تلاش کریں۔ launcher پہلی بار کھلنے پر lazily boot ہوتا ہے؛ ایک پائیدار storage پاس کریں تاکہ وزیٹر کی شناخت ایپ ری اسٹارٹس کے بعد بھی برقرار رہے۔
§ 03Headless (اپنا UI بنائیں)
اپنے ڈیزائن سسٹم کو ترجیح دیتے ہیں؟ headless کلائنٹ کو براہِ راست چلائیں۔ ہر چیز ValueListenables اور Streams کے طور پر ظاہر کی جاتی ہے جنہیں آپ کسی بھی state management سے bind کر سکتے ہیں۔
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() پورے لائف سائیکل کو ترتیب دیتا ہے: config حاصل کرنا، کسی بھی کھلی گفتگو کو دوبارہ شروع کرنا، pre-chat form پر gate کرنا یا anonymously آغاز کرنا، پھر ریئل ٹائم سوکٹ سے جُڑنا۔
§ 04یہ کیسے کام کرتا ہے
جب کوئی سیشن کھلتا ہے، تو سرور ہر گفتگو کے لیے ایک مختصر مدت کا ٹوکن بناتا ہے۔ SDK اسے REST کالز اور ریئل ٹائم سوکٹ کے لیے استعمال کرتا ہے، اس کی میعاد ختم ہونے سے پہلے شفاف طریقے سے اسے دوبارہ بناتا ہے، اور جب موبائل نیٹ ورک منقطع ہو تو gap-safe بیک فِل کے ساتھ دوبارہ جُڑ جاتا ہے۔
ہر چیز anonymous-first ہے: SDK ڈیوائس پر ایک پائیدار وزیٹر id تیار کرتا ہے — کسی لاگ اِن کی ضرورت نہیں — اور اختیاری طور پر tenant pre-chat form کے ذریعے نام اور ای میل اکٹھا کرتا ہے۔
سیکیورٹی: اپنی tenant API key کو کبھی شِپ کی گئی ایپ میں شامل نہ کریں — یہ ایک سرور ٹو سرور خفیہ راز ہے۔ Flutter SDK ہمیشہ صرف ہر وزیٹر کا سیشن ٹوکن استعمال کرتا ہے، جو ایک distributed کلائنٹ کے لیے محفوظ ہے۔
§ 05کس چیز کے لیے سرور سائیڈ کام درکار ہے
مکمل فورگراؤنڈ چیٹ تجربہ آج بغیر کسی بیک اینڈ تبدیلی کے کام کرتا ہے۔ واحد صلاحیت جس کے لیے سرور کا کام درکار ہے وہ بیک گراؤنڈ پُش ہے — یعنی بند ایپ پر ”ایجنٹ نے جواب دیا“ کی نوٹیفکیشن پہنچانا — کیونکہ بیک اینڈ فی الحال صرف ایجنٹس کو پُش بھیجتا ہے۔ اسے فعال کرنے کے لیے ایک وزیٹر پُش رجسٹری اور فین آؤٹ درکار ہے؛ تب تک SDK کا پُش ہُک غیر فعال رہتا ہے۔
عوامی لانچ سے پہلے تجویز کردہ فالو اپس: سیشن بنانے اور پیغام بھیجنے پر rate-limiting، ایک token-refresh endpoint، اور فون میڈیا کے لیے HEIC/MOV اپ لوڈ سپورٹ۔