Hoe voegt u de Asyntai AI-chatbot toe aan elke website
Universal guide for HTML, custom sites, and static generators
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
Stap 1: Uw insluitcode ophalen
Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.
Stap 2: Toevoegen aan uw HTML-bestand
De eenvoudigste manier om de chatbot toe te voegen is door de insluitcode rechtstreeks in uw HTML-bestand te plakken:
- Open uw HTML-bestand in een teksteditor
- Zoek de afsluitende
</body>-tag - Plak uw Asyntai-insluitcode net vóór de
</body>-tag - Sla het bestand op
<!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: Het toevoegen van het script vóór de sluitende </body>-tag zorgt ervoor dat het na uw pagina-inhoud wordt geladen, wat optimaal is voor prestaties en uw pagina niet vertraagt.
Voor websites met meerdere pagina's
If your website has multiple HTML pages, you have several options:
Optie A: Toevoegen aan elke pagina
Voeg de insluitcode toe aan elk HTML-bestand waar u de chatbot wilt laten verschijnen.
Optie B: Een gemeenschappelijke footer-include gebruiken
If you're using server-side includes (SSI), PHP includes, or similar:
- Maak een footer.html-bestand (of footer.php) aan
- Voeg de Asyntai-insluitcode toe aan dit bestand
- Neem dit footerbestand op in al uw pagina's:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
Optie C: Dynamisch laden met JavaScript
Create a single JavaScript file that loads the chatbot on all pages:
- Maak een bestand aan met de naam 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);
})(); - Vervang
YOUR_WIDGET_IDdoor uw werkelijke widget-ID - Neem dit script op in al uw pagina's:
<script src="/js/asyntai-loader.js"></script>
Voor statische sitegeneratoren
Als u een statische sitegenerator gebruikt, voeg dan de insluitcode toe aan uw basislay-out of sjabloon:
Voeg toe aan _includes/footer.html of _layouts/default.html
Voeg toe aan layouts/partials/footer.html of layouts/_default/baseof.html
Add to gatsby-browser.js or use gatsby-ssr.js
Voeg toe aan pages/_document.js of gebruik de next/script-component
Add to nuxt.config.js under head.script
Voeg toe aan uw basislay-out in _includes/
Voeg toe aan src/layouts/Layout.astro vóór </body>
Voeg toe aan .vuepress/config.js onder head
Voor React / Vue / Angular-apps
Voor single-page-applicaties (SPA's) kunt u het script toevoegen aan uw index.html of het dynamisch laden:
React (index.html-methode)
<!-- 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 (useEffect-methode)
// 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 (in main.js of 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 (in 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>
Stap 3: Installatie verifiëren
Nadat u de code hebt toegevoegd, opent u uw website in een nieuw browsertabblad of incognitovenster. U zou de chatwidgetknop in de rechteronderhoek moeten zien. Klik erop om te controleren of deze correct opent en werkt.
Ziet u de widget niet? Controleer of het script correct is geplaatst vóór de </body>-tag. Zorg ervoor dat er geen JavaScript-fouten in de console van uw browser staan (druk op F12 om de ontwikkelaarstools te openen). Probeer uw browsercache te wissen of in een incognitovenster te bekijken.
Belangrijk: De chatbot vereist dat uw website wordt geserveerd via HTTP of HTTPS (niet rechtstreeks als bestand geopend). Als u lokaal test, gebruik dan een lokale ontwikkelingsserver.