איך להוסיף צ'אטבוט AI של Asyntai לכל אתר
מדריך אוניברסלי ל-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: קבל את קוד ההטמעה שלך
First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:
<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: הוספה לקובץ 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: שימוש ב-footer include משותף
אם אתה משתמש ב-server-side includes (SSI), PHP includes או דומה:
- צור קובץ footer.html (או footer.php)
- הוסף את קוד ההטמעה של Asyntai לקובץ זה
- כלול קובץ footer זה בכל העמודים שלך:
<!-- 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במזהה הווידג'ט האמיתי שלך - כלול סקריפט זה בכל העמודים שלך:
<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
עבור אפליקציות עמוד יחיד (SPAs), ניתן להוסיף את הסקריפט ל-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 (לא נפתח ישירות כקובץ). אם אתה בודק מקומית, השתמש בשרת פיתוח מקומי.