Naar de inhoud springen
Yuvashadcn
Yuva voor shadcn/uiMenu

Yuva voor shadcn/ui

React-componenten voor livechat, discussies op documentatiepagina's en aanmelding voor mailinglijsten, gekopieerd naar je shadcn/ui-project.

Het Yuva-register is een set componenten en hooks die de shadcn-CLI naar je project kopieert. Ze gebruiken je thema, praten met Yuva via de useyuva-client en zijn van jou om aan te passen.

Vereisten

  • Een project dat al shadcn/ui gebruikt, met React en Tailwind CSS.
  • Een Yuva-chatkanaal en de publieke sleutel ervan (yuva_pk_…).

Een kanaal instellen

  1. Open in het Yuva-paneel Instellingen, je inbox, Kanalen en voeg een chatkanaal toe.
  2. Voeg elke origin die de componenten toont toe als toegestane origin: je site en je ontwikkelserver.
  3. Kopieer de publieke sleutel van het kanaal. Die is geen geheim.
  4. Zet voor discussies de discussiemodus van het kanaal op moderated of open. Voeg voor het aanmeldformulier een openbare mailinglijst toe.

Geef de sleutel en het adres van je Yuva-server aan de componenten, bijvoorbeeld via de omgeving:

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

Voeg je eerste item toe

Installeer het chatblok en render het dan:

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

Items

Alle items in het register, gegroepeerd zoals in de zijbalk.

Blokken

Componenten

Hooks

Volgende →Yuva chat