Installer dans React

Un package, une route, un token. Vos pages Flocon AI s'affichent ensuite sur votre site web. L'exemple utilise React Router v7 (mode framework).

Les apps React qui tournent seulement dans le navigateur ne sont pas supportées (Vite SPA, Create React App). La plupart des bots IA n'exécutent pas JavaScript. Ils verraient une page vide. Utilisez un framework qui rend côté serveur : React Router v7 (mode framework), TanStack Start… Sur Next.js, utilisez @flocon-ai/next.

1. Installez le package

Il faut React 18+.

npm install @flocon-ai/react

2. Ajoutez le token du site web

Copiez votre token du site web depuis /app/tokens. Ajoutez-le à .env :

.env

FLOCON_TOKEN=<token du site web>

Définissez la même variable chez votre hébergeur. Appelez le package côté serveur uniquement (loader de route, fonction serveur). Le token ne doit jamais arriver dans le navigateur.

Ne commitez jamais le token. Il est en lecture seule, mais c'est quand même un secret.

3. Ajoutez la route de page

Créez app/routes/flocon.tsx et déclarez-la comme route *. Elle sert toutes les pages Flocon.

app/routes/flocon.tsx

import { FloconPage, getFloconMetadata, getPage } from "@flocon-ai/react"
import type { Route } from "./+types/flocon"

const url = ({ locale, path }: { locale: string; path: string }) =>
`https://example.com${path}`

export async function loader({ params }: Route.LoaderArgs) {
const page = await getPage({ path: "/" + params["*"] })
if (!page) throw new Response("Not found", { status: 404 })
return page
}

export function meta({ data }: Route.MetaArgs) {
if (!data) return [{ title: "Not found" }]
const m = getFloconMetadata({ page: data, url })
return [
  { title: m.title },
  { name: "description", content: m.description },
  { property: "og:type", content: m.openGraph.type },
  { property: "og:title", content: m.openGraph.title },
  { property: "og:description", content: m.openGraph.description },
  { property: "og:url", content: m.openGraph.url },
  { property: "og:locale", content: m.openGraph.locale },
  { name: "twitter:card", content: m.twitter.card },
  { name: "twitter:title", content: m.twitter.title },
  { name: "twitter:description", content: m.twitter.description },
  { tagName: "link", rel: "canonical", href: m.canonical },
  ...Object.entries(m.languages).map(([hrefLang, href]) => ({
    tagName: "link",
    rel: "alternate",
    hrefLang,
    href,
  })),
]
}

export default function Page({ loaderData }: Route.ComponentProps) {
return <FloconPage page={loaderData} url={url} />
}

getPage({ path, locale? }) renvoie la page, ou null si elle n'existe pas. Renvoyez une 404.
<FloconPage /> ne fait aucun appel réseau. Elle affiche les blocs, le script JSON-LD et (offre Free) le badge « Made with Flocon AI ».
getFloconMetadata() renvoie des données simples : titre, description, mots-clés, URL canonique, hreflang, openGraph et twitter. Placez-les dans le <head> comme le fait votre framework. Elle ne définit pas d'image OG.
Les pages sont lues à chaque requête. Une page publiée apparaît à la visite suivante. Les brouillons ne sont jamais renvoyés.

La règle `url`

url reçoit { locale, path } et renvoie l'URL complète d'une page sur votre site web. Flocon AI n'impose aucune règle d'URL, et le package n'ajoute aucun préfixe.

Si votre site web a plusieurs langues, mettez la langue dans l'URL (par exemple https://example.com/${locale}${path}). Sinon, tous les liens hreflang pointent vers la même URL.

Autres langues

locale est optionnel. Sans locale = la langue par défaut de votre site web.

await getPage({ path: "/guides/seo", locale: "fr" })

4. Vérifiez

Demandez à votre outil d'IA de créer et publier une page à /vs/notion.
Ouvrez /vs/notion sur votre site web.

La page est là.

Suite

Mis à jour 3 novembre 2026