Atpakaļ uz informācijas paneli

Dokumentācija

Uzziniet, kā lietot Asyntai

Darba sākšana
Instalēšana Zināšanu bāze Testējiet savu MI Pārvaldīt vietnes
Pielāgošana
Logrīka krāsas MI asistenta nosaukums Sākotnējais ziņojums Logrīka pozīcija Automātiskā aktivizēšana Sveiciena burbulis Nelasīto ziņojumu emblēma Instrukciju režīms Uzdot jautājumus Izmantot emocijzīmes Apkopot e-pastus Apkopot tālruņa numurus Viedā potenciālo klientu piesaistīšana Lokalizācija Paslēpt zīmolvedību Privātuma saite Pielāgots paziņojums Stenogrammas lejupielāde Jauna saruna Sarunu vēsture Sauklis un statusa punkts Runa tekstā Tērzēšanas ikona Uzņēmuma logotips Rakstzīmju ierobežojums Temperatūra
MI instrukciju padomi Salīdzināt plānus
Funkcijas
Vietnes pārlūkošana Zināšanu trūkumi Produktu kartes Dinamiskās produktu kartes Dynamic Images Lietotāja konteksts Tiešsaistes uzraudzība Cilvēka pārņemšana Eskalācija MI paziņojumi Ikdienas pārskats Reāllaika datu plūsma Reāllaika datu plūsma Max Komandas dalībnieki Vienotā pieteikšanās Iekļaut attēlus Attēlu atpazīšana Tulkošanas logrīks Lokalizācija Potenciālie klienti Viedā potenciālo klientu piesaistīšana Atbalsta pieteikumi Rezervācijas Iegulšanas Izslēgt lapas Bloķētās IP Gudrāks modelis Iespējot domāšanu Atbilžu ieteikumi Turpmākie ziņojumi Runa tekstā Stenogrammas lejupielāde Iegultā tērzēšana
Analītika
Tērzēšanas analītika Tērzēšanas žurnāli
Integrācijas
REST API Instagram Messenger WhatsApp Zapier Email Mobilās lietotnes
Cits
Pievienot sākuma ekrānam Pielāgota atvēršanas poga
Jautāt MI

Kā pievienot Asyntai MI tērzēšanas robotu DatoCMS

Soli pa solim ceļvedis DatoCMS vadītām tīmekļa vietnēm

Iegūt iegulšanas kodu
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

Headless CMS: DatoCMS ir bezgalvas CMS, kas piegādā saturu caur API. Tērzēšanas robota kods jāpievieno jūsu priekšgala lietojumprogrammai (Next.js, Gatsby, Nuxt utt.), nevis DatoCMS vadības panelim.

1. solis: Iegūstiet savu iegulto kodu

Vispirms dodieties uz savu Asyntai vadības paneli un ritiniet uz leju līdz sadaļai "Iegultais kods". Nokopējiet savu unikālo iegulto kodu, kas izskatīsies šādi:

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

Piezīme: Iepriekš minētais kods ir tikai piemērs. Jums jānokopē savs unikālais iegultais kods no sava Vadības paneļa, jo tas satur jūsu personīgo logrīka ID.

2. solis: Pievienojiet Next.js priekšgalam (visbiežāk)

Next.js ir populārākais priekšgala ietvars, ko izmanto ar DatoCMS. Pievienojiet tērzēšanas robotu, izmantojot Script komponentu:

App Router (app/layout.tsx):

  1. Atveriet savu saknes izkārtojuma failu: app/layout.tsx
  2. Importējiet Script komponentu un pievienojiet tērzēšanas robotu:
    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. Aizstājiet YOUR_WIDGET_ID ar savu reālo logrīka ID
  4. Saglabājiet failu un restartējiet izstrādes serveri

Pages Router (pages/_app.tsx):

  1. Atveriet savu pages/_app.tsx failu
  2. Pievienojiet Script komponentu:
    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"
          />
        </>
      )
    }

Padoms: Izmantojot strategy="afterInteractive", tērzēšanas robots ielādējas uzreiz pēc tam, kad lapa kļūst interaktīva, nodrošinot labu līdzsvaru starp veiktspēju un pieejamību.

Alternatīvā metode 1: Gatsby priekšgals

Gatsby vietnēm, kas iegūst saturu no DatoCMS caur gatsby-source-datocms:

  1. Izveidojiet vai rediģējiet gatsby-ssr.js sava projekta saknē:
    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. Aizstājiet YOUR_WIDGET_ID ar savu reālo logrīka ID
  3. Restartējiet savu Gatsby izstrādes serveri

Alternatīvā metode 2: Nuxt.js priekšgals

Nuxt.js lietojumprogrammām, kas izmanto DatoCMS saturu:

  1. Pievienojiet savam 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. Aizstājiet YOUR_WIDGET_ID ar savu reālo logrīka ID
  3. Restartējiet savu Nuxt izstrādes serveri

Alternatīvā metode 3: Vienkāršs HTML / Statiska vietne

Ja izmantojat DatoCMS satura piegādes API ar statisku HTML vietni vai statisku vietņu ģeneratoru:

  1. Pievienojiet iegulto kodu savam HTML failam pirms noslēdzošā </body> taga:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Aizstājiet YOUR_WIDGET_ID ar savu reālo logrīka ID
  3. Saglabājiet failu un augšupielādējiet savā hostingā

Alternatīvā metode 4: React (Vite/CRA)

Standarta React lietotnēm (Create React App, Vite), kas patērē DatoCMS API:

A variants: Pievienot public/index.html

  1. Atveriet savu public/index.html failu (CRA) vai index.html (Vite)
  2. Pievienojiet iegulto kodu pirms noslēdzošā </body> taga:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Saglabājiet failu

B variants: useEffect saknes komponentā

  1. Izveidojiet tērzēšanas bota komponentu vai pievienojiet savam saknes komponentam:
    // 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ējiet un renderējiet komponentu savā App.jsx vai saknes izkārtojumā

3. solis: Izvietojiet un pārbaudiet

Pēc tērzēšanas robota koda pievienošanas savai DatoCMS vadītajai vietnei izvietojiet vai palaidiet izstrādes serveri. Apmeklējiet savu tīmekļa vietni jaunā pārlūkprogrammas cilnē vai inkognito logā. Jums vajadzētu redzēt tērzēšanas logrīka pogu apakšējā labajā stūrī. Noklikšķiniet uz tās, lai pārliecinātos, ka tā atveras un darbojas pareizi.

Neredzat logrīku? Pārliecinieties, ka esat pievienojis skriptu pareizajam failam savam ietvaram. Pārbaudiet pārlūkprogrammas izstrādātāja konsoli, vai nav kļūdu. Ja izmantojat servera puses renderēšanu, pārliecinieties, ka skripts darbojas klienta pusē. Mēģiniet notīrīt pārlūkprogrammas kešatmiņu vai skatīt inkognito logā.

Vides mainīgie: Labākai drošībai un elastībai apsveriet iespēju glabāt savu logrīka ID vides mainīgajā (piemēram, NEXT_PUBLIC_ASYNTAI_ID Next.js vai VITE_ASYNTAI_ID Vite) nevis to iekodēt.