Installation

Vicket fournit un package de scaffold pour ajouter des pages support dans votre application :

/support pour creer des tickets
/ticket?token=... pour consulter et repondre

1. Preparer le website dans Vicket

Avant l'integration :

Creer ou selectionner un website dans le dashboard
Recuperer la cle API du website
Creer au moins un template de ticket

Sans template, les utilisateurs ne peuvent pas soumettre de ticket.

2. Generer les pages

npx @vicket/create-support --framework next

Version en cache ? Les gestionnaires de paquets comme npx et pnpx mettent les packages en cache localement. Pour etre sur d'utiliser la derniere version :

# npx
npx @vicket/create-support@latest --framework next

# pnpx
pnpx @vicket/create-support@latest --framework next

Vous pouvez verifier votre version avec npx @vicket/create-support --version.

Frameworks supportes :

next
nuxt
react
vue
sveltekit

Mode de style optionnel :

--styling css
--styling tailwind

3. Configurer les variables d'environnement

Next.js

NEXT_PUBLIC_VICKET_API_URL=https://api.vicket.app/api/v1
NEXT_PUBLIC_VICKET_API_KEY=your_website_api_key

Nuxt

NUXT_PUBLIC_VICKET_API_URL=https://api.vicket.app/api/v1
NUXT_PUBLIC_VICKET_API_KEY=your_website_api_key

React / Vue (Vite)

VITE_VICKET_API_URL=https://api.vicket.app/api/v1
VITE_VICKET_API_KEY=your_website_api_key

SvelteKit

PUBLIC_VICKET_API_URL=https://api.vicket.app/api/v1
PUBLIC_VICKET_API_KEY=your_website_api_key

4. Validation

Ouvrir /support
Soumettre un ticket de test
Ouvrir le lien ticket recu
Verifier la presence du ticket dans le dashboard

Note securite

Les templates generes utilisent des appels directs depuis le navigateur avec une cle publique de support du website.

En production, nous recommandons de modifier le code genere pour faire passer les appels support par votre propre proxy backend (BFF), plutot que d'appeler Vicket directement depuis le client.

Cela permet de garder les credentials cote serveur quand c'est possible et d'ajouter des protections anti-abus (rate limiting, CAPTCHA, validation des requetes).

On this page