การจัดรูปแบบและการปรับแต่งวิดเจ็ต

ควบคุมรูปลักษณ์ของวิดเจ็ตผ่านตัวเลือก init หรือ UI ของแดชบอร์ด

พรีเซ็ตขนาด#

เลือกจากพรีเซ็ตขนาดที่มีมาให้สามแบบผ่าน chatSize และ launcherSize:

chatSize	หน้าต่างแชท
compact	340 x 460 px
default	380 x 520 px
large	420 x 600 px

launcherSize ควบคุมปุ่มลอยแยกต่างหากจาก chatSize:

launcherSize	Launcher	ไอคอน
small	48 px	22 px
default	60 px	28 px
large	68 px	32 px

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // หน้าต่างแชทกว้างและสูงขึ้น
  launcherSize: 'small'     // ปุ่มลอยเล็กลง
});

การจัดตำแหน่ง#

ปรับตำแหน่งวิดเจ็ตอย่างละเอียดด้วย offsetBottom และ offsetSide (หน่วย เป็นพิกเซล) เมื่อรวมกับ position (bottom-right หรือ bottom-left) จะให้การควบคุมตำแหน่งได้อย่างสมบูรณ์

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // ห่างจากด้านล่าง 40px (ค่าเริ่มต้น: 20)
  offsetSide: 30             // ห่างจากขอบซ้าย 30px (ค่าเริ่มต้น: 20)
});

ความโค้งขอบและ Z-Index#

borderRadius ควบคุม ความโค้งมุมของหน้าต่างแชท (ค่าเริ่มต้น: 20px)zIndex กำหนดลำดับ การซ้อน (ค่าเริ่มต้น: 999999)

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // มุมคมขึ้น
  zIndex: 100000       // z-index ต่ำลงเพื่อเลี่ยงการชนกัน
});

CSS แบบกำหนดเอง#

สำหรับการจัดรูปแบบขั้นสูงเกินกว่าตัวเลือกที่มีให้ ให้ส่งสตริง customCSS โดยจะถูก แทรกเข้าไปใน Shadow DOM ของวิดเจ็ต — สามารถแทนที่สไตล์ใด ๆ ของวิดเจ็ตได้ แต่จะไม่ กระทบต่อหน้าเว็บของคุณ

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* จัดรูปแบบปุ่ม CTA ภายในการ์ดประกาศ */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* จัดวางปุ่ม CTA ของประกาศเป็นแถวแทนการเรียงซ้อนแบบเริ่มต้น */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});

CSS แบบกำหนดเองทำงานภายใน Shadow DOM — แยกออกจากสไตล์ของหน้าเว็บคุณอย่างสมบูรณ์ คุณ สามารถแทนที่คลาสใด ๆ ของวิดเจ็ตได้อย่างปลอดภัยโดยไม่มีผลข้างเคียง

คลาส CSS ที่ใช้ได้:

คลาส	อิลิเมนต์
.respondoai-widget	คอนเทนเนอร์หลัก (ตำแหน่ง, z-index)
.respondoai-launcher	ปุ่มลอย
.respondoai-chat	หน้าต่างแชท
.respondoai-header	แถบส่วนหัวของแชท
.respondoai-messages	คอนเทนเนอร์รายการข้อความ
.respondoai-message.user	บับเบิลข้อความของผู้ใช้
.respondoai-message.assistant	บับเบิลข้อความของบอท
.respondoai-input-area	คอนเทนเนอร์แถบช่องกรอก
.respondoai-input	ช่องกรอกข้อความ
.respondoai-send	ปุ่มส่ง
.respondoai-suggestion-btn	ปุ่มคำถามด่วน
.respondoai-announcement-cta-button	ปุ่ม CTA ภายในการ์ดประกาศ
.respondoai-announcement-ctas	ตัวห่อรอบปุ่ม CTA ในการ์ดประกาศ (เป้าหมายของการจัดวาง)

คุณยังสามารถกำหนดค่าตัวเลือกการจัดรูปแบบทั้งหมดได้จากแดชบอร์ด — ไปที่ Channels → Widget → Appearance การเปลี่ยนแปลงที่ทำในแดชบอร์ด จะถูกส่งไปยังวิดเจ็ตโดยอัตโนมัติผ่าน config API