Web Widget

Web Widget

Web Widget သည် သင့် AI bot မှ လည်ပတ်သော live chat ဝင်းဒိုးကို မည်သည့်ဝဘ်ဆိုဒ်တွင်မဆို တိုက်ရိုက်ထည့်သွင်းနိုင်စေပါသည်။ သင့်အမှတ်တံဆိပ်နှင့် ကိုက်ညီအောင် စိတ်ကြိုက်ပြင်ဆင်ပြီး မိနစ်ပိုင်းအတွင်း ဖြန့်ကျက်နိုင်သည်။

တပ်ဆင်ခြင်း

1. ဘယ်ဘက်မီနူးတွင် Channels → Web Widget သို့ သွားပါ။

2. Create Widget ကိုနှိပ်ပြီး နာမည်တစ်ခု ပေးပါ။

3. Widget ဆက်တင်များကို ပြင်ဆင်ပါ (အောက်ပါ စိတ်ကြိုက်ပြင်ဆင်ခြင်း ကိုကြည့်ပါ)။

4. ပေးထားသော embed code snippet ကို ကော်ပီကူးပါ။

5. Snippet ကို သင့်ဝဘ်ဆိုဒ်၏ HTML တွင် </body> tag ပိတ်မည့်နေရာ မတိုင်မီ ကပ်ထည့်ပါ။

6. သင့်ဆိုဒ်ကို သိမ်းဆည်းပြီး ထုတ်ဝေပါ — widget သည် ချက်ချင်းပေါ်လာမည်ဖြစ်သည်။

Embed Code

<!-- Clienta.ai Web Widget -->
<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
  };
</script>
<script
  src="https://api.clienta.ai/widget/YOUR_WIDGET_ID/loader.js"
  async
></script>

YOUR_BOT_ID နှင့် YOUR_WIDGET_ID ကို သင့် dashboard တွင် ပြသထားသောတန်ဖိုးများဖြင့် အစားထိုးပါ။

Note

Widget script သည် အဆင်ပြေသောအချိန်တွင် ဖတ်ရှုလာပြီး သင့်စာမျက်နှာ load ဝင်မှုကို ပိတ်ဆို့မည်မဟုတ်ပါ။

စိတ်ကြိုက်ပြင်ဆင်ခြင်း

ရွေးချယ်မှု	ဖော်ပြချက်
Theme Color	သင့်အမှတ်တံဆိပ်နှင့် ကိုက်ညီသော အဓိကအရောင်ကို သတ်မှတ်ပါ (hex code သို့မဟုတ် color picker)
Welcome Message	အသုံးပြုသူ widget ကိုဖွင့်သောအခါ ပထမဆုံးပြသသော မက်ဆေ့ဂျ်
Position	မျက်နှာပြင်တွင် ညာဘက်အောက် သို့မဟုတ် ဘယ်ဘက်အောက် ချထားမည့်နေရာ ရွေးချယ်ပါ
Avatar	Bot အတွက် စိတ်ကြိုက် avatar ပုံတင်ပါ

နောက်ထပ်ရွေးချယ်မှုများ ပါဝင်သည်-

• Widget Title — Widget header တွင် ပြသသောနာမည်
• Placeholder Text — မက်ဆေ့ဂျ် input box အတွင်း hint စာသား
• Auto-Open Delay — Widget ကို N စက္ကန့်ကြာပြီးနောက် အလိုအလျောက်ဖွင့်သည် (ရွေးချယ်နိုင်)
• Hide on Mobile — မိုဘိုင်းစက်ပစ္စည်းများတွင် widget မြင်ရနိုင်မှုကို toggle လုပ်ပါ

လုပ်ငန်းဆောင်တာပုံစံ

1. အသုံးပြုသူ widget ကိုဖွင့်သည် — Chat ဝင်းဒိုးသည် စာမျက်နှာ၏ ထောင့်မှ ဆွဲချထွက်လာသည်။

2. Bot သို့ မက်ဆေ့ဂျ်ပေးပို့သည် — အသုံးပြုသူ၏ မက်ဆေ့ဂျ်ကို လုံခြုံသော WebSocket ချိတ်ဆက်မှုမှတဆင့် Clienta.ai သို့ ပေးပို့သည်။

3. AI မှ ပြုလုပ်ဆောင်ရွက်ပြီး တုံ့ပြန်သည် — Bot မှ knowledge base မှ သက်ဆိုင်ရာ အကြောင်းအရာကို ရယူပြီး ပြန်ကြားချက် ထုတ်ပေးသည်။

