Skip to content
Clienta.ai

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

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

Section titled “Widget စိတ်ကြိုက်ပြင်ဆင်ခြင်း”

သင့် brand နှင့် ဝဘ်ဆိုဒ် ဒီဇိုင်းနှင့် ကိုက်ညီစေရန် chat widget ၏ ပုံသဏ္ဌာန်ကို ကိုယ်ပိုင်ပြင်ဆင်ပါ။

ဆက်တင်များ

Section titled “ဆက်တင်များ”

Widget စိတ်ကြိုက်ပြင်ဆင်ရေး ရွေးချယ်စရာများအားလုံးကို Settings → Channels → Web တွင် ရနိုင်သည်။ သင်၏ web channel ကို ရွေးချယ်ပြီး Appearance တက်ကို ဖွင့်ပါ။

အပြင်အဆင် အရောင်

Section titled “အပြင်အဆင် အရောင်”

အပြင်အဆင် အရောင်ကို widget တစ်ခုလုံးတွင် တသမတ်တည်း အသုံးပြုသည်—

  • Launcher ခလုတ် နောက်ခံ
  • Header bar နောက်ခံ
  • Send ခလုတ် အရောင်
  • Link မီးမောင်း အရောင်
  • အသုံးပြုသူ မက်ဆေ့ဂျ် bubble နောက်ခံ

သင်၏ brand အထိမ်းအမှတ်နှင့် ကိုက်ညီပြီး အဖြူရောင် စာသားနှင့် contrast ကောင်းမွန်သော အရောင်ကို ရွေးချယ်ပါ။

ဒုတိယ အရောင်

Section titled “ဒုတိယ အရောင်”
v1.6.11

Highlights နှင့် icons ကဲ့သို့ ဒုတိယ UI elements များအတွက် ရွေးချယ်ရမည့် accent color တစ်ခု။ မသတ်မှတ်ပါက primary color ၏ hue ကို 10° ပြောင်းလဲ၍ ဒုတိယ အရောင်ကို အလိုအလျောက် ရရှိသည်။

မူလ— Primary color မှ အလိုအလျောက် ရရှိ (hue + 10°)

ဖော်မတ်— 6 လုံး hex (#RRGGBB)

Dashboard မှတဆင့်— Settings → Channels → Web → Customizer → Secondary Color တွင် သတ်မှတ်ပါ။

Embed Code မှတဆင့်— theme configuration တွင် secondaryColor ကို ထည့်ပါ—

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      secondaryColor: "#0062cc"
    }
  };
</script>

ကြိုဆိုသည့် မက်ဆေ့ဂျ်

Section titled “ကြိုဆိုသည့် မက်ဆေ့ဂျ်”

ကြိုဆိုသည့် မက်ဆေ့ဂျ်သည် customers widget ဖွင့်သောအခါ အရင်ဆုံး မြင်ရသော စာသားဖြစ်သည်။ ဖော်ရွေဖော်ရွေ ရေးပြီး bot က ဘာကူညီနိုင်သည်ကို ရှင်းရှင်းလင်းလင်း ဖော်ပြပါ။

ဥပမာများ—

  1. “မင်္ဂလာပါ! ယနေ့ ဘာကူညီပေးရမလဲ?”
  2. “Acme Support မှ ကြိုဆိုပါသည်။ ကျွန်ုပ်တို့ ထုတ်ကုန်နှင့် ဝန်ဆောင်မှုများအကြောင်း မည်သည့်မေးခွန်းမဆို မေးနိုင်သည်။”
  3. “မင်္ဂလာပါ! ကူညီဖို့ ဒီမှာ ရှိပါတယ်။ ဘာကူညီပေးရမလဲ?”

Widget တည်နေရာ

Section titled “Widget တည်နေရာ”
တည်နေရာဆက်တင် တန်ဖိုးမည်သောအခါ သုံးရမည်
အောက်-ညာbottom-right (ပုံမှန်)ပုံမှန် နေရာချထားမှု၊ sites အများစုနှင့် သင့်တော်သည်
အောက်-ဘယ်bottom-leftညာဘက် အခြား elements နှင့် ပဋိပက္ခ ဖြစ်သောအခါ

Avatar

Section titled “Avatar”
v1.6.4

ပုံ URL တစ်ခု ပေးဆောင်ခြင်းဖြင့် widget header နှင့် home screen တွင် စိတ်ကြိုက် avatar တစ်ခု ပြသပါ။

Dashboard မှတဆင့်— Settings → Channels → Web → Customizer → Avatar URL တွင် avatar URL ကို သတ်မှတ်ပါ။

Embed Code မှတဆင့်— theme configuration တွင် avatarUrl ကို ထည့်ပါ—

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

