Installera AI-chattbot på hemsidan: Steg-för-steg guide

Varför installera AI-chattbot?

En AI-chattbot på din hemsida kan:

• Svara på kundfrågor 24/7
• Generera och kvalificera leads
• Boka möten automatiskt
• Ge bättre kundservice
• Öka konverteringen med 50-200%

Statistik:

• Företag med chattbot får 40% fler leads
• 60-80% av kundfrågor kan hanteras automatiskt
• 24/7 tillgänglighet utan extra kostnad

Läs mer om vad en chattbot är eller hur AI ökar konvertering.

Innan du börjar

Vad du behöver:

1. Konto hos AI-chattbot-leverantör (t.ex. Mira AI)
2. Tillgång till din hemsidas kod/admin
3. 15-30 minuter för installation

Välj rätt verktyg:

Läs mer om bästa AI-chattbotar 2025 för en komplett jämförelse.

Installation på olika plattformar

WordPress

WordPress är världens populäraste CMS. Här är två sätt att installera AI-chattbot:

Metod 1: Plugin (enklast)

Steg 1: Gå till Plugins → Lägg till ny

Steg 2: Sök efter leverantörens plugin

• T.ex. "Mira AI" eller "Tidio"
• Installera och aktivera

Steg 3: Logga in med ditt konto

• Anslut till ditt AI-konto
• Konfigurera inställningar

Steg 4: Klar!

• Widgeten syns automatiskt
• Testa att den fungerar

Metod 2: Script (rekommenderat)

Steg 1: Gå till Utseende → Theme Editor → footer.php

Steg 2: Klistra in script-koden före `</body>`

Steg 3: Spara

Alternativ med plugin:

1. Installera "Insert Headers and Footers"
2. Klistra in koden i Footer-sektionen
3. Spara

Fördelar med script-metoden:

• Fungerar med alla teman
• Ingen beroende av plugin
• Snabbare laddning

Shopify

Shopify är populärt för e-handel. Här är hur du installerar:

Steg 1: Gå till Online Store → Themes

Steg 2: Klicka Actions → Edit code

Steg 3: Öppna theme.liquid

• Hitta `</body>`-taggen
• Klistra in script-koden direkt före

Steg 4: Spara

• Widgeten syns automatiskt
• Testa att den fungerar

Tips:

• Testa i förhandsgranskning först
• Se till att scriptet är korrekt placerat
• Kontrollera att widget-ID är rätt

Webflow

Webflow är populärt för designfokuserade hemsidor.

Steg 1: Gå till Project Settings

Steg 2: Välj Custom Code

Steg 3: Klistra in koden i "Before </body> tag"

Steg 4: Spara och publicera

• Widgeten syns automatiskt
• Testa att den fungerar

Wix

Wix är populärt för enkla hemsidor.

Steg 1: Gå till Inställningar → Custom Code

Steg 2: Klicka "+ Add Code"

Steg 3: Klistra in koden

• Välj "Body - end"
• Applicera på "All pages"

Steg 4: Spara

• Widgeten syns automatiskt
• Testa att den fungerar

Squarespace

Squarespace är populärt för portföljer och småföretag.

Steg 1: Gå till Settings → Advanced → Code Injection

Steg 2: Klistra in koden i "Footer"

Steg 3: Spara

• Widgeten syns automatiskt
• Testa att den fungerar

Vanlig HTML

Om du har en vanlig HTML-hemsida:

Steg 1: Öppna din HTML-fil

Steg 2: Hitta `</body>`-taggen

Steg 3: Klistra in script-koden direkt före

Steg 4: Ladda upp filen

• Widgeten syns automatiskt
• Testa att den fungerar

Exempelkod (Mira AI)

```html
<!-- Mira AI Widget -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'sf-init':
new Date().getTime(),event:'sfwidget'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='sfLayer'?'&l='+l:'';j.async=true;j.src=
'https://cdn.serviceform.com/mira/'+i+'/widget.js';f.parentNode.insertBefore(j,f);
})(window,document,'script','sfLayer','DITT_WIDGET_ID');
</script>
<!-- End Mira AI Widget -->
```

Viktigt: Byt ut `DITT_WIDGET_ID` mot ditt faktiska widget-ID från Mira AI.

Efter installation

1. Testa widgeten

Vad att göra:

• Besök din hemsida
• Klicka på chattbubblan
• Ställ testfrågor
• Verifiera att den fungerar

Vad att kolla:

