Configurer la page de support
Pas de provider, pas d'objet de config, pas de runtime caché. La configuration tient en une variable d'environnement requise ; tout le reste est du code à vous, que vous modifiez directement.
Variables d'environnement
| Variable | Requise | Description |
|---|---|---|
NEXT_PUBLIC_VICKET_SITE_KEY | oui | Clé publiable du site (pk_). Elle seule identifie le site. |
NEXT_PUBLIC_VICKET_API_URL | non | Base de l'API, défaut https://api.vicket.app |
Sur Vite (React ou Vue), le préfixe est VITE_ ; sur Nuxt c'est NUXT_PUBLIC_ et les valeurs passent par un bloc runtimeConfig dans nuxt.config.ts (le CLI l'affiche), ce qui permet de faire tourner la clé au runtime sans rebuild. Mettez les valeurs dans .env.local (Next.js) ou .env ; le CLI a déjà ajouté les placeholders à votre .env.example.
La clé est publiable. Elle part dans le navigateur volontairement : le backend limite chaque requête au site, applique la liste d'origins autorisées du site, et limite le débit par site et par IP. N'oubliez pas d'autoriser vos origins (y compris http://localhost:3000 en dev) sous Websites, votre site, Origins.
Restyler
Les composants sont à vous : restyler, c'est modifier du code, pas se battre avec une API de thème.
- Variante shadcn (React) : les composants utilisent déjà vos primitives
ui/, donc ils suivent votre design system d'office. - Variante Tailwind : des classes utilitaires neutres sur des éléments natifs, identiques en React et en Vue. Remplacez-les par votre palette.
- Variante CSS : tout part des variables CSS en tête de
vicket-support.css(--vk-accent,--vk-radius, ...). Changez-les une fois, toute la page suit.
Les textes
Toutes les chaînes visibles vivent dans les composants page et modal en markup brut (support-page.tsx / SupportPage.vue et compagnie). Cherchez le texte, changez-le, c'est fini. Si vous avez de l'i18n, enveloppez les chaînes avec votre propre fonction de traduction.
Le formulaire de contact
Le modal rend les templates de ticket activés sur le site, avec un input par champ (texte, select, date, case à cocher, ...). Vous concevez ces formulaires dans l'éditeur de templates du dashboard, pas dans le code : ajoutez un champ là-bas et le modal le récupère au prochain chargement. La priorité est calculée à partir des réponses via les règles de scoring de votre template (voir priorités).
Articles et FAQ
La page affiche les articles publiés les plus consultés et toutes les FAQ publiées, avec une recherche côté client sur les titres et extraits d'articles. Rédigez et publiez depuis le dashboard ; voir centre d'aide.
La suite
- Faites tourner la clé du site dans clés API.
- Suivez le parcours complet d'une requête dans authentification.