Nazaj na nadzorno ploščo

Dokumentacija

Naučite se uporabljati Asyntai

Uvod
Namestitev Baza znanja Preizkusite svojo UI Upravljanje spletnih mest
Prilagoditev
Barve pripomočka Ime pomočnika UI Začetno sporočilo Položaj pripomočka Samodejno proženje Pozdravni oblaček Značka neprebranih Način navodil Postavljajte vprašanja Uporabi emodžije Zbirajte e-poštne naslove Zbirajte telefonske številke Pametno zajemanje potencialnih strank Lokalizacija Skrij blagovno znamko Povezava do zasebnosti Prilagojeno obvestilo Prenos prepisa Nov pogovor Zgodovina pogovorov Slogan in statusna pika Govor v besedilo Ikona klepeta Logotip podjetja Omejitev znakov Temperatura
Nasveti za navodila UI Primerjaj načrte
Funkcije
Indeksiranje spletnega mesta Vrzeli v znanju Kartice izdelkov Dinamične kartice izdelkov Dynamic Images Kontekst uporabnika Spremljanje v živo Prevzem s strani človeka Eskalacija Obvestila UI Dnevno poročilo Podatkovni vir v realnem času Podatkovni vir v realnem času Max Člani ekipe Enkratna prijava Vključi slike Slikovni vid Pripomoček za prevajanje Lokalizacija Potencialne stranke Pametno zajemanje potencialnih strank Zahtevki za podporo Rezervacije Vdelave Izključi strani Blokirani IP-ji Pametnejši model Omogoči razmišljanje Predlogi odgovorov Nadaljnja sporočila Govor v besedilo Prenos prepisa Vgrajen klepet
Analitiko
Analitika klepeta Dnevniki klepetov
Integracije
REST API Instagram Messenger WhatsApp Zapier Email Mobilne aplikacije
Drugo
Dodaj na začetni zaslon Prilagojen gumb za odpiranje
Vprašajte AI

Kako dodati klepetalnik Asyntai z UI v DatoCMS

Vodič po korakih za spletne strani, ki jih poganja DatoCMS

Pridobite kodo za vgradnjo
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

Brezglavi CMS: DatoCMS je brezglavi CMS, ki dostavlja vsebino prek API-jev. Kodo klepetalnika je treba dodati v vašo čelno aplikacijo (Next.js, Gatsby, Nuxt itd.), ne na nadzorno ploščo DatoCMS.

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Dodajte v čelni vmesnik Next.js (najpogosteje)

Next.js je najbolj priljubljen čelni okvir, ki se uporablja z DatoCMS. Dodajte klepetalnik z uporabo komponente Script:

App Router (app/layout.tsx):

  1. Odprite svojo korensko datoteko postavitve: app/layout.tsx
  2. Uvozite komponento Script in dodajte klepetalnik:
    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. Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem gradnika
  4. Shranite datoteko in znova zaženite razvojni strežnik

Pages Router (pages/_app.tsx):

  1. Odprite svojo datoteko pages/_app.tsx
  2. Dodajte komponento Script:
    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"
          />
        </>
      )
    }

Nasvet: Uporaba strategy="afterInteractive" zagotavlja, da se klepetalnik naloži takoj po tem, ko stran postane interaktivna, kar zagotavlja dobro ravnovesje med zmogljivostjo in razpoložljivostjo.

Alternativni način 1: Čelni vmesnik Gatsby

Za strani Gatsby, ki vlečejo vsebino iz DatoCMS prek gatsby-source-datocms:

  1. Ustvarite ali uredite gatsby-ssr.js v korenu projekta:
    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. Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem gradnika
  3. Znova zaženite razvojni strežnik Gatsby

Alternativni način 2: Čelni vmesnik Nuxt.js

Za aplikacije Nuxt.js, ki uporabljajo vsebino DatoCMS:

  1. Dodajte v svojo datoteko 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. Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem gradnika
  3. Znova zaženite razvojni strežnik Nuxt

Alternativni način 3: Navaden HTML / statična stran

Če uporabljate API za dostavo vsebine DatoCMS s statično stranjo HTML ali generatorjem statičnih strani:

  1. Dodajte vdelovalno kodo v svojo datoteko HTML pred zaključno oznako </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem gradnika
  3. Shranite datoteko in jo naložite na svoje gostovanje

Alternativni način 4: React (Vite/CRA)

Za standardne aplikacije React (Create React App, Vite itd.) z uporabo DatoCMS API:

Možnost A: Dodajte v public/index.html

  1. Odprite svojo datoteko public/index.html (CRA) ali index.html (Vite)
  2. Dodajte vdelovalno kodo pred zaključno oznako </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Shranite datoteko

Možnost B: useEffect v korenski komponenti

  1. Ustvarite komponento klepetalnika ali dodajte v svojo korensko 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. Uvozite in izrišite komponento v svoji datoteki App.jsx ali korenski postavitvi

Korak 3: Namestite in preverite

Po dodajanju kode klepetalnika na svojo stran, ki jo poganja DatoCMS, namestite ali zaženite razvojni strežnik. Obiščite svojo spletno stran v novem zavihku brskalnika ali oknu brez beleženja. V spodnjem desnem kotu bi morali videti gumb klepetalnika. Kliknite ga, da preverite, ali se pravilno odpre in deluje.

Ne vidite klepetalnika? Prepričajte se, da ste skript dodali v pravilno datoteko za svoj okvir. Preverite razvijalsko konzolo brskalnika za morebitne napake. Če uporabljate izrisovanje na strežniški strani, zagotovite, da se skript izvaja na odjemalski strani. Poskusite počistiti predpomnilnik brskalnika ali si ogledati stran v oknu brez beleženja.

Okoljske spremenljivke: Za boljšo varnost in prilagodljivost razmislite o shranjevanju ID-ja klepetalnika v okoljsko spremenljivko (npr. NEXT_PUBLIC_ASYNTAI_ID za Next.js ali VITE_ASYNTAI_ID za Vite) namesto trde zakodiranosti.