• Syns widgeten?
• Fungerar chatten?
• Svarar AI korrekt?
• Fungerar det på mobil?

2. Konfigurera AI:n

Vad att göra:

• Ladda upp produktinfo
• Ställ in välkomstmeddelande
• Konfigurera proaktiva triggers
• Koppla CRM
• Sätt upp mötesbokning

Vad att kolla:

• Kan AI svara på vanliga frågor?
• Fungerar proaktiva triggers?
• Synkas leads till CRM?
• Fungerar mötesbokning?

Läs mer om hur du automatisera kundservice med AI eller hur du synkar leads till CRM.

3. Anpassa utseende

Vad att göra:

• Välj färg som matchar din brand
• Ladda upp logotyp
• Sätt position (höger/vänster)
• Anpassa storlek

Vad att kolla:

• Matchar färgen din brand?
• Syns logotyp?
• Är positionen rätt?
• Fungerar det på mobil?

Vanliga problem och lösningar

Widgeten syns inte

Möjliga orsaker:

• Scriptet är inte korrekt placerat
• Widget-ID är fel
• Cache-problem
• Konflikt med andra scripts

Lösningar:

• Töm webbläsarens cache
• Kontrollera att scriptet är korrekt placerat
• Verifiera att widget-ID är rätt
• Testa i inkognitoläge
• Kontrollera konsolen för fel

Widgeten laddar långsamt

Möjliga orsaker:

• Scriptet är inte asynkront
• Konflikt med andra scripts
• Tunga sidor

Lösningar:

• Se till att scriptet är asynkront (async)
• Kontrollera att det inte finns konflikter
• Optimera sidans laddningstid

Fungerar ej på mobil

Möjliga orsaker:

• Responsiva inställningar
• Cache-problem
• Scriptfel

Lösningar:

• Kontrollera responsiva inställningar
• Testa i leverantörens förhandsgranskning
• Töm cache på mobil
• Kontrollera konsolen för fel

Konflikt med andra widgets

Möjliga orsaker:

• Flera chatt-widgets
• Konfliktande scripts

Lösningar:

• Ta bort andra chatt-widgets
• Kontrollera konflikter
• Testa en i taget

Best practices

1. Placering

Rekommendation: Höger nederkant

• Lätt att se
• Stör inte innehållet
• Standardplacering

2. Timing på proaktivt meddelande

Rekommendation: 10-30 sekunder

• Inte för tidigt (irriterande)
• Inte för sent (besökaren hinner lämna)
• Testa olika timing

3. Färg och design

Rekommendation: Matcha din brand

• Använd din brandfärg
• Ladda upp logotyp
• Konsekvent design

4. Testning

Rekommendation: Testa noggrant

• Testa på olika enheter
• Testa olika webbläsare
• Testa olika sidor

Nästa steg

När widgeten är installerad:

1. Träna AI:n

Lägg till FAQ och produktinfo så AI kan svara på frågor.

Läs mer om hur du automatisera FAQ med AI.

2. Koppla CRM

Så leads hamnar rätt automatiskt.

Läs mer om hur du synkar leads till CRM.

3. Sätt upp mötesbokning

Automatisera mötesbokning direkt i chatten.

Läs mer om Calendly vs Ourly.

4. Mät resultat

Följ konverteringar och optimera.

Vad att mäta:

• Antal konversationer
• Konverteringsgrad
• Antal leads
• Bokade möten
• Kundnöjdhet

Vanliga frågor

Behöver jag teknisk kunskap?

Nej. Installation är enkel och kräver bara att klistra in en kod.

Hur lång tid tar det?

Typiskt 15-30 minuter för installation och grundläggande konfiguration.

Fungerar det på alla plattformar?

Ja. AI-chattbotar fungerar på alla plattformar som stöder JavaScript.

Kan jag anpassa utseendet?

Ja. De flesta verktyg låter dig anpassa färg, logotyp och position.

Kom igång idag

Vill du ha hjälp med installation?

Boka demo → – vi hjälper dig installera och konfigurera AI-chattboten.

Vi hjälper dig:

• Välja rätt verktyg
• Installera på din hemsida
• Konfigurera AI:n
• Träna på dina produkter
• Sätt live och börja fånga leads

15 minuter. Inget tryck. Om det inte passar dig säger vi det.

Läs också mer om:

• Vad är en chattbot?
• Vad är Mira AI?
• Hur AI ökar konvertering
• Bästa AI-chattbotar 2025