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í Notifikační 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 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 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
Ostatní
Přidat na plochu Vlastní tlačítko pro otevření

Jak přidat Asyntai AI Chatbota na Contentful

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

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: Contentful je headless CMS, což znamená, že poskytuje obsah přes API, ale neobsahuje vestavěný frontend. Instalace chatbota závisí na tom, jaký frontend framework používáte pro vykreslování obsahu z Contentful. Zvolte níže metodu, která odpovídá vašemu nastavení.

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.

Metoda 1: Next.js s Contentful (doporučeno)

Pokud používáte Next.js pro vykreslování obsahu z Contentful, přidejte chatbota pomocí komponenty Script:

  1. Otevřete svůj hlavní layout soubor: app/layout.tsx (App Router) nebo pages/_app.tsx (Pages Router)
  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="lazyOnload"
            />
          </body>
        </html>
      )
    }
  3. Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
  4. Uložte soubor a restartujte vývojový server

Tip: Použití strategy="lazyOnload" zajistí, že se chatbot načte až poté, co je stránka plně interaktivní, což poskytuje nejlepší výkon.

Metoda 2: Gatsby s Contentful

Pro Gatsby weby čerpající obsah z Contentful:

  1. Nainstalujte gatsby-plugin-load-script (volitelné, ale doporučené):
    npm install gatsby-plugin-load-script
  2. Přidejte do svého gatsby-config.js:
    module.exports = {
      plugins: [
        {
          resolve: 'gatsby-plugin-load-script',
          options: {
            src: 'https://asyntai.com/static/js/chat-widget.js',
            attributes: {
              'data-asyntai-id': 'YOUR_WIDGET_ID',
              async: true
            }
          }
        }
      ]
    }
  3. Alternativně použijte gatsby-ssr.js:
    // gatsby-ssr.js
    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"
        />
      ])
    }
  4. Restartujte vývojový server Gatsby

Metoda 3: React s Contentful

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

  1. Otevřete soubor public/index.html
  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

Nebo použijte React komponentu s useEffect:

// 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
}

Metoda 4: Vue/Nuxt s Contentful

Pro aplikace Vue nebo Nuxt.js používající Contentful:

Nuxt 3:

  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'
            }
          ]
        }
      }
    })

Vue 3:

  1. Add to your index.html before </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Metoda 5: Statické HTML s Contentful API

Pokud používáte Content Delivery API Contentful s čistým JavaScriptem:

  1. Přidejte embed kód do svého HTML souborů 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. Uložte soubor a nahrajte na hosting

Krok 2: Ověření instalace

Po přidání kódu chatbota na váš web postavený na Contentful 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 souborů 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) namísto jeho pevného zadání do kódu.