Hur du lägger till Asyntai AI-chattbot i Contentful

Steg-för-steg-guide för Contentful-drivna webbplatser

Plattform:

Headless CMS: Contentful är ett headless CMS, vilket innebär att det levererar innehåll via API men saknar ett inbyggt frontend. Installationen av chattboten beror på vilket frontendramverk du använder för att rendera ditt Contentful-innehåll. Välj metoden nedan som passar din konfiguration.

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din instrumentpanel eftersom den innehåller ditt personliga widget-ID.

Metod 1: Next.js med Contentful (rekommenderas)

Om du använder Next.js för att rendera ditt Contentful-innehåll lägger du till chattboten med Script-komponenten:

Öppna din huvudlayoutfil: app/layout.tsx (App Router) eller pages/_app.tsx (Pages Router)
Importera Script-komponenten och lägg till chattboten:
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="lazyOnload" /> </body> </html> ) }
Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID
Spara filen och starta om din utvecklingsserver

Tips: Att använda strategy="lazyOnload" säkerställer att chattboten laddas efter att sidan är fullt interaktiv, vilket ger bästa prestanda.

Metod 2: Gatsby med Contentful

För Gatsby-webbplatser som hämtar innehåll från Contentful:

Installera gatsby-plugin-load-script (valfritt men rekommenderat):
npm install gatsby-plugin-load-script
Lägg till i din gatsby-config.js:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Alternativt, använd gatsby-ssr.js:
// gatsby-ssr.js import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
Starta om din Gatsby-utvecklingsserver

Metod 3: React med Contentful

För standard React-appar (Create React App, Vite osv.) som använder Contentful:

Öppna din public/index.html-fil
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Spara filen

Eller använd en React-komponent med useEffect:

// components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://asyntai.com/static/js/chat-widget.js'
    script.async = true
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [])
  return null
}

Metod 4: Vue/Nuxt med Contentful

För Vue- eller Nuxt.js-applikationer som använder Contentful:

Nuxt 3:

Lägg till i din nuxt.config.ts:
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })

Vue 3:

Add to your index.html before </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Metod 5: Statisk HTML med Contentful API

Om du använder Contentfuls Content Delivery API med vanlig JavaScript:

Lägg till inbäddningskoden i din HTML-fil före det avslutande </body>-taggen:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Spara filen och ladda upp till ditt webbhotell

Steg 2: Verifiera installationen

När du har lagt till chattbotkoden på din Contentful-drivna webbplats, distribuera eller kör din utvecklingsserver. Besök din webbplats i en ny webbläsarflik eller inkognitofönster. Du bör se chattwidgetknappen i det nedre högra hörnet. Klicka på den för att kontrollera att den öppnas och fungerar korrekt.

Ser du inte widgeten? Se till att du lagt till skriptet i rätt fil för ditt ramverk. Kontrollera webbläsarens utvecklarkonsol för eventuella fel. Om du använder server-side rendering, se till att skriptet körs på klientsidan. Prova att rensa webbläsarens cache eller visa sidan i ett inkognitofönster.

Miljövariabler: För bättre säkerhet och flexibilitet, överväg att lagra ditt widget-ID i en miljövariabel (t.ex. NEXT_PUBLIC_ASYNTAI_ID för Next.js) istället för att hårdkoda det.

Dokumentation