4. လိုအပ်ပါက လူသားထံ လွှဲပြောင်းသည် — ယုံကြည်မှုနည်းပါးသည် သို့မဟုတ် အသုံးပြုသူမှ လူတစ်ဦးကို တောင်းဆိုပါက၊ Conversations inbox မှတဆင့် ရနိုင်သောAgent တစ်ဦးထံ စကားဝိုင်းကို ညွှန်းပေးသည်။

ဆက်သွယ်ရေးပုံစံ

v1.6.8

AI bot offline ဖြစ်နေသည် သို့မဟုတ် တုံ့ပြန်၍ မရသောအခါ widget တွင် CTA balloon ပြသပြီး ဧည့်သည်ကို ၎င်းတို့၏ ဆက်သွယ်ရေးအချက်အလက်များ ချန်ထားရန် တိုက်တွန်းသည်။ Balloon ကိုနှိပ်ခြင်းဖြင့် ဆက်သွယ်ရေးပုံစံ ဖွင့်ပေးသည်-

နယ်ပယ်	လိုအပ်မှု	မှတ်ချက်
Email	ဟုတ်သည်	နောက်ဆက်တွဲအတွက် အမြဲတမ်းလိုအပ်သည်
Phone	မဟုတ်	နိုင်ငံကုဒ် ရွေးချယ်မှု (+66, +1, +81, +86) ပါဝင်သည်
Name	မဟုတ်	ဧည့်သည်နာမည်
Message	မဟုတ်	နောက်ထပ်အကြောင်းအရာ

ဆက်သွယ်ရေးပုံစံ တင်သွင်းမှုသည် admin Tickets စာမျက်နှာတွင် မြင်ရသော ticket တစ်ခု ဖန်တီးပေးပြီး email နှင့် ဖုန်းနှစ်ခုစလုံး ပေးထားပါက နှစ်ခုလုံးကို ပြသသည်။

ဖြေရှင်းပြီးနောက် စကားဝိုင်းအသစ်

v1.6.8

Agent တစ်ဦးမှ စကားဝိုင်းတစ်ခုကို ဖြေရှင်းပြီးသောအခါ widget တွင် စနစ်အသိပေးချက်နှင့် “Start New Chat” ခလုတ်ပြသသည်။ ၎င်းကိုနှိပ်ခြင်းဖြင့်-

1. လက်ရှိ စကားဝိုင်းမှတ်တမ်းကို ရှင်းလင်းသည်
2. WebSocket session အသစ်ဖြင့် ပြန်လည်ချိတ်ဆက်သည်
3. Widget ကို ၎င်း၏ မူလအခြေအနေသို့ ပြန်ရောက်စေသည်

ဒါဟာ ဧည့်သည်များကို စာမျက်နှာ refresh မလုပ်ဘဲ စကားဝိုင်းအသစ် စတင်နိုင်စေသည်။

WebSocket အချိန်နှင့်တပြေးညီ

Widget သည် အချိန်နှင့်တပြေးညီ၊ နောက်ကျမှုနည်းသော မက်ဆေ့ဂျ်ပို့ဆောင်ရေးအတွက် တည်တံ့သော WebSocket ချိတ်ဆက်မှုကို အသုံးပြုသည်။ အဓိကအပြုအမူများ-

• Auto-reconnect — ချိတ်ဆက်မှုကျသွားပါက client မှ အလိုအလျောက်ပြန်ချိတ်ဆက်သည်။
• Typing indicator — Bot မှ တုံ့ပြန်ချက် ထုတ်ပေးနေစဉ် typing အနိမেးရှင်ပြသသည်။
• Agent typing indicator — v1.6.8 လူသားAgent တစ်ဦးမှ ပြန်ကြားချက် ရေးနေသောအခါ widget တွင် ဧည့်သည်ထံ typing အနိမေးရှင် အချိန်နှင့်တပြေးညီ ပြသသည်။
• Message history — တူညီသော browser session အတွင်း စကားဝိုင်းမှတ်တမ်းကို ထိန်းသိမ်းထားသည်။
• Cross-tab sync — အသုံးပြုသူမှ tabs အများကြီး ဖွင့်ထားပါက စကားဝိုင်းအခြေအနေကို sync ချသည်။

Markdown တုံ့ပြန်မှုများ

v1.6.4

AI နှင့် agent မက်ဆေ့ဂျ်များကို ရိုးရိုးစာသားအစား ဖော်မတ်ချထားသော markdown အနေဖြင့် ပေးဆောင်သည်။ ပံ့ပိုးထားသော ဖော်မတ်ချခြင်းများ ပါဝင်သည်-

