vicket
Get started
Getting started / Nº 01

Quickstart

Ship a working support page in four steps. You'll need Node 20+ and a Vicket account. The CLI supports React, Next.js, Vue and Nuxt.

1. Create an organization and a site

Sign in to the dashboard and create an org. The org is your top-level tenant: agents, sites, statuses, priorities, and articles all live under it. Then create at least one site under Websites (e.g. acme-app). Sites scope the publishable key, the origin allowlist, and the ticket queue. See organizations-and-sites for the data model.

From Websites, open your site and copy its API key. It starts with pk_ and is shown exactly once.

2. Install the components

Run the Vicket CLI in the root of your app:

npx @vicket/cli init

The CLI detects your setup and confirms each answer: the framework (Next.js, React, Nuxt or Vue) and the styling (shadcn/ui on React, Tailwind classes, or a standalone stylesheet). It then writes owned components into components/vicket/ and, on Next.js or Nuxt, a /support page. Everything is yours: edit it like any other component. See install-support-page for the resulting tree.

3. Set environment variables

Add the variables to .env.local (Next.js) or .env. The CLI already appended them to your .env.example:

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

The key alone identifies your site: the backend resolves it by its hash, so there is nothing else to configure.

On Vite (React or Vue) the prefix is VITE_; on Nuxt it's NUXT_PUBLIC_, plus a small runtimeConfig block in nuxt.config.ts that the CLI prints. The site key is publishable: it ships in the browser on purpose, and the backend enforces your site's origin allowlist and rate limits. Add your app's origin (e.g. http://localhost:3000) under Websites, your site, Origins or the browser calls will be blocked. See api-authentication for the full auth model.

4. Open the support page

The CLI created /support on Next.js (app/support/page.tsx) and Nuxt (pages/support.vue). On plain React or Vue, mount the page in your router:

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

Link it from your nav, run your app, and open /support. You should see your published articles and FAQs, and the Contact Support button opens the ticket form. Submit a test ticket: it appears in the agent dashboard immediately.

What's next