Vissza az irányítópultra

Dokumentáció

Ismerd meg az Asyntai használatát

Első lépések
Telepítés Tudásbázis AI tesztelése Weboldalak kezelése
Testreszabás
Widget színek AI asszisztens neve Kezdeti üzenet Widget pozíció Automatikus indítás Üdvözlő buborék Olvasatlan jelvény Utasítási mód Kérdések feltevése Emoji használata E-mail-cím gyűjtés Telefonszám gyűjtés Intelligens érdeklődő-rögzítés Honosítás Márkajelzés elrejtése Adatvédelmi hivatkozás Egyéni értesítés Átirat letöltése Új beszélgetés Beszélgetési előzmények Szlogen és állapotjelző pont Beszédfelismerés Csevegés ikon Céglogó Karakterkorlát Hőmérséklet
Tippek az AI-utasításokhoz Csomagok összehasonlítása
Funkciók
Weboldal feltérképezése Tudáshiányok Termékkártyák Dinamikus termékkártyák Dynamic Images Felhasználói kontextus Élő figyelés Emberi átvétel Eszkaláció AI-értesítések Napi jelentés Valós idejű adatforrás Valós idejű adatforrás Max Csapattagok Egyszeri bejelentkezés Képek hozzáadása Képfelismerés Fordítási widget Honosítás Érdeklődők Intelligens érdeklődő-rögzítés Támogatási jegyek Foglalások Beágyazások Oldalak kizárása Blokkolt IP-k Okosabb modell Gondolkodás engedélyezése Válaszjavaslatok Utólagos üzenetek Beszédfelismerés Átirat letöltése Beágyazott chat
Elemzések
Chat-analitika Chat-naplók
Integrációk
REST API Instagram Messenger WhatsApp Zapier Email Mobilalkalmazások
Egyéb
Hozzáadás a kezdőképernyőhöz Egyéni megnyitó gomb
Kérdezze meg az AI-t

Az Asyntai AI Chatbot hozzáadása a DatoCMS-hez

Lépésről lépésre útmutató DatoCMS alapú webhelyekhez

Beágyazási kód lekérése
Platform:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

Headless CMS: A DatoCMS egy headless CMS, amely API-kon keresztül biztosítja a tartalmat. A chatbot kódot a frontend alkalmazáshoz (Next.js, Gatsby, Nuxt stb.) kell hozzáadni, nem a DatoCMS irányítópulthoz.

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

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

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Hozzáadás a Next.js frontendhez (leggyakoribb)

A Next.js a legnépszerűbb frontend keretrendszer, amelyet a DatoCMS-sel használnak. Adja hozzá a chatbotot a Script komponens segítségével:

App Router (app/layout.tsx):

  1. Nyissa meg a gyökér elrendezési fájlt: app/layout.tsx
  2. Importálja a Script komponenst, és adja hozzá a chatbotot:
    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="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról
  4. Mentse el a fájlt, és indítsa újra a fejlesztői szervert

Pages Router (pages/_app.tsx):

  1. Nyissa meg a pages/_app.tsx fájlt
  2. Adja hozzá a Script komponenst:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
      return (
        <>
          <Component {...pageProps} />
          <Script
            src="https://asyntai.com/static/js/chat-widget.js"
            data-asyntai-id="YOUR_WIDGET_ID"
            strategy="afterInteractive"
          />
        </>
      )
    }

Tipp: A strategy="afterInteractive" használata biztosítja, hogy a chatbot közvetlenül azután töltődjön be, hogy az oldal interaktívvá válik, jó egyensúlyt teremtve a teljesítmény és az elérhetőség között.

Alternatív 1. módszer: Gatsby frontend

A gatsby-source-datocms-en keresztül DatoCMS-ből tartalmat húzó Gatsby webhelyek esetén:

  1. Hozza létre vagy szerkessze a gatsby-ssr.js fájlt a projekt gyökerében:
    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"
        />
      ])
    }
  2. Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról
  3. Indítsa újra a Gatsby fejlesztői szervert

Alternatív 2. módszer: Nuxt.js frontend

DatoCMS tartalmat fogyasztó Nuxt.js alkalmazásokhoz:

  1. Adja hozzá a nuxt.config.ts fájlhoz:
    export default defineNuxtConfig({
      app: {
        head: {
          script: [
            {
              src: 'https://asyntai.com/static/js/chat-widget.js',
              async: true,
              'data-asyntai-id': 'YOUR_WIDGET_ID'
            }
          ]
        }
      }
    })
  2. Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról
  3. Indítsa újra a Nuxt fejlesztői szervert

Alternatív 3. módszer: Egyszerű HTML / Statikus webhely

Ha a DatoCMS Content Delivery API-ját statikus HTML webhellyel vagy statikus webhely generátorral használja:

  1. Adja hozzá a beágyazási kódot a HTML fájlhoz a záró </body> tag elé:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról
  3. Mentse el a fájlt, és töltse fel a tárhelyére

Alternatív 4. módszer: React (Vite/CRA)

DatoCMS API-t használó szabványos React alkalmazásokhoz (Create React App, Vite):

A lehetőség: Hozzáadás a public/index.html fájlhoz

  1. Nyissa meg a public/index.html fájlt (CRA) vagy az index.html fájlt (Vite)
  2. Adja hozzá a beágyazási kódot a záró </body> tag elé:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Mentse el a fájlt

B lehetőség: useEffect a gyökér komponensben

  1. Hozzon létre egy chatbot komponenst, vagy adja hozzá a gyökér komponenshez:
    // 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
    }
  2. Importálja és renderje a komponenst az App.jsx fájlban vagy a gyökér elrendezésben

3. lépés: Telepítés és ellenőrzés

Miután hozzáadta a chatbot kódját a DatoCMS alapú webhelyéhez, telepítse vagy futtassa a fejlesztői szervert. Látogasson el webhelyére egy új böngészőlapon vagy inkognitóablakban. A jobb alsó sarokban meg kell jelennie a chat widget gombnak. Kattintson rá, hogy megbizonyosodjon arról, hogy megfelelően nyílik meg és működik.

Nem látja a widgetet? Győződjön meg arról, hogy a szkriptet a keretrendszerének megfelelő fájlhoz adta hozzá. Ellenőrizze a böngésző fejlesztői konzolját hibák szempontjából. Ha szerver oldali renderelést használ, győződjön meg arról, hogy a szkript az ügyfél oldalon fut. Próbálja meg üríteni a böngésző gyorsítótárát, vagy nézze meg inkognitóablakban.

Környezeti változók: A jobb biztonság és rugalmasság érdekében fontolja meg a widget azonosítójának környezeti változóban való tárolását (pl. NEXT_PUBLIC_ASYNTAI_ID Next.js esetén vagy VITE_ASYNTAI_ID Vite esetén) a közvetlen beírás helyett.