vicket
Commencer
Démarrage / Nº 01

Démarrage rapide

Livrez une page de support fonctionnelle en quatre étapes. Il vous faut Node 20+ et un compte Vicket. Le CLI supporte React, Next.js, Vue et Nuxt.

1. Créez une organisation et un site

Connectez-vous au dashboard et créez une org. L'org est votre tenant racine : agents, sites, statuts, priorités et articles vivent dessous. Créez ensuite au moins un site sous Websites (par exemple acme-app). Les sites portent la clé publiable, la liste d'origins autorisées et la file de tickets. Voir organisations & sites pour le modèle de données.

Depuis Websites, ouvrez votre site et copiez sa clé API. Elle commence par pk_ et n'est affichée qu'une seule fois.

2. Installez les composants

Lancez le CLI Vicket à la racine de votre app :

npx @vicket/cli init

Le CLI détecte votre setup et confirme chaque réponse : le framework (Next.js, React, Nuxt ou Vue) et le style (shadcn/ui côté React, classes Tailwind, ou feuille de style autonome). Il écrit ensuite des composants qui vous appartiennent dans components/vicket/ et, sur Next.js ou Nuxt, une page /support. Tout est à vous : modifiez-les comme n'importe quel composant. Voir installer la page de support pour l'arborescence.

3. Renseignez les variables d'environnement

Ajoutez les variables dans .env.local (Next.js) ou .env. Le CLI les a déjà ajoutées à votre .env.example :

NEXT_PUBLIC_VICKET_API_URL=https://api.vicket.app
NEXT_PUBLIC_VICKET_SITE_KEY=pk_xxxxxxxxxxxxxxxxxxxx

La clé suffit à identifier votre site : le backend la résout par son hash, il n'y a rien d'autre à configurer.

Sur Vite (React ou Vue), le préfixe est VITE_ ; sur Nuxt c'est NUXT_PUBLIC_, plus un petit bloc runtimeConfig dans nuxt.config.ts que le CLI affiche. La clé du site est publiable : elle part dans le navigateur volontairement, et le backend applique la liste d'origins autorisées et les limites de débit de votre site. Ajoutez l'origin de votre app (par exemple http://localhost:3000) sous Websites, votre site, Origins, sinon les appels navigateur seront bloqués. Voir authentification pour le modèle complet.

4. Ouvrez la page de support

Le CLI a créé /support sur Next.js (app/support/page.tsx) et Nuxt (pages/support.vue). Sur React ou Vue pur, montez la page dans votre routeur :

// React (react-router)
import { SupportPage } from "./components/vicket/support-page";
<Route path="/support" element={<SupportPage />} />

// Vue (vue-router)
{ path: "/support", component: () => import("./components/vicket/SupportPage.vue") }

Ajoutez le lien dans votre nav, lancez votre app et ouvrez /support. Vous devez voir vos articles et FAQ publiés, et le bouton Contact Support ouvre le formulaire de ticket. Soumettez un ticket de test : il apparaît immédiatement dans le dashboard agent.

La suite