လိုအပ်ချက်များ—

  • https:// URL ဖြစ်ရမည် (http, data:, နှင့် javascript: URL များကို လုံခြုံရေးအတွက် ငြင်းဆန်သည်)
  • အကြံပြုထားသော အရွယ်အစား— 128 × 128 pixels (စတုရန်း)
  • ထောက်ပံ့သော ဖော်မတ်များ— PNG, JPG, WebP, SVG
  • URL မမှန်ကန်လျှင် သို့မဟုတ် ပုံ load မဝင်လျှင် မူလ icon ကို ပြသသည်

Launcher Icon

Section titled “Launcher Icon”
v1.6.11

Launcher button ပေါ်ရှိ မူလ chat bubble SVG ကို custom icon နှင့် အစားထိုးပါ။

မူလ— Built-in chat bubble SVG icon

ဖော်မတ်— ပုံသို့ https:// URL (လုံခြုံရေးအတွက် http:// ကို ငြင်းဆန်သည်)

အကြံပြုချက်— 28 × 28 pixels, ပွင့်လင်းမှုနှင့် PNG သို့မဟုတ် SVG

Dashboard မှတဆင့်— Settings → Channels → Web → Customizer → Bubble Icon တွင် သတ်မှတ်ပါ။

Embed Code မှတဆင့်— theme configuration တွင် bubbleIcon ကို ထည့်ပါ—

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      bubbleIcon: "https://example.com/your-icon.png"
    }
  };
</script>

လိုအပ်ချက်များ—

  • https:// သုံးရမည် (http:// နှင့် အခြား protocols များကို လုံခြုံရေးအတွက် ငြင်းဆန်သည်)
  • URL load မဝင်လျှင် မူလ SVG icon ကို အလိုအလျောက် ပြသသည်

နှုတ်ဆက်ကြောင်း Mode

Section titled “နှုတ်ဆက်ကြောင်း Mode”
v1.6.2

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

Static

Section titled “Static”

ဘာသာစကားမရွေး visitor တိုင်းကို တူညီသော နှုတ်ဆက်ကြောင်း စာသား ပြသသည်။ ၎င်းသည် မူလ mode ဖြစ်သည်။

စာသားနယ်ပယ်တွင် နှုတ်ဆက်ကြောင်း တစ်ခုထည့်ပါ။ ဥပမာ— “မင်္ဂလာပါ! ယနေ့ ဘာကူညီပေးရမလဲ?”

Match Visitor (locale)

Section titled “Match Visitor (locale)”

ဘာသာစကားတစ်ခုချင်းစီအတွက် နှုတ်ဆက်ကြောင်း ကွဲပြားအောင် ပြသသည်။ Widget သည် visitor ၏ ရှာဖွေတွေ့ရှိသော ဘာသာစကားကို ဖတ်ပြီး ကိုက်ညီသော နှုတ်ဆက်ကြောင်းကို ပြသသည်။

  1. Match Visitor mode ကို ရွေးချယ်ပါ။
  2. ထောက်ပံ့သော locale 15 ခုတစ်ခုချင်းစီအတွက် နယ်ပယ်တစ်ခု ပေါ်လာသည်။
  3. ထောက်ပံ့လိုသော ဘာသာစကားတစ်ခုချင်းစီအတွက် နှုတ်ဆက်ကြောင်း စာသားကို ဖြည့်ပါ။
  4. ထိုဘာသာစကားအတွက် Static နှုတ်ဆက်ကြောင်းသို့ ပြန်သွားရန် locale နယ်ပယ်ကို ဗလာထားပါ။

ဥပမာ setup—

  • ထိုင်း— “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
  • အင်္ဂလိပ်— “Hi! How can I help you today?”
  • ဂျပန်— “こんにちは！何かお手伝いできますか？“

Org-Main

Section titled “Org-Main”

Visitor ၏ ဘာသာစကားမရွေး၊ နှုတ်ဆက်ကြောင်းကို အဖွဲ့အစည်း၏ ပင်မ တုံ့ပြန်မှု ဘာသာစကားဖြင့် အမြဲပြသသည်။ ဤ mode သည် AI Settings → Main Response Language တွင် သတ်မှတ်ထားသော ဘာသာစကားကို ဖတ်သည်။

သင်၏ အဖွဲ့အစည်းသည် ဘာသာစကားတစ်မျိုးတည်းဖြင့် လုပ်ဆောင်ပြီး နှုတ်ဆက်ကြောင်းများ တသမတ်တည်း ဖြစ်စေလိုသောအခါ Org-Main ကို သုံးပါ။

ဘာသာစကား ရွေးချယ်ကိရိယာ

Section titled “ဘာသာစကား ရွေးချယ်ကိရိယာ”
v1.6.2

ဘာသာစကား ရွေးချယ်ကိရိယာသည် visitor များ မိမိဘာသာစကား ကိုယ်တိုင် ရွေးချယ်နိုင်ရန် widget header တွင် globe icon (🌐) တစ်ခု ထည့်သည်။ ၎င်းသည် မူလအားဖြင့် ပိတ် ထားသည်။

