Configure the support page
There is no provider, no config object, no hidden runtime. Configuration is one required environment variable; everything else is code you own and edit directly.
Environment variables
| Variable | Required | Description |
|---|---|---|
NEXT_PUBLIC_VICKET_SITE_KEY | yes | Publishable site key (pk_). It alone identifies your site. |
NEXT_PUBLIC_VICKET_API_URL | no | API base, defaults to https://api.vicket.app |
On Vite (React or Vue) the prefix is VITE_; on Nuxt it's NUXT_PUBLIC_ and the values flow through a runtimeConfig block in nuxt.config.ts (the CLI prints it), which means you can rotate the key at runtime without rebuilding. Put the values in .env.local (Next.js) or .env; the CLI already appended placeholders to your .env.example.
The key is publishable. It ships in the browser on purpose: the backend scopes every request to the site, enforces the site's origin allowlist, and rate limits per site and IP. Don't forget to allow your origins (including http://localhost:3000 in dev) under Websites, your site, Origins.
Restyling
The components are yours, so restyling is editing code, not fighting a theme API:
- shadcn variant (React): the components already use your
ui/primitives, so they follow your design system out of the box. - Tailwind variant: neutral utility classes on native elements, identical classes on React and Vue. Swap them for your own palette.
- CSS variant: everything reads from CSS variables at the top of
vicket-support.css(--vk-accent,--vk-radius, ...). Change them once, the whole page follows.
Copy
All user-facing strings live in the page and modal components as plain markup (support-page.tsx / SupportPage.vue and friends). Search for the text, change it, done. If you run i18n, wrap the strings with your own translation function.
The contact form
The modal renders whatever ticket templates are enabled on the site, with one input per field (text, select, date, checkbox, ...). You design those forms in the dashboard's template editor, not in code: add a field there and the modal picks it up on the next load. Priority is computed from the answers via your template's scoring rules (see priorities).
Articles and FAQs
The page shows the most viewed published articles and all published FAQs, with a client-side search over article titles and excerpts. Write and publish them from the dashboard; see help-center.
Next
- Rotate the site key in api-keys.
- See the full request flow in api-authentication.