Jak přidat Asyntai AI chatbota do Strapi

Platforma:

Strapi

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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

Nejprve přejděte na svůj Asyntai Dashboard a sjeďte dolů do sekce „Embed Code“. Zkopírujte svůj jedinečný vkládací kód, který bude vypadat takto:

Metoda 1: Next.js se Strapi (doporučeno)

Pokud používáte Next.js jako svůj frontend Strapi (nejčastější nastavení), 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

Metoda 2: Gatsby se Strapi

Pro weby Gatsby používající gatsby-source-strapi:

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

Metoda 3: Nuxt.js se Strapi

Pro aplikace Nuxt.js používající @nuxtjs/strapi:

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

Nuxt 2:

1. Přidejte do svého nuxt.config.js:
   export default {
  head: {
    script: [
      {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        async: true,
        'data-asyntai-id': 'YOUR_WIDGET_ID'
      }
    ]
  }
}

Metoda 4: React se Strapi

Pro standardní React aplikace (Create React App, Vite) využívající Strapi API:

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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
3. Uložte soubor

Nebo vytvořte React komponentu:

Metoda 5: SvelteKit se Strapi

Pro aplikace SvelteKit využívající obsah Strapi:

1. Upravte svůj soubor src/app.html
2. Přidejte embed kód před uzavírací značku </body>:
   <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
3. Uložte soubor

Metoda 6: Statický web se Strapi API

Pokud používáte REST nebo GraphQL API Strapi se statickým HTML webem:

1. Přidejte embed kód do svého HTML souboru před uzavírací značku </body>:
   <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
2. Uložte soubor a nahrajte na hosting

Krok 2: Ověření instalace

Po přidání kódu chatbota na svůj web založený na Strapi nasaďte nebo spusťte svůj 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 ujistěte se, že se správně otevírá a funguje.