Как да добавите Asyntai AI чатбот към всеки уебсайт
Универсално ръководство за HTML, персонализирани сайтове и статични генератори
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
Стъпка 1: Вземете вашия код за вграждане
Първо, отидете във вашето табло на Asyntai и превъртете надолу до секцията „Embed Code“. Копирайте вашия уникален код за вграждане, който ще изглежда така:
<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>
Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.
Стъпка 2: Добавете към вашия HTML файл
Най-простият начин да добавите чатбота е да поставите кода за вграждане директно във вашия HTML файл:
- Отворете вашия HTML файл в текстов редактор
- Намерете затварящия таг
</body> - Поставете вашия Asyntai код за вграждане точно преди тага
</body> - Запазете файла
<!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>
Съвет: Добавянето на скрипта преди затварящия таг </body> гарантира, че той се зарежда след съдържанието на страницата ви, което е оптимално за производителността и няма да забави страницата ви.
За уебсайтове с множество страници
Ако вашият уебсайт има множество HTML страници, имате няколко варианта:
Вариант A: Добавете към всяка страница
Добавете кода за вграждане към всеки HTML файл, на който искате чатботът да се появи.
Вариант B: Използвайте общ включваем файл за футър
Ако използвате server-side includes (SSI), PHP includes или подобни:
- Създайте файл footer.html (или footer.php)
- Добавете кода за вграждане на Asyntai към този файл
- Включете този футър файл във всичките си страници:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
Вариант C: Динамично зареждане чрез JavaScript
Създайте един JavaScript файл, който зарежда чатбота на всички страници:
- Създайте файл с име 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);
})(); - Заменете
YOUR_WIDGET_IDс вашия действителен ID на уиджета - Включете този скрипт във всичките си страници:
<script src="/js/asyntai-loader.js"></script>
За генератори на статични сайтове
Ако използвате генератор на статични сайтове, добавете кода за вграждане към базовото си оформление или шаблон:
Добавете към _includes/footer.html или _layouts/default.html
Добавете към layouts/partials/footer.html или layouts/_default/baseof.html
Добавете към gatsby-browser.js или използвайте gatsby-ssr.js
Добавете към pages/_document.js или използвайте компонента next/script
Добавете към nuxt.config.js под head.script
Добавете към базовото си оформление в _includes/
Добавете към src/layouts/Layout.astro преди </body>
Добавете към .vuepress/config.js под head
За React / Vue / Angular приложения
За приложения с една страница (SPA) можете да добавите скрипта към вашия index.html или да го заредите динамично:
React (метод с 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 (метод с 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 (в main.js или 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 (в 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>
Стъпка 3: Проверка на инсталацията
След като добавите кода, отворете уебсайта си в нов раздел на браузъра или в инкогнито прозорец. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Кликнете върху него, за да се уверите, че се отваря и работи правилно.
Не виждате уиджета? Проверете дали скриптът е правилно поставен преди тага </body>. Уверете се, че няма JavaScript грешки в конзолата на браузъра (натиснете F12, за да отворите инструментите за разработчици). Опитайте да изчистите кеша на браузъра или да разгледате в инкогнито прозорец.
Важно: Чатботът изисква вашият уебсайт да бъде обслужван чрез HTTP или HTTPS (не отворен директно като файл). Ако тествате локално, използвайте локален сървър за разработка.