KI-Chatbot für Next.js: so installieren Sie ihn

In Next.js gehört der Code ins Hauptlayout, so erscheint er auf allen Seiten.

Sie finden ihn fertig im Panel, mit Ihrem Schlüssel, und kopieren ihn mit einem Klick. So sieht er aus:

<script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="ihr-schluessel" defer></script>

1App Router (Next.js 13 und neuer)

Öffnen Sie app/layout.tsx.
Fügen Sie die Script-Komponente vor dem schließenden body ein.

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://app.interlyo.com/widget/chatbot.js"
          data-api-key="ihr-schluessel"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Die Strategien afterInteractive, lazyOnload und beforeInteractive funktionieren. Verwenden Sie nicht strategy="worker": Das Skript liefe außerhalb der Seite und fände den Schlüssel nicht. Schreiben Sie das Attribut genau als data-api-key, mit Bindestrichen: dataApiKey funktioniert nicht.

2Pages Router (Next.js 12)

Öffnen Sie pages/_document.js.
Fügen Sie den Code nach NextScript ein.

<body>
  <Main />
  <NextScript />
  <script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="ihr-schluessel" defer></script>
</body>

Laden Sie chatbot.js von unserer Adresse, wie im Code oben. Laden Sie die Datei nicht ins Projekt herunter, benennen Sie sie nicht um und binden Sie sie nicht ins Bundle der Website ein: Das Widget fände sonst den Schlüssel und unseren Server nicht mehr.

Wählen Sie Ihre Plattform

Integrationen

Content-Management

Onlineshops

Website-Baukästen

Individuelle Websites und Apps

Bereit für die Installation?

Registrieren Sie sich kostenlos, und das Panel gibt Ihnen Code und Anleitung für Ihre Plattform.

8 Tage kostenlos testen Funktionen