Powrót do panelu

Dokumentacja

Dowiedz się, jak korzystać z Asyntai

Pierwsze kroki
Instalacja Baza wiedzy Przetestuj swoje AI Zarządzaj stronami
Personalizacja
Kolory widgetu Nazwa asystenta AI Wiadomość powitalna Pozycja widgetu Automatyczne uruchamianie Dymek powitalny Odznaka nieprzeczytanych Tryb instrukcji Zadawanie pytań Używanie emoji Zbieranie e-maili Zbieranie numerów telefonów Inteligentne pozyskiwanie kontaktów Lokalizacja Ukryj oznaczenie marki Link do polityki prywatności Niestandardowe powiadomienie Pobieranie transkrypcji Nowa rozmowa Historia rozmów Slogan i kropka statusu Zamiana mowy na tekst Ikona czatu Logo firmy Limit znaków Temperatura
Wskazówki dotyczące instrukcji AI Porównaj plany
Funkcje
Indeksowanie strony Luki w wiedzy Karty produktów Dynamiczne karty produktów Dynamic Images Kontekst użytkownika Monitorowanie na żywo Przejęcie przez człowieka Eskalacja Powiadomienia AI Raport dzienny Dane w czasie rzeczywistym Dane w czasie rzeczywistym Max Członkowie zespołu Jednokrotne logowanie Dołącz obrazy Rozpoznawanie obrazów Widget tłumaczenia Lokalizacja Kontakty Inteligentne pozyskiwanie kontaktów Zgłoszenia wsparcia Rezerwacje Osadzenia Wyklucz strony Zablokowane adresy IP Inteligentniejszy model Włącz myślenie Sugestie odpowiedzi Wiadomości uzupełniające Zamiana mowy na tekst Pobieranie transkrypcji Osadzony czat
Analityka
Analityka czatu Dzienniki czatów
Integracje
REST API Instagram Messenger WhatsApp Zapier Email Aplikacje mobilne
Inne
Dodaj do ekranu głównego Niestandardowy przycisk otwierania
Zapytaj AI

Jak dodać chatbota AI Asyntai do DatoCMS

Przewodnik krok po kroku dla stron opartych na DatoCMS

Pobierz kod osadzania
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

Bezglowy CMS (Headless CMS): DatoCMS to bezglowy CMS, który dostarcza treść przez API. Kod chatbota należy dodać do aplikacji frontendowej (Next.js, Gatsby, Nuxt itp.), a nie do panelu DatoCMS.

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

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

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Krok 2: Dodaj do frontendu Next.js (najczęściej stosowane)

Next.js to najpopularniejszy framework frontendowy używany z DatoCMS. Dodaj chatbota za pomocą komponentu Script:

App Router (app/layout.tsx):

  1. Otwórz główny plik układu: app/layout.tsx
  2. Zaimportuj komponent Script i dodaj chatbota:
    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. Zamień YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu
  4. Zapisz plik i zrestartuj serwer deweloperski

Pages Router (pages/_app.tsx):

  1. Otwórz plik pages/_app.tsx
  2. Dodaj komponent 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"
          />
        </>
      )
    }

Wskazówka: Użycie strategy="afterInteractive" zapewnia, że chatbot ładuje się zaraz po tym, jak strona stanie się interaktywna, co zapewnia dobra równowagę między wydajnością a dostepnoscia.

Metoda alternatywna 1: Frontend Gatsby

Dla stron Gatsby pobierajacych treść z DatoCMS przez gatsby-source-datocms:

  1. Utwórz lub edytuj gatsby-ssr.js w katalogu głównym projektu:
    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. Zamień YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu
  3. Zrestartuj serwer deweloperski Gatsby

Metoda alternatywna 2: Frontend Nuxt.js

Dla aplikacji Nuxt.js korzystających z treści DatoCMS:

  1. Dodaj do swojego 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. Zamień YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu
  3. Zrestartuj serwer deweloperski Nuxt

Metoda alternatywna 3: Czysty HTML / strona statyczna

Jeśli używasz Content Delivery API DatoCMS ze statyczną stroną HTML lub generatorem stron statycznych:

  1. Dodaj kod osadzania do pliku HTML przed zamykającym znacznikiem </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Zamień YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu
  3. Zapisz plik i prześlij na hosting

Metoda alternatywna 4: React (Vite/CRA)

Dla standardowych aplikacji React (Create React App, Vite) korzystających z API DatoCMS:

Opcja A: Dodaj do public/index.html

  1. Otwórz plik public/index.html (CRA) lub index.html (Vite)
  2. Dodaj kod osadzania przed zamykającym znacznikiem </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Zapisz plik

Opcja B: useEffect w komponencie głównym

  1. Utwórz komponent chatbota lub dodaj do komponentu głównego:
    // 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. Zaimportuj i wyrenderuj komponent w pliku App.jsx lub w głównym ukladzie

Krok 3: Wdrożenie i weryfikacja

Po dodaniu kodu chatbota do witryny opartej na DatoCMS, wdróż witrynę lub uruchom serwer deweloperski. Odwiedź swoja stronę w nowej karcie przeglądarki lub w trybie incognito. Przycisk widgetu czatu powinien byc widoczny w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.

Nie widzisz widgetu? Upewnij się, że dodałeś skrypt do właściwego pliku dla swojego frameworka. Sprawdź konsolę deweloperska przeglądarki pod kątem błędów. Jeśli używasz renderowania po stronie serwera, upewnij się, że skrypt uruchamia się po stronie klienta. Spróbuj wyczyść pamięć podręczną przeglądarki lub wyświetlić stronę w oknie incognito.

Zmienne środowiskowe: Dla lepszego bezpieczeństwa i elastyczności rozważ przechowywanie identyfikatora widgetu w zmiennej środowiskowej (np. NEXT_PUBLIC_ASYNTAI_ID dla Next.js lub VITE_ASYNTAI_ID dla Vite) zamiast wpisywania go na stale w kodzie.