Aller au contenu
intoCHAT

Intégration Next.js

Ajoutez un chatbot IA à votre app Next.js

Chargez le widget intoCHAT une seule fois dans votre layout racine avec next/script. Il reste en place pendant la navigation côté client, et l'agent répond à partir des contenus sur lesquels vous l'entraînez.

Créer votre agent gratuitement

Dernière mise à jour:

Comment intoCHAT fonctionne dans Next.js

Le widget intoCHAT est un script unique qui lit l'identifiant de votre agent dans son attribut data-chatbot-id et ajoute une bulle de chat à la page. Next.js transmet les attributs data du composant Script à l'élément script final : le composant next/script standard suffit. Placez-le dans le layout racine et Next.js le charge une seule fois, même quand les visiteurs changent de route. Les couleurs, la position et le message d'accueil viennent d'intoCHAT : inutile de redéployer pour les modifier.

Installer intoCHAT dans Next.js

  1. Créez et entraînez votre agent

    Inscrivez-vous sur intoCHAT, créez un agent et ajoutez votre site dans l'onglet Knowledge. L'exploration affiche les pages qui dépendent de JavaScript avant de les lire : les routes rendues côté client sont lues telles que les visiteurs les voient.

  2. Copiez l'identifiant de l'agent

    Ouvrez l'onglet Share. Le code sous Bubble Chat contient l'identifiant de votre agent dans l'attribut data-chatbot-id.

  3. Ajoutez Script au layout racine

    Dans app/layout.tsx, importez Script depuis next/script et ajoutez-le dans body, après children, avec l'URL d'intégration, l'identifiant de votre agent et strategy réglé sur lazyOnload.

  4. Déployez et vérifiez

    Ouvrez n'importe quelle route. La bulle de chat apparaît dans le coin inférieur et y reste pendant que vous naviguez entre les pages.

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://www.intochat.ai/api/embed.js"
          data-chatbot-id="YOUR_AGENT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Next.js transmet data-chatbot-id à l'élément script : c'est ainsi que le widget trouve votre agent. Le layout peut rester un Server Component, car ce Script n'a pas de gestionnaire d'événements.

Ce que l'agent peut faire dans votre app Next.js

  • Actions côté client

    Enregistrez des fonctions sur votre page avec window.IntoChatActions.register, et l'agent peut les appeler pendant un chat, par exemple pour lire l'état de la page ou ouvrir un formulaire.

  • Actions API personnalisées

    Laissez l'agent appeler vos propres endpoints HTTP, avec authentification bearer, basic, clé API ou en-têtes personnalisés. Importez une requête depuis cURL et choisissez les champs de réponse que le modèle voit.

  • Lit les pages rendues côté client

    L'exploration du site affiche les pages qui dépendent de JavaScript avant de les lire, trouve jusqu'à 500 URL via le sitemap et les liens, et permet d'exclure des chemins avec des motifs.

  • Des réponses fondées

    Recherche hybride sémantique et par mots-clés dans vos contenus, avec des règles qui s'en tiennent à vos sources, résistent à l'injection de prompt et signalent quand la réponse manque.

  • Collecte de leads

    Demandez un e-mail ou un numéro de téléphone dans le chat, manuellement, selon des règles ou quand l'IA le décide. Les leads vous sont envoyés par e-mail et s'exportent en CSV.

  • Apparence réglée dans le tableau de bord

    Couleurs, avatar, icône du bouton, position et message d'accueil se règlent dans l'onglet Appearance, pas dans votre code.

Questions fréquentes

Le widget ralentit-il mon app Next.js ?

Avec strategy réglé sur lazyOnload, Next.js ajoute le script quand le navigateur est inactif, après le chargement des autres ressources de la page : il ne retarde ni le rendu ni l'hydratation. La fenêtre de chat tourne dans son propre iframe servi par intoCHAT, séparé du JavaScript de votre app.

Faut-il utiliser lazyOnload ou afterInteractive ?

Les deux fonctionnent. afterInteractive, la valeur par défaut, charge le script plus tôt, juste après une partie de l'hydratation, donc la bulle apparaît plus vite, tandis que lazyOnload attend que le navigateur soit inactif. Dans les deux cas, Next.js crée l'élément script avec votre attribut data-chatbot-id, dont le widget a besoin.

Est-ce que cela fonctionne avec le Pages Router ?

Oui. Ajoutez le même composant Script dans pages/_app pour qu'il se charge sur chaque page. Next.js transmet aussi les attributs data dans le Pages Router.

Puis-je afficher le chat sur certaines routes seulement ?

Vous pouvez placer le Script dans un layout imbriqué plutôt que dans le layout racine : il se charge quand une route de ce layout est ouverte. Une fois chargée, la bulle vit sur la page elle-même et reste visible après une navigation côté client vers d'autres routes, jusqu'au prochain rechargement complet.

Mon app a une Content Security Policy. Que dois-je autoriser ?

Autorisez www.intochat.ai dans script-src pour le script, dans connect-src pour le chargement des réglages de l'agent et dans frame-src pour la fenêtre de chat. Si votre politique utilise des nonces, transmettez aussi le nonce au composant Script.

Dois-je redéployer quand je modifie l'agent ?

Non. Le code ne contient que l'identifiant de votre agent. Les couleurs, la position, le message d'accueil, les questions suggérées et les connaissances sont chargés depuis intoCHAT à chaque chargement de page : les modifications apparaissent sans nouveau déploiement.

Voyez-le répondre à partir de votre site

Collez l’adresse de votre site et discutez avec un agent créé à partir de vos pages. Cela prend environ une minute.

Créer votre agent gratuitement

Offre gratuite, sans carte bancaire.