Grįžti į valdymo skydą

Dokumentacija

Sužinokite, kaip naudoti Asyntai

Pradžia
Įdiegimas Žinių bazė Išbandykite savo DI Tvarkyti svetaines
Pritaikymas
Valdiklio spalvos DI asistento vardas Pradinė žinutė Valdiklio padėtis Automatinis paleidimas Pasisveikinimo burbulas Neperskaitytų ženkliukas Instrukcijų režimas Užduoti klausimus Naudoti jaustukus Rinkti el. pašto adresus Rinkti telefono numerius Išmanusis kontaktų rinkimas Lokalizacija Slėpti prekės ženklą Privatumo nuoroda Pasirinktinis pranešimas Pokalbio atsisiuntimas Naujas pokalbis Pokalbių istorija Šūkis ir būsenos taškas Kalba į tekstą Pokalbio piktograma Įmonės logotipas Simbolių limitas Temperatūra
DI instrukcijų patarimai Palyginti planus
Funkcijos
Svetainės nuskaitymas Žinių spragos Produktų kortelės Dinaminės produktų kortelės Dynamic Images Naudotojo kontekstas Stebėjimas realiu laiku Žmogaus perėmimas Perdavimas DI pranešimai Dienos ataskaita Duomenų srautas realiuoju laiku Duomenų srautas realiuoju laiku Max Komandos nariai Vieningas prisijungimas Įtraukti vaizdus Vaizdų atpažinimas Vertimo valdiklis Lokalizacija Potencialūs klientai Išmanusis kontaktų rinkimas Pagalbos užklausos Rezervacijos Įterpimai Išskirti puslapius Užblokuoti IP Protingesnis modelis Įjungti mąstymą Atsakymų pasiūlymai Tolesni pranešimai Kalba į tekstą Pokalbio atsisiuntimas Įterptas pokalbis
Analitika
Pokalbių analizė Pokalbių žurnalai
Integracijos
REST API Instagram Messenger WhatsApp Zapier Email Mobiliosios programėlės
Kita
Pridėti prie pagrindinio ekrano Pasirinktinis atidarymo mygtukas
Klausti DI

Kaip pridėti Asyntai DI pokalbių robotą prie DatoCMS

Žingsnis po žingsnio vadovas DatoCMS valdomoms svetainėms

Gauti įterpimo kodą
Platforma:
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

Beantgalinė TVS: DatoCMS yra beantgalinė TVS, teikianti turinį per API. Pokalbių roboto kodą reikia pridėti prie sąsajos programos (Next.js, Gatsby, Nuxt ir kt.), o ne prie DatoCMS valdymo skydelio.

1 žingsnis: Gaukite savo įterpimo kodą

Pirma, eikite į savo Asyntai valdymo skydelį ir slinkite žemyn iki "Įterpimo kodas" skyriaus. Nukopijuokite savo unikalų įterpimo kodą, kuris atrodys taip:

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

Pastaba: Aukščiau pateiktas kodas yra tik pavyzdys. Turite nukopijuoti savo unikalų įterpimo kodą iš savo Valdymo skydelio, nes jame yra jūsų asmeninis valdiklio ID.

2 žingsnis: Pridėkite prie Next.js sąsajos (Dažniausias)

Next.js yra populiariausia sąsajos sistema, naudojama su DatoCMS. Pridėkite pokalbių robotą naudodami Script komponentą:

App Router (app/layout.tsx):

  1. Atidarykite pagrindinį išdėstymo failą: app/layout.tsx
  2. Importuokite Script komponentą ir pridėkite pokalbių robotą:
    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. Pakeiskite YOUR_WIDGET_ID savo tikruoju valdiklio ID
  4. Išsaugokite failą ir paleiskite kūrimo serverį iš naujo

Pages Router (pages/_app.tsx):

  1. Atidarykite savo pages/_app.tsx failą
  2. Pridėkite 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"
          />
        </>
      )
    }

Patarimas: Naudojant strategy="afterInteractive" užtikrinama, kad pokalbių robotas krausis iš karto po to, kai puslapis taps interaktyvus, suteikdamas gerą balansą tarp našumo ir prieinamumo.

Alternatyvus metodas 1: Gatsby sąsaja

Gatsby svetainėms, traukiančioms turinį iš DatoCMS per gatsby-source-datocms:

  1. Sukurkite arba redaguokite gatsby-ssr.js projekto šaknyje:
    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. Pakeiskite YOUR_WIDGET_ID savo tikruoju valdiklio ID
  3. Paleiskite Gatsby kūrimo serverį iš naujo

Alternatyvus metodas 2: Nuxt.js sąsaja

Nuxt.js programėlėms, naudojančioms DatoCMS turinį:

  1. Pridėkite prie savo 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. Pakeiskite YOUR_WIDGET_ID savo tikruoju valdiklio ID
  3. Paleiskite Nuxt kūrimo serverį iš naujo

Alternatyvus metodas 3: Paprastas HTML / Statinė svetainė

Jei naudojate DatoCMS Content Delivery API su statine HTML svetaine ar statinių svetainių generatoriumi:

  1. Pridėkite įterpimo kodą prie savo HTML failo prieš uždaromąjį </body> žymą:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Pakeiskite YOUR_WIDGET_ID savo tikruoju valdiklio ID
  3. Išsaugokite failą ir įkelkite į savo prieglobą

Alternatyvus metodas 4: React (Vite/CRA)

Standartinėms React programėlėms (Create React App, Vite), naudojančioms DatoCMS API:

Variantas A: Pridėkite prie public/index.html

  1. Atidarykite savo public/index.html failą (CRA) arba index.html (Vite)
  2. Pridėkite įterpimo kodą prieš uždaromąjį </body> žymą:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Išsaugokite failą

Variantas B: useEffect pagrindiniame komponente

  1. Sukurkite pokalbių roboto komponentą arba pridėkite prie savo šakninio komponento:
    // 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. Importuokite ir atvaizduokite komponentą savo App.jsx arba pagrindiniame išdėstyme

3 žingsnis: Įdiekite ir patikrinkite

Pridėję pokalbių roboto kodą prie DatoCMS valdomos svetainės, įdiekite arba paleiskite kūrimo serverį. Apsilankykite svetainėje naujame naršyklės skirtuke arba inkognito lange. Turėtumėte matyti pokalbių valdiklio mygtuką apatiniame dešiniajame kampe. Spustelėkite jį, kad įsitikintumėte, jog jis atsidaro ir veikia teisingai.

Nematote valdiklio? Įsitikinkite, kad pridėjote skriptą į tinkamą failą savo sistemai. Patikrinkite naršyklės kūrėjo konsolę dėl klaidų. Jei naudojate serverio pusės atvaizdavimą, įsitikinkite, kad skriptas vykdomas kliento pusėje. Pabandykite išvalyti naršyklės talpyklą arba peržiūrėkite inkognito lange.

Aplinkos kintamieji: Geresniam saugumui ir lankstumui apsvarstykite galimybę saugoti valdiklio ID aplinkos kintamajame (pvz., NEXT_PUBLIC_ASYNTAI_ID Next.js arba VITE_ASYNTAI_ID Vite) vietoj tiesioginio įrašymo kode.