Gå til indhold
Yuvashadcn
Yuva til shadcn/uiMenu

Yuva til shadcn/ui

React-komponenter til livechat, diskussioner på dokumentationssider og tilmelding til mailinglister, kopieret ind i dit shadcn/ui-projekt.

Yuva-registret er et sæt komponenter og hooks, som shadcn CLI kopierer ind i dit projekt. De bruger dit tema, taler med Yuva via useyuva-klienten, og du kan redigere dem.

Krav

  • Et projekt, der allerede bruger shadcn/ui, med React og Tailwind CSS.
  • En Yuva-chatkanal og dens offentlige nøgle (yuva_pk_…).

Opret en kanal

  1. Åbn Indstillinger, din indbakke og Kanaler i Yuva-panelet, og tilføj en chatkanal.
  2. Tilføj hver origin, der viser komponenterne, som tilladt origin: dit website og din udviklingsserver.
  3. Kopiér kanalens offentlige nøgle. Den er ikke hemmelig.
  4. Sæt kanalens diskussionstilstand til moderated eller open for diskussioner. Tilføj en offentlig mailingliste til tilmeldingsformularen.

Giv komponenterne nøglen og adressen på din Yuva-server, for eksempel i miljøet:

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

Tilføj dit første element

Installér chatblokken, og gengiv den derefter:

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

Elementer

Alle elementer i registret, grupperet som i sidepanelet.

Blokke

Komponenter

Hooks

Næste →Yuva chat