Widget

Stilsättning

Anpassa utseendet på ThunderPhones röstwidget med CSS

Widgeten renderas som en glassmorfisk stapel med inbyggda ljusa och mörka teman. Anpassning är möjlig på tre nivåer: props för vanliga alternativ, anpassade CSS-egenskaper för teman och åsidosättningar av CSS-klasser för full kontroll.

Teman#

Propen theme styr widgetens färgschema. Den tillämpar klassen tp--light eller tp--dark på widgetens rotelement:

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

Båda teman använder den glassmorfiska stapeldesignen med oskärpa i bakgrunden och diskret transparens.

Anpassade CSS-egenskaper#

Widgeten exponerar anpassade CSS-egenskaper (variabler) som du kan åsidosätta för att ändra färger utan att röra enskilda klasser. De definieras av temaklassen (.tp--light eller .tp--dark) som tillämpas på roten .tp-widget:

Åsidosätta anpassade egenskaper#

Ange accentfärgen via propen primaryColor:

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

Åsidosätt de andra anpassade egenskaperna med CSS. Använd en väljare med två klasser (.tp-widget.tp--light / .tp-widget.tp--dark) så att din regel har högre prioritet än temaklassen som definierar standardvärdena, oavsett ordningen i formatmallen:

.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-klasser#

Alla widgetklasser har prefixet tp- för att undvika konflikter med dina befintliga stilar.

Exempel#

Anpassad accentfärg via props#

Det enklaste sättet att varumärkesanpassa widgeten:

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

Anpassade färger via CSS#

Åsidosätt de anpassade egenskaperna för full kontroll över färgerna. Kom ihåg att accentfärgen kommer från propen primaryColor, inte från 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);
}

Anpassad storlek#

Gör widgeten större eller mindre genom att justera måtten för fältet, knapparna och texten:

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

Dölj textetiketterna#

All text i widgeten finns i .tp-meta. Dölj den helt om du bara vill behålla vågformen och knapparna:

.tp-meta {
  display: none;
}

Eller dölj enskilda delar:

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

Åsidosättningar för specifika teman#

Rikta in dig på ett specifikt tema med temaklassen:

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

Avgränsning med className#

När du använder React-komponenten skickar du en className-prop för att begränsa dina åsidosättningar till en specifik widgetinstans:

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

Rikta sedan in dig på den klassen i din CSS:

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

Detta gör att du kan ha flera widgetinstanser på samma sida med olika stilar. Ge varje instans en egen accentfärg via dess primaryColor-prop (CSS kan inte åsidosätta --tp-accent -- den anges inline).

Helt anpassat gränssnitt#

Om CSS-åsidosättningar inte räcker ger den headless-hooken dig full kontroll. Du tillhandahåller all HTML och styling medan useThunderPhone hanterar röstsessionen. Hooken tillhandahåller även audioLevelRef för att bygga ljudreaktiva visualiseringar som vågformer.

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