การปรับสไตล์

วิดเจ็ตแสดงผลเป็นแถบสไตล์กลาสมอร์ฟิก พร้อมธีมสว่างและมืดในตัว การปรับแต่งมีให้ใช้งาน 3 ระดับ ได้แก่ พร็อพสำหรับตัวเลือกทั่วไป CSS custom properties สำหรับกำหนดธีม และการแทนที่ CSS class เพื่อการควบคุมอย่างเต็มรูปแบบ

ธีม

พร็อพ theme ควบคุมโครงร่างสีของวิดเจ็ต โดยจะใช้ class tp--light หรือ tp--dark กับรากของวิดเจ็ต:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>

ทั้งสองธีมใช้ดีไซน์แถบสไตล์กลาสมอร์ฟิก พร้อมเอฟเฟกต์เบลอพื้นหลังและความโปร่งใสอย่างละเอียดอ่อน

คุณสมบัติแบบกำหนดเองของ CSS

วิดเจ็ตเปิดเผยคุณสมบัติแบบกำหนดเองของ CSS (ตัวแปร) ที่คุณสามารถแทนที่เพื่อเปลี่ยนสีได้โดยไม่ต้องแก้ไขแต่ละคลาส คุณสมบัติเหล่านี้กำหนดโดยคลาสธีม (.tp--light หรือ .tp--dark) ที่ใช้กับราก .tp-widget:

การแทนที่คุณสมบัติแบบกำหนดเอง

ตั้งค่าสีเน้นผ่านพร็อพ primaryColor:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>

แทนที่คุณสมบัติแบบกำหนดเองอื่นด้วย CSS ใช้ตัวเลือกแบบ 2 คลาส (.tp-widget.tp--light / .tp-widget.tp--dark) เพื่อให้กฎของคุณมีลำดับความสำคัญเหนือคลาสธีมที่กำหนดค่าเริ่มต้น โดยไม่ขึ้นกับลำดับของสไตล์ชีต:

.tp-widget.tp--light {
  --tp-bg: rgba(0, 0, 0, 0.9);
  --tp-text: rgba(255, 255, 255, 0.95);
  --tp-text-2: rgba(255, 255, 255, 0.55);
  --tp-border: rgba(255, 255, 255, 0.15);
}

คลาส CSS

คลาสวิดเจ็ตทั้งหมดมีคำนำหน้า tp- เพื่อหลีกเลี่ยงความขัดแย้งกับสไตล์ที่มีอยู่ของคุณ

ตัวอย่าง

สีเน้นแบบกำหนดเองผ่านพร็อพ

วิธีที่ง่ายที่สุดในการสร้างแบรนด์ให้วิดเจ็ต:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="light"
  primaryColor="#059669"
  title="Talk to support"
/>

สีแบบกำหนดเองผ่าน CSS

แทนที่คุณสมบัติแบบกำหนดเองเพื่อควบคุมสีได้อย่างเต็มรูปแบบ โปรดจำไว้ว่าสีเน้นมาจากพร็อพ primaryColor ไม่ใช่ CSS:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>

/* Emerald theme for everything else */
.tp-widget.tp--light {
  --tp-bg: rgba(236, 253, 245, 0.85);
  --tp-text: rgba(6, 78, 59, 0.95);
  --tp-text-2: rgba(4, 120, 87, 0.8);
  --tp-border: rgba(5, 150, 105, 0.2);
}

ขนาดแบบกำหนดเอง

ทำให้วิดเจ็ตใหญ่ขึ้นหรือเล็กลงโดยปรับขนาดของแถบ ปุ่ม และข้อความ:

/* Wider bar */
.tp-bar {
  width: 340px;
}

/* Larger buttons (42px by default) */
.tp-start,
.tp-button {
  width: 56px;
  height: 56px;
}

/* Larger text */
.tp-name {
  font-size: 16px;
}

.tp-sub,
.tp-status__text {
  font-size: 14px;
}

ซ่อนป้ายกำกับข้อความ

ข้อความทั้งหมดของวิดเจ็ตอยู่ใน .tp-meta ซ่อนทั้งหมดเพื่อให้เหลือเพียงรูปคลื่นและปุ่ม:

.tp-meta {
  display: none;
}

หรือซ่อนแต่ละส่วน:

/* Hide only the idle "Available now" subtitle */
.tp-sub {
  display: none;
}

/* Hide only the in-call status line (connection state / timer) */
.tp-status {
  display: none;
}

การแทนที่เฉพาะธีม

กำหนดเป้าหมายธีมเฉพาะด้วยคลาสธีม:

/* Only affect dark theme */
.tp--dark .tp-start {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

/* Only affect light theme */
.tp-widget.tp--light {
  --tp-bg: rgba(255, 255, 255, 0.95);
}

การกำหนดขอบเขตด้วย className

เมื่อใช้คอมโพเนนต์ React ให้ส่งพร็อพ className เพื่อกำหนดขอบเขตการแทนที่ของคุณให้กับอินสแตนซ์วิดเจ็ตเฉพาะ:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>

จากนั้นกำหนดเป้าหมายคลาสนั้นใน CSS ของคุณ:

.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}

.support-widget .tp-name {
  font-weight: 700;
}

วิธีนี้ช่วยให้คุณมีอินสแตนซ์วิดเจ็ตหลายรายการในหน้าเดียวกันโดยใช้รูปแบบที่แตกต่างกัน กำหนดสีเน้นให้แต่ละอินสแตนซ์ผ่านพร็อพ primaryColor ของอินสแตนซ์นั้น (CSS ไม่สามารถแทนที่ --tp-accent ได้ -- ค่านี้ถูกตั้งค่าแบบอินไลน์)

UI แบบกำหนดเองทั้งหมด

หากการแทนที่ด้วย CSS ไม่เพียงพอ headless hook จะให้คุณควบคุมได้อย่างเต็มรูปแบบ คุณกำหนด HTML และการจัดรูปแบบทั้งหมดเอง ขณะที่ useThunderPhone จัดการเซสชันเสียง hook ยังมี audioLevelRef สำหรับสร้างการแสดงผลที่ตอบสนองต่อเสียง เช่น รูปคลื่น

import { useThunderPhone } from '@thunderphone/widget'

function MyWidget() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  return (
    <div className="my-totally-custom-widget">
      {/* Your own buttons, animations, layouts -- anything */}
      <button onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}>
        {phone.state === 'connected' ? 'Hang up' : 'Call us'}
      </button>
      {phone.audio}
    </div>
  )
}