Tagasi juhtpaneelile

Dokumentatsioon

Õppige Asyntaid kasutama

Alustamine
Paigaldamine Teadmistebaas Testige oma AI-d Halda veebisaite
Kohandamine
Vidina värvid Tehisintellekti assistendi nimi Algsõnum Vidina asukoht Automaatne käivitus Tervitusmull Lugemata märguanne Juhiserežiim Esita küsimusi Kasuta emotikone Kogu e-posti aadresse Kogu telefoninumbreid Nutikas müügivihje kogumine Lokaliseerimine Peida bränding Privaatsuslink Kohandatud teade Vestluse allalaadimine Uus vestlus Vestluste ajalugu Tunnuslause ja olekupunkt Kõnest tekstiks Vestluse ikoon Ettevõtte logo Tähemärkide piirang Temperatuur
AI juhiste nõuanded Võrdle pakette
Funktsioonid
Veebisaidi indekseerimine Teadmiste lüngad Tootekaardid Dünaamilised tootekaardid Dynamic Images Kasutaja kontekst Reaalajas jälgimine Inimese ülevõtt Eskaleerimine AI teavitused Igapäevane aruanne Reaalajas andmevoog Reaalajas andmevoog Max Meeskonnaliikmed Ühekordne sisselogimine Lisa pildid Pilditöötlus Tõlkevidin Lokaliseerimine Kontaktid Nutikas müügivihje kogumine Tugipiletid Broneeringud Manused Välista lehed Blokeeritud IP-d Nutikam mudel Luba mõtlemine Vastuse soovitused Järgsõnumid Kõnest tekstiks Vestluse allalaadimine Manustatud vestlus
Analüütika
Vestluse analüütika Vestluslogid
Integratsioonid
REST API Instagram Messenger WhatsApp Zapier Email Mobiilirakendused
Muu
Lisa avakuvale Kohandatud avamisnupp
Küsi AI-lt

Kuidas lisada Asyntai tehisintellekti vestlusrobot DatoCMS-ile

Samm-sammuline juhend DatoCMS-i toega veebisaitide jaoks

Hangi põimimiskood
Platvorm:
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

Peata CMS: DatoCMS on peata CMS, mis edastab sisu API-de kaudu. Vestlusroboti kood tuleb lisada teie kasutajaliidese rakendusse (Next.js, Gatsby, Nuxt jne), mitte DatoCMS-i juhtpaneelile.

1. samm: hankige oma manuskood

Esmalt minge oma Asyntai juhtpaneelile ja kerige alla jaotiseni "Manuskood". Kopeerige oma unikaalne manuskood, mis näeb välja selline:

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

Märkus: Ülalolev kood on vaid näide. Peate kopeerima oma unikaalse manuskoodi oma juhtpaneelilt, kuna see sisaldab teie isiklikku vidina ID-d.

2. samm: Lisage Next.js kasutajaliidesse (kõige levinum)

Next.js on kõige populaarsem kasutajaliidese raamistik, mida kasutatakse DatoCMS-iga. Lisage vestlusrobot Script komponendi abil:

App Router (app/layout.tsx):

  1. Avage oma juurpaigutuse fail: app/layout.tsx
  2. Importige skriptikomponent ja lisage vestlusrobot:
    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. Asendage YOUR_WIDGET_ID oma tegeliku vidina ID-ga
  4. Salvestage fail ja taaskäivitage oma arendusserver

Pages Router (pages/_app.tsx):

  1. Avage oma fail pages/_app.tsx
  2. Lisage Script komponent:
    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"
          />
        </>
      )
    }

Vihje: Kasutades strategy="afterInteractive" tagatakse, et vestlusrobot laadib kohe pärast lehe interaktiivseks muutumist, pakkudes head tasakaalu jõudluse ja kättesaadavuse vahel.

Alternatiivne meetod 1: Gatsby kasutajaliides

Gatsby saitidele, mis tõmbavad sisu DatoCMS-ist gatsby-source-datocms kaudu:

  1. Looge või muutke gatsby-ssr.js oma projekti juurkaustas:
    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. Asendage YOUR_WIDGET_ID oma tegeliku vidina ID-ga
  3. Taaskäivitage oma Gatsby arendusserver

Alternatiivne meetod 2: Nuxt.js kasutajaliides

Nuxt.js rakenduste jaoks, mis tarbivad DatoCMS-i sisu:

  1. Lisage oma faili 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'
            }
          ]
        }
      }
    })
  2. Asendage YOUR_WIDGET_ID oma tegeliku vidina ID-ga
  3. Taaskäivitage oma Nuxt arendusserver

Alternatiivne meetod 3: tavaline HTML / staatiline sait

Kui kasutate DatoCMS-i sisuedastuse API-t staatilise HTML-saidi või staatilise saidi generaatoriga:

  1. Lisage manuskood oma HTML-faili enne sulgevat </body> silti:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Asendage YOUR_WIDGET_ID oma tegeliku vidina ID-ga
  3. Salvestage fail ja laadige oma hostingusse üles

Alternatiivne meetod 4: React (Vite/CRA)

Standardsete React rakenduste jaoks (Create React App, Vite), mis kasutavad DatoCMS API-t:

Valik A: lisage faili public/index.html

  1. Avage oma fail public/index.html (CRA) või index.html (Vite)
  2. Lisage manuskood enne sulgevat </body> silti:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Salvestage fail

Valik B: useEffect juurkomponendis

  1. Looge vestlusroboti komponent või lisage juurkomponenti:
    // 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. Importige ja renderdage komponent oma App.jsx failis või juurpaigutuses

3. samm: Juurutage ja kontrollige

Pärast vestlusroboti koodi lisamist oma DatoCMS-iga toetatud saidile juurutage või käivitage oma arendusserver. Külastage oma veebisaiti uues brauseri vahekaardil või inkognito aknas. Peaksite nägema vestlusvidina nuppu alumises paremas nurgas. Klõpsake sellel, et veenduda, et see avaneb ja töötab korrektselt.

Ei näe vidinat? Veenduge, et lisasite skripti õigesse faili oma raamistiku jaoks. Kontrollige brauseri arenduskonsooli vigade suhtes. Serveripoolse renderdamise kasutamisel veenduge, et skript käivitub kliendi poolel. Proovige brauseri vahemälu tühjendada või vaadata inkognito aknas.

Keskkonnamuutujad: Parema turvalisuse ja paindlikkuse tagamiseks kaaluge oma vidina ID salvestamist keskkonnamuutujasse (nt NEXT_PUBLIC_ASYNTAI_ID Next.js-i jaoks või VITE_ASYNTAI_ID Vite jaoks) selle asemel, et see otse koodi kirjutada.