• Bold၊ italic၊ strikethrough
• Links (အလိုအလျောက် tab အသစ်တွင် ဖွင့်သည်)
• Inline code နှင့် fenced code blocks
• အမှတ်ဂဏန်းပါ နှင့် မပါသော စာရင်းများ
• Headings၊ blockquotes နှင့် ဇယားများ

Markdown အကြောင်းအရာအားလုံးကို XSS တိုက်ခိုက်မှု ကာကွယ်ရန် ခွင့်ပြုစာရင်းကြီးဖြင့် ကာကွယ်သည်။ မည်သည့် ပြင်ဆင်မှုမျှ မလိုအပ်ပါ — AI နှင့် agent တုံ့ပြန်မှုများအားလုံးအတွက် markdown ပေးဆောင်ခြင်းကို မူရင်းအနေဖြင့် ဖွင့်ထားသည်။ အသုံးပြုသူ မက်ဆေ့ဂျ်များမှာ ရိုးရိုးစာသားအနေဖြင့်သာ ကျန်ရှိသည်။

Brand Avatar

v1.6.4

Widget header နှင့် home screen တွင် သင့်အမှတ်တံဆိပ်လိုဂို သို့မဟုတ် စိတ်ကြိုက် avatar ပြသပါ။ Settings → Channels → Web → Customizer တွင် avatarUrl ကို သတ်မှတ်ပါ သို့မဟုတ် embed code တွင် config.theme.avatarUrl အနေဖြင့် ဖြတ်သန်းပေးပါ။

• https:// URLs များသာ လက်ခံသည်
• URL မှားယွင်းနေပါက သို့မဟုတ် ပုံ load မဝင်ပါက မူရင်း sparkle icon ပြသသည်
• အကောင်းဆုံး ရလဒ်အတွက် နှစ်ဖက်ညီပုံ (ဥပမာ 128 × 128 px) အသုံးပြုရန် အကြံပြုသည်

အသေးစိတ်အတွက် Widget Customization — Avatar ကိုကြည့်ပါ။

AI နှင့် လူသားတံဆိပ်များ

v1.6.4

အသုံးပြုသူမဟုတ်သော မက်ဆေ့ဂျ်တိုင်းတွင် ပေးပို့သူကို ဖော်ထုတ်သော သေးငယ်သောရေးသားသူတံဆိပ် ပြသသည်-

ရေးသားသူအမျိုးအစား	ပြသသောတံဆိပ်
AI bot	”AI Assistant” (ဒေသဘာသာပြန်ထားသည်)
လူသားAgent	Agent ၏နာမည် (ဥပမာ “Sarah”)

တံဆိပ်များကို ပံ့ပိုးထားသော ဘာသာ 15 ခုတွင် ဒေသဘာသာပြန်ထားပြီး screen reader များမှ ဝင်ရောက်နိုင်သည်။ ဒါဟာ ဧည့်သည်များကို AI ထုတ်လုပ်သော နှင့် လူသားတုံ့ပြန်မှုများကို ရှင်းလင်းစွာ ခွဲခြားနိုင်စေပြီး ပွင့်လင်းမြင်သာမှု အကောင်းဆုံးနည်းလမ်းများကို ထောက်ပံ့သည်။

နှုတ်ဆက်စကား ဘာသာစကား

v1.6.2

Widget နှုတ်ဆက်စကားမက်ဆေ့ဂျ်သည် ဘာသာစကားပုံစံ သုံးမျိုးကို ပံ့ပိုးပြီး Settings → Channels → Web → Customizer → Greeting Mode တွင် ပြင်ဆင်နိုင်သည်-

ပုံစံ	အပြုအမူ
Static	ဘာသာစကားမည်သို့ပင်ဖြစ်ပါစေ ဧည့်သည်တိုင်းကို တူညီသောနှုတ်ဆက်စကား ပြသသည်
Match Visitor	ဘာသာစကားတစ်ခုချင်းစီ နှုတ်ဆက်စကားပြသသည် — ဒေသ 15 ခုအတွက် နှုတ်ဆက်စကားစာသား မတူညီအောင် ပြင်ဆင်ပါ
Org-Main	အမြဲတမ်း အဖွဲ့အစည်း၏ အဓိကတုံ့ပြန်ရေးဘာသာစကားဖြင့် နှုတ်ဆက်စကား ပြသသည် (AI Settings တွင် သတ်မှတ်ထားသည်)

Match Visitor ပုံစံတွင်၊ ပြင်ဆင်ထားသောနှုတ်ဆက်စကားမရှိသော မည်သည့်ဒေသမဆို static နှုတ်ဆက်စကားစာသားသို့ ပြောင်းသွားသည်။

တဆင့်ချင်း ပြင်ဆင်ခြင်းအတွက် Widget Customization — Greeting Mode ကိုကြည့်ပါ။

