Zpět na přehled

Dokumentace

Naučte se používat Asyntai

Začínáme
Instalace Znalostní báze Otestujte svou AI Správa webů
Přizpůsobení
Barvy widgetu Název AI asistenta Úvodní zpráva Pozice widgetu Automatické spuštění Uvítací bublina Odznak nepřečtených zpráv Režim instrukcí Klást otázky Používat emoji Sběr e-mailů Sběr telefonních čísel Chytré získávání kontaktů Lokalizace Skrýt značku Odkaz na ochranu soukromí Vlastní oznámení Stažení přepisu Nová konverzace Historie konverzací Slogan a stavová tečka Převod řeči na text Ikona chatu Logo společnosti Limit znaků Teplota
Tipy pro pokyny AI Porovnání tarifů
Funkce
Procházení webu Mezery ve znalostech Produktové karty Dynamické produktové karty Dynamic Images Kontext uživatele Živé sledování Převzetí člověkem Eskalace AI upozornění Denní report Datový kanál v reálném čase Datový kanál v reálném čase Max Členové týmu Jednotné přihlášení Zahrnutí obrázků Rozpoznávání obrázků Widget pro překlad Lokalizace Kontakty Chytré získávání kontaktů Tikety podpory Rezervace Vložené prvky Vyloučení stránek Blokované IP adresy Chytřejší model Zapnout režim přemýšlení Návrhy odpovědí Navazující zprávy Převod řeči na text Stažení přepisu Vložený chat
Analytika
Analytika chatu Historie chatů
Integrace
REST API Instagram Messenger WhatsApp Zapier Email Mobilní aplikace
Jiné
Přidat na plochu Vlastní tlačítko pro otevření
Zeptat se AI

Jak přidat Asyntai AI Chatbota na DatoCMS

Průvodce krok za krokem pro weby postavené na DatoCMS

Získat kód pro vložení
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 je headless CMS, který dodává obsah přes API. Kód chatbota je potřeba přidat do vaší frontendové aplikace (Next.js, Gatsby, Nuxt atd.), nikoli do dashboardu DatoCMS.

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidání do Next.js frontendu (nejběžnější)

Next.js je nejpopulárnější frontend framework používaný s DatoCMS. Přidejte chatbota pomocí komponenty Script:

App Router (app/layout.tsx):

  1. Otevřete svůj kořenový layout soubor: app/layout.tsx
  2. Importujte komponentu Script a přidejte 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. Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
  4. Uložte soubor a restartujte vývojový server

Pages Router (pages/_app.tsx):

  1. Otevřete soubor pages/_app.tsx
  2. Přidejte komponentu 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"
          />
        </>
      )
    }

Tip: Použití strategy="afterInteractive" zajistí, že se chatbot načte hned poté, co se stránka stane interaktivní, což poskytuje dobrý kompromis mezi výkonem a dostupností.

Alternativní metoda 1: Gatsby frontend

Pro Gatsby weby čerpající obsah z DatoCMS přes gatsby-source-datocms:

  1. Vytvořte nebo upravte gatsby-ssr.js v kořenovém adresáři 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. Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
  3. Restartujte vývojový server Gatsby

Alternativní metoda 2: Nuxt.js frontend

Pro aplikace Nuxt.js využívající obsah DatoCMS:

  1. Přidejte do svého 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. Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
  3. Restartujte vývojový server Nuxt

Alternativní metoda 3: Čisté HTML / statický web

Pokud používáte Content Delivery API DatoCMS se statickým HTML webem nebo generátorem statických webů:

  1. Přidejte embed kód do svého HTML souboru před uzavírací značku </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
  3. Uložte soubor a nahrajte na hosting

Alternativní metoda 4: React (Vite/CRA)

Pro standardní React aplikace (Create React App, Vite atd.) používající DatoCMS API:

Možnost A: Přidání do public/index.html

  1. Otevřete soubor public/index.html (CRA) nebo index.html (Vite)
  2. Přidejte embed kód před uzavírací značku </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Uložte soubor

Možnost B: useEffect v kořenové komponentě

  1. Vytvořte komponentu chatbota nebo přidejte do kořenové komponenty:
    // 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. Importujte a vykreslete komponentu ve svém App.jsx nebo kořenovém rozvržení

Krok 3: Nasazení a ověření

Po přidání kódu chatbota na váš web postavený na DatoCMS proveďte nasazení nebo spusťte vývojový server. Navštivte svůj web v nové záložce prohlížeče nebo v anonymním okně. V pravém dolním rohu byste měli vidět tlačítko chatovacího widgetu. Klikněte na něj a ověřte, že se správně otevírá a funguje.

Nevidíte widget? Ujistěte se, že jste skript přidali do správného souboru pro váš framework. Zkontrolujte vývojářskou konzoli prohlížeče, zda nejsou chyby. Pokud používáte server-side rendering, zajistěte, aby se skript spouštěl na straně klienta. Zkuste vymazat mezipaměť prohlížeče nebo zobrazit stránku v anonymním okně.

Proměnné prostředí: Pro lepší zabezpečení a flexibilitu zvažte uložení ID widgetu do proměnné prostředí (např. NEXT_PUBLIC_ASYNTAI_ID pro Next.js nebo VITE_ASYNTAI_ID pro Vite) namísto jeho pevného zadání do kódu.