Înapoi la tabloul de bord

Documentație

Aflați cum să utilizați Asyntai

Primii pași
Instalare Bază de cunoștințe Testează-ți AI-ul Gestionează site-urile
Personalizare
Culorile widget-ului Numele asistentului AI Mesaj inițial Poziția widget-ului Declanșare automată Balon de notificare Insignă de necitit Mod instrucțiuni Adresează întrebări Utilizare Emoji Colectare e-mailuri Colectare numere de telefon Captare inteligentă de lead-uri Localizare Ascunde branding-ul Link de confidențialitate Notificare personalizată Descărcare transcriere Conversație nouă Istoricul conversațiilor Slogan și punct de stare Vorbire în text Iconiță chat Logo companie Limită de caractere Temperatură
Sfaturi pentru instrucțiuni AI Compară planurile
Funcționalități
Scanare site web Lacune de cunoștințe Carduri de produse Contextul utilizatorului Monitorizare în timp real Preluare umană Escaladare Notificări AI Raport zilnic Flux de date în timp real Flux de date în timp real Max Membri echipei Autentificare unică Include imagini Viziune imagine Widget de traducere Localizare Lead-uri Captare inteligentă de lead-uri Tichete de suport Rezervări Exclude pagini IP-uri blocate Model Mai Inteligent Activează gândirea Sugestii de răspuns Mesaje de urmărire Vorbire în text Descărcare transcriere Chat integrat
Analize
Analize chat Jurnale de chat
Integrări
REST API Instagram Messenger WhatsApp Zapier Email Aplicații mobile
Altele
Adaugă pe ecranul principal Buton personalizat de deschidere

Cum să adăugați Chatbot-ul AI Asyntai în Strapi

Ghid pas cu pas pentru site-urile bazate pe Strapi

Obține codul de încorporare
Platformă:
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

CMS Headless: Strapi este un CMS headless care furnizează conținut prin API, dar nu include un frontend integrat. Instalarea chatbot-ului depinde de framework-ul frontend pe care îl utilizați pentru a reda conținutul Strapi. Alegeți metoda de mai jos care corespunde configurației dvs.

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Metoda 1: Next.js cu Strapi (Recomandat)

Dacă utilizați Next.js ca frontend Strapi (cea mai frecventă configurație), adăugați chatbot-ul folosind componenta Script:

  1. Deschideți fișierul de layout principal: app/layout.tsx (App Router) sau pages/_app.tsx (Pages Router)
  2. Importați componenta Script și adăugați chatbot-ul:
    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. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
  4. Salvați fișierul și reporniți serverul de dezvoltare

Sfat: Utilizarea strategy="lazyOnload" asigură că chatbot-ul se încarcă după ce pagina este complet interactivă, oferind cea mai bună performanță pentru site-ul bazat pe Strapi.

Metoda 2: Gatsby cu Strapi

Pentru site-urile Gatsby care utilizează gatsby-source-strapi:

  1. Creați sau editați gatsby-ssr.js în rădăcina proiectului:
    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. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
  3. Reporniți serverul de dezvoltare Gatsby

Metoda 3: Nuxt.js cu Strapi

Pentru aplicații Nuxt.js care utilizează @nuxtjs/strapi:

Nuxt 3:

  1. Adăugați în 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. Adăugați în 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 cu Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

  1. Deschideți fișierul public/index.html (CRA) sau index.html (Vite)
  2. Add the embed code before the closing </body> tag:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Salvați fișierul

Sau creați o componentă React:

// 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 5: SvelteKit cu Strapi

Pentru aplicații SvelteKit care consumă conținut Strapi:

  1. Editați fișierul src/app.html
  2. Add the embed code before the closing </body> tag:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Salvați fișierul

Metoda 6: Site static cu API-ul Strapi

Dacă utilizați API-ul REST sau GraphQL al Strapi cu un site HTML static:

  1. Adăugați codul de integrare în fișierul HTML înainte de eticheta de închidere </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Salvați fișierul și încărcați-l pe hostingul dvs.

Pasul 2: Verificați instalarea

După ce ați adăugat codul chatbot-ului pe site-ul bazat pe Strapi, implementați sau rulați serverul de dezvoltare. Vizitați site-ul într-o filă nouă de browser sau într-o fereastră incognito. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Asigurați-vă că ați adăugat scriptul în fișierul corect pentru framework-ul dvs. Verificați consola de dezvoltare a browserului pentru eventuale erori. Dacă utilizați randare pe server, asigurați-vă că scriptul rulează pe partea de client. Încercați să goliți cache-ul browserului sau să vizualizați într-o fereastră incognito.

Variabile de mediu: Pentru o securitate și flexibilitate mai bune, luați în considerare stocarea ID-ului widget-ului într-o variabilă de mediu (de ex., NEXT_PUBLIC_ASYNTAI_ID pentru Next.js sau VITE_ASYNTAI_ID pentru Vite) în loc să îl codificați direct.