ဘာသာစကားရွေးချယ်မှု

v1.6.2

Widget သည် header တွင် globe icon ပြသနိုင်ပြီး ဧည့်သည်များကို ၎င်းတို့ နှစ်သက်ရာ ဘာသာစကားကို ကိုယ်တိုင်ရွေးချယ်နိုင်စေသည်။ ဤလုပ်ဆောင်မှုသည် မူရင်းအနေဖြင့် ပိတ်ထားပြီး Settings → Channels → Web → Customizer တွင် widget တစ်ခုချင်းစီအတွက် ဖွင့်ရမည်ဖြစ်သည်။

ဖွင့်ထားသောအခါ-

• Widget header တွင် globe (🌐) icon ပေါ်လာသည်
• ဧည့်သည်များသည် ပံ့ပိုးထားသော ဒေသ 15 ခုမှ ရွေးချယ်နိုင်သည်
• ဘာသာစကားတစ်ခုရွေးချယ်ခြင်းသည် session အတွက် AI တုံ့ပြန်မှုများအားလုံးကို ထို ဘာသာစကားသို့ သော့ပိတ်ပြီး အလိုအလျောက်ရှာဖွေတွေ့ရှိမှုကို မလုပ်ဆောင်တော့ပါ
• ဧည့်သည်မှ မတူညီသောဘာသာစကားဖြင့် ရိုက်ထည့်ပါကလည်း သော့ပိတ်မှု ဆက်လက်သက်ရောက်နေသည်

Note

ဘာသာစကားရွေးချယ်မှု သော့ပိတ်ခြင်းသည် အလိုအလျောက်ရှာဖွေတွေ့ရှိမှုထက် ဦးစားပေးသည်သော်လည်း AI Settings တွင် Force this language ဆက်တင်မှ မလွှမ်းမိုးနိုင်ပါ။ Force ဖွင့်ထားပါက ဧည့်သည်ရွေးချယ်မှုမည်သို့ပင်ဖြစ်ပါစေ အဖွဲ့အစည်းဘာသာစကားသာ အနိုင်ရမည်ဖြစ်သည်။

RTL (ညာမှဘယ်) ထောက်ပံ့မှု

v1.6.2

Widget နှင့် landing page သည် အာရဗီ နှင့် ဟီးဘရူးဘာသာစကားအတွက် RTL အပြင်အဆင် ကို အပြည့်အဝ ပံ့ပိုးသည်။ ဧည့်သည်တစ်ဦးမှ RTL ဒေသကို အသုံးပြုသောအခါ-

• အပြင်အဆင်တစ်ခုလုံး ကွန်ပြောင်းသည် (စာသားချိန်ညှိမှု၊ navigation၊ UI အစိတ်အပိုင်းများ)
• <html dir="rtl"> attribute ကို အလိုအလျောက်သတ်မှတ်သည်
• Chat မက်ဆေ့ဂျ်များနှင့် input box သည် RTL ဖတ်ရှုပုံစံအတွက် မှန်ကန်စွာ ချိန်ညှိသည်

မည်သည့် လက်တွေ့ပြင်ဆင်မှုမျှ မလိုအပ်ပါ — RTL သည် ရွေးချယ်ထားသောဒေသပေါ်အခြေခံ၍ အလိုအလျောက် အသက်ဝင်သည်။

Mount Timeout Fallback

v1.6.5

Widget script (widget.js) မှ စက္ကန့် 10 အတွင်း load မဝင်ပါက embed တွင် ကွက်လပ်ပြသမည့်အစား fallback UI ပြသသည်။ Fallback တွင် retry ခလုတ်ပါဝင်ပြီး ဧည့်သည်မှ စာမျက်နှာ refresh မလုပ်ဘဲ widget ကို ပြန်ဖတ်ရှုရန် ကြိုးစားနိုင်သည်။

ဒါဟာ ကွန်ရက်ပြဿနာများ၊ ad blockers သို့မဟုတ် CDN ရပ်တန့်မှုများကြောင့် widget mount မဖြစ်သောအခါ အသုံးပြုသူအတွေ့အကြုံကို ကာကွယ်သည်။

Plan အလိုက် Channel အကန့်အသတ်များ

Plan	အများဆုံး Channels
Free	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Enterprise	50

Tip

Widget ကို domain အများကြီးတွင် လိုအပ်ပါသလား? Domain တစ်ခုတိုင်းတွင် ၎င်း၏ widget ပြင်ဆင်မှု လိုအပ်သည်။ Analytics ကို သီးခြားခြေရာခံရန် domain တစ်ခုလျှင် widget တစ်ခု ဖန်တီးပါ။