Lär dig hur du enkelt integrerar din anpassade chatbot på din webbplats.
Att integrera Swiftron Chatbot på din webbplats är enkelt och snabbt. Med en engångsintegration och utan behov av löpande ändringar kan du sömlöst förbättra din kundengagemang. Följ dessa enkla steg för att komma igång:
Steg 1: Kopiera Integrationskoden
Gå till Swiftron Integrationssida och kopiera följande kod:
<script async type="module" project-id="YOUR_PROJECT_ID" lang="auto" src="https://swiftron.eu/static/js/chatbot-boot.min.js"></script>
- projekt-id: Detta är ditt unika projekt-ID och kommer att fyllas i automatiskt.
- språk: Mål språket för din chatbot. Du kan använda:
- Valfritt giltigt språkkod från ISO 639 språkkoder (t.ex. 'en' för engelska, 'de' för tyska).
- 'auto', som väljer språket baserat på användarens webbläsarinställningar.
- 'site', som använder språket som anges i webbplatsens HTML-header. Detta läser värdet från
document.documentElement.lang
och ställer in chatbotens språk därefter.
Steg 2: Klistra in koden på din webbplats
Använda en webbplatsbyggare:
Om du använder webbplatsbyggare som Jimdo, WordPress eller Squarespace, följ deras instruktioner för att infoga anpassad kod:
- Jimdo: Hur man infogar egen kod
- WordPress: Använda anpassad HTML-block
- Squarespace: Lägga till anpassad kod på din webbplats
Hantering av din egen kod:
Sätt in den kopierade integrationskoden i HTML-koden på varje sida där du vill att chatboten ska visas. Här är ett exempel:
<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Site</title>
</head>
<body>
<div>Your Content</div>
</body>
<script async type="module"
project-id="YOUR_PROJECT_ID"
lang="auto"
src="https://swiftron.eu/static/js/chatbot-boot.min.js">
</script>
</html>
Ställ in Toggle Chatbot-knapp (Valfritt)
Om du redan har en befintlig kommunikationsruta eller vill skapa din egen knapp för att öppna eller stänga chatboten, kan du enkelt integrera den genom att lägga till dess ID i 'Toggle Chatbot Button' inställningarna på Swiftron Integrationssidan.
Exempel:
<button id="btn-toggle-chatbot">Din Chatbot-ikon</button>
Ställ helt enkelt in 'Toggle Chatbot Button' fältet till din knapps ID, t.ex. 'btn-toggle-chatbot'. Knappens typ kan vara vad som helst (t.ex. div, span). Du behöver inte lägga till någon JavaScript eller händelsehanterare; Swiftron chatboten kommer automatiskt att upptäcka denna knapp och hantera den nödvändiga logiken.
Om inget element med det angivna ID:t hittas, eller om fältet 'Toggle Chatbot Button' är tomt, kommer Swiftron att skapa sin egen chatbot-toggle-knapp på din webbplats.
Anpassa placeringen av chatbot (Valfritt)
Du kan rendera chatboten i ett specifikt element genom att ange dess ID i 'Anpassa placeringen av chatbot' fältet på Swiftron integrationssidan. Chatboten kommer att visas inuti detta element och ersätta allt befintligt innehåll inom det.
I detta fall kommer ingen växlingsknapp för chatboten att renderas eller användas. Chatboten kommer alltid att vara synlig inuti det angivna elementet och kan inte minimeras av användaren.