Gå til innholdet
Yuvashadcn
Yuva for shadcn/uiMeny

Yuva for shadcn/ui

React-komponenter for livechat, diskusjoner på dokumentasjonssider og påmelding til e-postlister, kopiert inn i shadcn/ui-prosjektet ditt.

Yuva-registeret er et sett med komponenter og hooks som shadcn CLI kopierer inn i prosjektet ditt. De bruker temaet ditt, snakker med Yuva via useyuva-klienten, og du kan redigere dem.

Krav

  • Et prosjekt som allerede bruker shadcn/ui, med React og Tailwind CSS.
  • En Yuva-chatkanal og den offentlige nøkkelen (yuva_pk_…).

Sett opp en kanal

  1. Åpne Innstillinger, innboksen din og Kanaler i Yuva-panelet, og legg til en chatkanal.
  2. Legg til hver origin som skal vise komponentene som tillatt origin: nettstedet ditt og utviklingsserveren din.
  3. Kopier kanalens offentlige nøkkel. Den er ikke hemmelig.
  4. For diskusjoner setter du kanalens diskusjonsmodus til moderated eller open. For påmeldingsskjemaet legger du til en offentlig e-postliste.

Gi komponentene nøkkelen og adressen til Yuva-serveren din, for eksempel i miljøet:

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

Legg til det første elementet ditt

Installer chatblokken, og vis den deretter:

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 elementene i registeret, gruppert som i sidepanelet.

Blokker

Komponenter

Hooks

Neste →Yuva chat