ဖွင့်ရန်— Settings → Channels → Web → Customizer တွင် Show Language Selector ကို ON သို့ ပြောင်းပါ။

Visitor သည် dropdown မှ ဘာသာစကားတစ်ခု ရွေးချယ်သောအခါ—

  • AI တုံ့ပြန်မှုများအားလုံးကို session တစ်ခုလုံးအတွက် ထိုဘာသာစကားဖြင့် သော့ခတ်သည်
  • Visitor ဘာသာစကားမတူဘဲ ရိုက်ထည့်လျှင်တောင် auto-detection ကို ဦးစားပေး သော့ခတ်မှုက အနိုင်ယူသည်
  • Widget UI သည် ရွေးချယ်သော ဘာသာစကားသို့ ပြောင်းသည်

အပြည့်အစုံ အပြုအမူ ခြုံငုံသုံးသပ်ချက်အတွက် Web Widget — Language Selector ကို ကြည့်ပါ။

မူလ ဘာသာစကား

Section titled “မူလ ဘာသာစကား”
v1.6.8

Auto-detection မဖြစ်မီ visitor များ သင်နှစ်သက်သော locale ဖြင့် UI ကို မြင်ရစေရန် widget အတွက် မူလ ဘာသာစကားကို သတ်မှတ်ပါ။ Settings → Channels → Web → Customizer → Default Language သို့ သွားပြီး dropdown မှ ရွေးချယ်ပါ။

ဘာသာစကား ဦးစားပေး ကွင်းဆက်မှာ—

  1. ဤဘာသာစကား အသုံးပြုရန် အတင်းအကြပ် (AI Settings) — ဖွင့်ထားလျှင် အရာအားလုံးကို ကျော်လွှားသည်
  2. Visitor ၏ ကိုယ်တိုင် ရွေးချယ်မှု (ဘာသာစကား ရွေးချယ်ကိရိယာမှတဆင့်၊ ဖွင့်ထားလျှင်)
  3. မူလ ဘာသာစကား — ဤဆက်တင်
  4. Embed config locale — embed code ရှိ locale တန်ဖိုး
  5. ထိုင်း — အခြားအရာ မသတ်မှတ်ထားလျှင် fallback

Embed code ၏ locale တန်ဖိုးကို အားထားရန် ဤဆက်တင်ကို ကျော်လွှားလိုလျှင် “None — follow embed config” ကို ရွေးပါ။

Dark Mode နှင့် CSS Variables

Section titled “Dark Mode နှင့် CSS Variables”
v1.6.8

Widget သည် visitor များ chat header မှ ဖွင့်နိုင်သော built-in dark mode toggle ကို ထောက်ပံ့သည်။ Widget UI တစ်ခုလုံးကို CSS custom properties ဖြင့် theme လုပ်ထားပြီး mode နှစ်မျိုးလုံးတွင် တသမတ်တည်း ပုံသဏ္ဌာန် ရှိစေသည်။

အဓိက CSS Variables

Section titled “အဓိက CSS Variables”
Variableဖော်ပြချက်
--cw-primaryပင်မ brand အရောင် (သင်၏ theme color ဆက်တင်မှ)
--cw-primary-rgbပင်မ အရောင်၏ RGB အစိတ်အပိုင်းများ၊ transparency effects အတွက် သုံးသည်
--cw-bgWidget နောက်ခံ အရောင်
--cw-bg-secondaryအကြောင်းအရာ နောက်ခံ (input fields, form elements)
--cw-surfacecards, tooltips, citation snippets အတွက် surface အရောင်
--cw-textပင်မ စာသား အရောင်
--cw-text-secondaryအကြောင်းအရာ/မှိန်သော စာသား အရောင်
--cw-borderပိုင်းခြားကြောင်းများနှင့် input outline များအတွက် border အရောင်

Dark mode ပြောင်းသောအခါ widget သည် root container တွင် cw-dark သို့မဟုတ် cw-light class ကို ထည့်ပြီး CSS variables အားလုံး အလိုအလျောက် ပြောင်းသည်။ Gradient header, message bubbles, contact form, နှင့် citation chips အားလုံးသည် လက်ရှိ mode ကို လိုက်နာသည်။

အကြိုကြည့်ရှုခြင်း

Section titled “အကြိုကြည့်ရှုခြင်း”

ပြောင်းလဲမှုများ ပြုလုပ်ပြီးနောက် သိမ်းဆည်းမတိုင်မီ သင်၏ site တွင် widget မည်သို့ ပေါ်မည်ကို တိတိကျကျ ကြည့်ရှုရန် ဆက်တင် page ညာဘက်ရှိ Live Preview panel ကို အသုံးပြုပါ။

အကြံပြုချက်များ

Section titled “အကြံပြုချက်များ”