Przejdź do treści
Yuvashadcn
Yuva dla shadcn/uiMenu

Yuva dla shadcn/ui

Komponenty React do czatu na żywo, dyskusji na stronach dokumentacji i zapisów na listy mailingowe, kopiowane do twojego projektu shadcn/ui.

Rejestr Yuva to zestaw komponentów i hooków, które CLI shadcn kopiuje do twojego projektu. Używają twojego motywu, rozmawiają z Yuva przez klienta useyuva i możesz je edytować.

Wymagania

  • Projekt, który już używa shadcn/ui, z Reactem i Tailwind CSS.
  • Kanał czatu Yuva i jego klucz publiczny (yuva_pk_…).

Skonfiguruj kanał

  1. W panelu Yuva otwórz Ustawienia, swoją skrzynkę i Kanały, a potem dodaj kanał czatu.
  2. Dodaj każdy origin, który będzie pokazywał komponenty, jako dozwolony: twoją stronę i serwer deweloperski.
  3. Skopiuj klucz publiczny kanału. To nie jest sekret.
  4. Dla dyskusji ustaw tryb dyskusji kanału na moderated lub open. Dla formularza zapisu dodaj publiczną listę mailingową.

Przekaż komponentom klucz i adres swojego serwera Yuva, na przykład w środowisku:

.env.local
NEXT_PUBLIC_YUVA_SERVER=https://support.example.com
NEXT_PUBLIC_YUVA_CHANNEL=yuva_pk_xxxxxxxxxxxxxxxx

Dodaj pierwszy element

Zainstaluj blok czatu, a potem wyrenderuj go:

Shell
npx shadcn@latest add https://useyuva.com/r/yuva-chat.json
tsx
import { YuvaChat } from "@/components/yuva-chat"

export function Support() {
  return (
    <YuvaChat
      server={process.env.NEXT_PUBLIC_YUVA_SERVER}
      channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
    />
  )
}

Elementy

Wszystkie elementy rejestru, pogrupowane jak na pasku bocznym.

Bloki

Komponenty

Hooks

Dalej →Yuva chat