Ako pridat Asyntai AI chatbota na akukolvek webovú stránku
Univerzalny sprievodca pre HTML, vlastné stránky a staticke generatory
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: Ziskajte svoj vkladací kod
Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii "Vkladaci kod". Skopirujte svoj jedinečný vkladací kod, ktory bude vyzerat takto:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Poznámka: Kod vyššie je len priklad. Musite skopirovat svoj vlastný jedinečný vkladací kod zo svojho Dashboardu, pretože obsahuje vase osobne ID widgetu.
Krok 2: Pridanie do vasho HTML súboru
Najjednoduchší sposob pridania chatbota je vloženie vkladacieho kodu priamo do vasho HTML súboru:
- Otvorte svoj HTML súbor v textovom editore
- Najdite uzatvaraci tag
</body> - Vložíte svoj vkladací kod Asyntai tesne pred tag
</body> - Uložte súbor
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Asyntai Chatbot - Add before closing body tag -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>
Tip: Pridanie skriptu pred uzatvaraci tag </body> zabezpeci, ze sa nacita po obsahu vasej stránky, co je optimalne pre výkon a nespomalí vasu stránku.
Pre viacstrankove webove stránky
Ak ma vasa webova stranka viacero HTML stránok, mate niekolko možnosti:
Možnosť A: Pridat na kazdu stránku
Pridajte vkladací kod do kazdeho HTML súboru, kde chcete, aby sa chatbot zobrazoval.
Možnosť B: Použitie spolocneho zahrnutia paty
Ak používate serverove zahrnutia (SSI), PHP zahrnutia alebo podobne:
- Vytvorte súbor footer.html (alebo footer.php)
- Pridajte vkladací kod Asyntai do tohto súboru
- Zahrnte tento súbor paty do všetkých vasich stránok:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
Možnosť C: Dynamicke nacitanie JavaScriptom
Create a single JavaScript file that loads the chatbot on all pages:
- Vytvorte súbor s názvom 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);
})(); - Nahradte
YOUR_WIDGET_IDvasim skutocnym ID widgetu - Zahrnte tento skript do všetkých vasich stránok:
<script src="/js/asyntai-loader.js"></script>
Pre generatory statickych stránok
Ak používate generator statickych stránok, pridajte vkladací kod do svojho zakladneho rozloženia alebo šablóny:
Pridajte do _includes/footer.html alebo _layouts/default.html
Pridajte do layouts/partials/footer.html alebo layouts/_default/baseof.html
Add to gatsby-browser.js or use gatsby-ssr.js
Pridajte do pages/_document.js alebo použite komponent next/script
Pridajte do nuxt.config.js pod head.script
Pridajte do svojho zakladneho rozloženia v _includes/
Pridajte do src/layouts/Layout.astro pred </body>
Pridajte do .vuepress/config.js pod head
Pre aplikacie React / Vue / Angular
Pre jednostrankove aplikacie (SPA) môžete pridat skript do svojho index.html alebo ho nacitat dynamicky:
React (metoda index.html)
<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 (v main.js alebo 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 (v index.html)
<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Krok 3: Overenie inštalácie
Po pridani kodu otvorte svoju webovú stránku v novej karte prehliadača alebo v okne inkognito. Mali by ste vidiet tlačidlo chatoveho widgetu v pravom dolnom rohu. Kliknite nan, aby ste sa uistili, ze sa otvara a funguje správne.
Nevidite widget? Skontrolujte, ze je skript správne umiestneny pred tagom </body>. Uistite sa, ze vo vasom prehliadaci nie su žiadne chyby JavaScriptu v konzole (stlacte F12 na otvorenie vyvojarskych nástrojov). Skuste vyčistiť vyrovnávaciu pamat prehliadača alebo zobrazit web v okne inkognito.
Dôležité: Chatbot vyžaduje, aby bola vasa webova stranka poskytovana cez HTTP alebo HTTPS (nie otvorena priamo ako súbor). Ak testujete lokalne, použite lokalny vývojový server.