Installer dans Astro

Un package, une route fourre-tout, un token. Vos pages Flocon AI s'affichent ensuite sur votre site web. Il faut Astro 4+ en SSR.

SSR uniquement. Définissez output: "server" et ajoutez un adaptateur. Les pages sont lues à chaque requête : une page que vous publiez apparaît à la visite suivante.

1. Installez le package

npm install @flocon-ai/astro

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. Le package la lit côté serveur uniquement.

Ne commitez jamais le token, et ne le préfixez jamais par PUBLIC_. Il est en lecture seule, mais c'est quand même un secret.

Sur Cloudflare, les secrets ne sont pas dans process.env. Passez le token vous-même. Chaque fonction accepte une option token :

const token = Astro.locals.runtime.env.FLOCON_TOKEN // Astro 4-5 + @astrojs/cloudflare
const data = await getFloconPage({ path, token })

3. Ajoutez la route fourre-tout

Créez src/pages/[...slug].astro. Elle sert toutes les pages Flocon.

src/pages/[...slug].astro
---
import FloconPage from "@flocon-ai/astro/FloconPage.astro"
import { getFloconPage, getFloconMetadata } from "@flocon-ai/astro"

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

const data = await getFloconPage({ path: "/" + (Astro.params.slug ?? "") })
if (!data) return new Response(null, { status: 404 })
const meta = getFloconMetadata({ data, url })
---

<html lang={data.page.locale}>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>{meta.title}</title>
  {meta.meta.map((m) => <meta {...m} />)}
  {meta.links.map((l) => <link {...l} />)}
</head>
<body>
  <FloconPage data={data} url={url} />
</body>
</html>
  • getFloconPage() charge une page publiée. Une page absente (ou un brouillon) donne null : répondez une 404.
  • <FloconPage /> affiche la page : titre, blocs et script JSON-LD.
  • getFloconMetadata() renvoie title, meta et links :
    • meta : description, mots-clés, balises og:* et twitter:*.
    • links : URL canonique et hreflang.
  • Il n'y a pas encore d'image OG.
  • Vos propres routes passent avant [...slug]. Astro choisit d'abord la route la plus précise.

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'ajoute aucun préfixe. Construisez-la comme le fait votre site web.

Elle sert pour l'URL canonique, les hreflang et les liens des « Pages associées ».

Autres langues

locale est optionnel dans getFloconPage. Sans locale, c'est la langue par défaut de votre site web. Pour servir une autre langue, passez-la :

const data = await getFloconPage({ path: "/guides/seo", locale: "fr" })

Il n'y a pas de repli vers une autre langue. Une page absente donne une 404.

4. Vérifiez

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

La page est là.

Avec l'offre Free, la page affiche un badge « Made with Flocon AI ».

Suite

Mis à jour