Cum să adăugați Chatbot-ul AI Asyntai pe orice site
Ghid universal pentru HTML, site-uri personalizate și generatoare statice
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
Pasul 1: Obțineți codul de încorporare
Mai întâi, accesați panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:
<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>
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.
Pasul 2: Adăugați în fișierul HTML
Cel mai simplu mod de a adăuga chatbot-ul este să lipiți codul de integrare direct în fișierul HTML:
- Deschideți fișierul HTML într-un editor de text
- Găsiți eticheta de închidere
</body> - Inserați codul de încorporare Asyntai chiar înainte de eticheta
</body> - Salvați fișierul
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Asyntai Chatbot - Add before closing body tag -->
<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>
</body>
</html>
Sfat: Adăugarea scriptului înainte de eticheta de închidere </body> asigură că se încarcă după conținutul paginii, ceea ce este optim pentru performanță și nu va încetini pagina.
Pentru site-uri cu pagini multiple
Dacă site-ul dvs. are mai multe pagini HTML, aveți mai multe opțiuni:
Opțiunea A: Adăugați pe fiecare pagină
Adăugați codul de integrare în fiecare fișier HTML unde doriți să apară chatbot-ul.
Opțiunea B: Utilizați un footer include comun
Dacă utilizați server-side includes (SSI), PHP includes sau similar:
- Creați un fișier footer.html (sau footer.php)
- Adăugați codul de integrare Asyntai în acest fișier
- Includeți acest fișier footer în toate paginile dvs.:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
Opțiunea C: Încărcare dinamică JavaScript
Creați un singur fișier JavaScript care încarcă chatbot-ul pe toate paginile:
- Creați un fișier numit asyntai-loader.js:
(function() {
var script = document.createElement('script');
script.async = true;
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
})(); - Înlocuiți
YOUR_WIDGET_IDcu ID-ul real al widget-ului dvs. - Includeți acest script în toate paginile dvs.:
<script src="/js/asyntai-loader.js"></script>
Pentru generatoarele de site-uri statice
Dacă utilizați un generator de site-uri statice, adăugați codul de integrare în layout-ul sau șablonul de bază:
Adăugați în _includes/footer.html sau _layouts/default.html
Adăugați în layouts/partials/footer.html sau layouts/_default/baseof.html
Adăugați în gatsby-browser.js sau utilizați gatsby-ssr.js
Adăugați în pages/_document.js sau utilizați componenta next/script
Adăugați în nuxt.config.js sub head.script
Adăugați în layout-ul de bază din _includes/
Adăugați în src/layouts/Layout.astro înainte de </body>
Adăugați în .vuepress/config.js sub head
Pentru aplicații React / Vue / Angular
Pentru aplicații cu o singură pagină (SPA-uri), puteți adăuga scriptul în index.html sau îl puteți încărca dinamic:
React (metoda index.html)
<!-- In public/index.html, before </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>
React (metoda useEffect)
// In your App.js or a component
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);
}, []);
Vue (în main.js sau App.vue)
// In mounted() or onMounted()
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);
Angular (în index.html)
<!-- In src/index.html, before </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>
Pasul 3: Verificați instalarea
După adăugarea codului, deschideți site-ul dvs. î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? Verificați că scriptul este plasat corect înainte de eticheta </body>. Asigurați-vă că nu există erori JavaScript în consola browserului (apăsați F12 pentru a deschide instrumentele de dezvoltare). Încercați să goliți cache-ul browserului sau să vizualizați într-o fereastră incognito.
Important: Chatbot-ul necesită ca site-ul dvs. să fie servit prin HTTP sau HTTPS (nu deschis direct ca fișier). Dacă testați local, utilizați un server de dezvoltare local.