Widget

Tùy chỉnh giao diện

Tùy chỉnh giao diện của tiện ích giọng nói ThunderPhone bằng CSS

Tiện ích hiển thị dưới dạng thanh hiệu ứng kính với giao diện sáng và tối tích hợp sẵn. Bạn có thể tùy chỉnh ở ba cấp độ: props cho các tùy chọn phổ biến, thuộc tính tùy chỉnh CSS để áp dụng giao diện, và ghi đè lớp CSS để kiểm soát toàn diện.

Giao diện#

Prop theme kiểm soát bảng màu của tiện ích. Prop này áp dụng lớp tp--light hoặc tp--dark vào phần tử gốc của tiện ích:

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

Cả hai giao diện đều sử dụng thiết kế thanh hiệu ứng kính với hiệu ứng làm mờ nền và độ trong suốt tinh tế.

Thuộc tính tùy chỉnh CSS#

Widget cung cấp các thuộc tính tùy chỉnh CSS (biến) mà bạn có thể ghi đè để thay đổi màu sắc mà không cần chỉnh sửa từng class. Chúng được xác định bởi class giao diện (.tp--light hoặc .tp--dark) áp dụng cho phần tử gốc .tp-widget:

Ghi đè thuộc tính tùy chỉnh#

Đặt màu nhấn qua prop primaryColor:

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

Ghi đè các thuộc tính tùy chỉnh khác bằng CSS. Sử dụng bộ chọn hai class (.tp-widget.tp--light / .tp-widget.tp--dark) để quy tắc của bạn có độ ưu tiên cao hơn class giao diện xác định các giá trị mặc định, bất kể thứ tự stylesheet:

.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);
}

Các lớp CSS#

Tất cả lớp widget đều có tiền tố tp- để tránh xung đột với các style hiện có của bạn.

Ví dụ#

Màu nhấn tùy chỉnh qua Props#

Cách đơn giản nhất để gắn thương hiệu cho widget:

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

Màu tùy chỉnh qua CSS#

Ghi đè các thuộc tính tùy chỉnh để kiểm soát hoàn toàn màu sắc. Lưu ý rằng màu nhấn đến từ prop primaryColor, không phải 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);
}

Kích thước tùy chỉnh#

Phóng to hoặc thu nhỏ widget bằng cách điều chỉnh kích thước thanh, nút và văn bản:

/* 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;
}

Ẩn nhãn văn bản#

Toàn bộ văn bản của widget nằm trong .tp-meta. Ẩn hoàn toàn phần này để chỉ giữ lại dạng sóng và các nút:

.tp-meta {
  display: none;
}

Hoặc ẩn từng phần riêng lẻ:

/* 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;
}

Ghi đè theo chủ đề#

Nhắm đến một chủ đề cụ thể bằng lớp chủ đề:

/* 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);
}

Phạm vi với className#

Khi sử dụng thành phần React, truyền prop className để giới hạn các ghi đè của bạn cho một phiên bản widget cụ thể:

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

Sau đó nhắm đến lớp đó trong CSS:

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

Điều này cho phép bạn có nhiều phiên bản widget trên cùng một trang với các kiểu khác nhau. Đặt màu nhấn riêng cho từng phiên bản thông qua prop primaryColor của nó (CSS không thể ghi đè --tp-accent -- thuộc tính này được đặt inline).

Giao diện người dùng hoàn toàn tùy chỉnh#

Nếu ghi đè CSS là chưa đủ, headless hook cho phép bạn toàn quyền kiểm soát. Bạn cung cấp toàn bộ HTML và kiểu dáng, trong khi useThunderPhone xử lý phiên thoại. Hook này cũng cung cấp audioLevelRef để xây dựng các hình ảnh trực quan phản hồi theo âm thanh như dạng sóng.

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>
  )
}