Skip to main content
Aihio AI on kokeiltavissa ilmaiseksi. Rekisteröidy ja testaa omilla sisällöilläsi.
Chat-ikkunan upottaminen
React (Client Component):
'use client';
import { useEffect } from 'react';
export default function ChatbotWidget({ chatbotId }: { chatbotId: string }) {
useEffect(() => {
if (!document.querySelector('script[src*="aihio-widget.js"]')) {
const script = document.createElement('script');
script.src = 'https://aihio.ai/widget/aihio-widget.js';
script.async = true;
document.body.appendChild(script);
}
}, []);
return <aihio-chat chatbot-id={chatbotId} />;
}
WordPress Menetelmä 1: Theme Footer (suositeltu)
Mene Ulkoasu -> Tiedostojen muokkaus Valitse Theme Footer (footer.php) Lisää ennen </body>: <script
src="https://aihio.ai/widget/aihio-widget.js"
data-chatbot-id="your-chatbot-id"
async
></script>
Mene Ulkoasu -> Widgetit Lisää "Custom HTML" -widget Liitä upotuskoodi Menetelmä 3: Plugin (Code Snippets)
Asenna Code Snippets -plugin Luo uusi snippet Liitä upotuskoodi Valitse "Run snippet everywhere"
Shopify Mene Online Store -> Themes -> Customize Valitse Theme Settings -> Additional Scripts Liitä upotuskoodi "Scripts in footer" -kenttään Liquid Template (edistyneet):
<!-- theme.liquid, ennen </body> -->
<script
src="https://aihio.ai/widget/aihio-widget.js"
data-chatbot-id="{{ settings.chatbot_id }}"
async
></script>
Wix Mene Add -> Embed -> Custom Code Liitä upotuskoodi Aseta "Load code once" Tallenna 💡 Vinkki
Wix vaatii Premium-paketin Custom Code -ominaisuuteen.
Squarespace Mene Settings -> Advanced -> Code Injection Liitä upotuskoodi "Footer" -kenttään Tallenna
Webflow Mene Project Settings -> Custom Code Liitä upotuskoodi "Footer Code" -kenttään Julkaise sivu
Useita chatbotteja samalla sivulla Voit upottaa useita chatbotteja samalle sivulle Custom Element -menetelmalla:
<!-- Lataa script kerran -->
<script src="https://aihio.ai/widget/aihio-widget.js" async></script>
<!-- Eri chatbotit eri paikoissa -->
<aihio-chat chatbot-id="chatbot-1" position="bottom-right"></aihio-chat>
<aihio-chat chatbot-id="chatbot-2" position="bottom-left"></aihio-chat>
Eri chatbotit eri kielille Eri chatbotit eri osastoille (myynti, tuki) Testaus (tuotanto + testi-chatbot)
Mukautus
Värit <aihio-chat
chatbot-id="your-chatbot-id"
primary-color="#6366f1"
></aihio-chat>
Sijainti Vaihtoehdot: bottom-right | bottom-left
<aihio-chat
chatbot-id="your-chatbot-id"
position="bottom-right"
></aihio-chat>
Mobiilisijainti Monilla mobiilisivuilla on kiinteitä navigaatiopalkkeja alareunassa, jotka voivat peittää chat-ikkunan. Voit säätää chat-ikkunan mobiilisijaintia erikseen:
<aihio-chat
chatbot-id="your-chatbot-id"
mobile-offset-x="16"
mobile-offset-y="20"
></aihio-chat>
<script
src="https://aihio.ai/widget/aihio-widget.js"
data-chatbot-id="your-chatbot-id"
data-mobile-offset-y="20"
async
></script>
Attribuutti Oletusarvo Kuvaus mobile-offset-x16Etäisyys sivun reunasta mobiililaitteilla (px) mobile-offset-y20Etäisyys alareunasta mobiililaitteilla (px) auto-avoid-overlapfalseSiirrä chat-ikkunaa automaattisesti ylös, jos se on päällekkäin kiinteiden elementtien kanssa (beta)
Mobiiliasetukset voi myös määrittää hallintapaneelissa kohdassa Käyttäytyminen > Sijainti > Mobiili .
Teema Vaihtoehdot: auto | light | dark
<aihio-chat
chatbot-id="your-chatbot-id"
theme-mode="auto"
></aihio-chat>
💡 Vinkki
Chat-ikkunan attribuutteja ei tarvitse asettaa koodissa. Kaikki ulkoasu- ja käyttäytymisasetukset voi määrittää hallintapaneelin editorissa, jolloin muutokset tulevat voimaan ilman koodimuutoksia.
Testaus
Ennen julkaisua: Testaa testialustalla:
Hallintapaneelissa -> Chatbot -> Testialusta Keskustele chatbotin kanssa Tarkista että vastaukset ovat oikein Testaa chat-ikkuna paikallisesti:
<!DOCTYPE html>
<html>
<body>
<h1>Testi</h1>
<script
src="https://aihio.ai/widget/aihio-widget.js"
data-chatbot-id="your-chatbot-id"
async
></script>
</body>
</html>
Avaa tiedosto selaimessa Testaa että chat-ikkuna latautuu Testaa että keskustelu toimii Tarkista konsoli:
Avaa Developer Tools (F12) Tarkista että ei virheitä Tarkista että chat-ikkunan API-kutsut onnistuvat
Ongelmat ja ratkaisut
Chat-ikkuna ei lataudu Syy: Script-tag väärässä paikassa
Varmista että script on ennen </body> -tagia Älä laita <head> -osiin
Chat-ikkuna näkyy mutta ei vastaa Syy: Chatbot-id väärä tai chatbot poistettu
Tarkista chatbot-id hallintapaneelista Varmista että chatbot on julkaistu (Julkaise-välilehti) Tarkista että chatbotilla on tietopohjaa
Chat-ikkuna ei näy mobiilissa Syy: CSS-konflikti tai z-index-ongelma
/* Lisää omaan CSS:ään jos tarvitaan */
aihio-chat {
z-index: 9999 !important;
}
CORS-virheet Syy: Chat-ikkuna yrittää kutsua API:a eri domainista
Chat-ikkuna käyttää automaattisesti oikeaa API-osoitetta Jos ongelmia, tarkista että domain on oikein ja chatbot on julkaistu
Parhaat käytännöt 💡 Vinkki
Lataa script kerran -- Lisää script layoutiin tai templateen, ei jokaiselle sivulle erikseenKäytä async-attribuuttia -- Chat-ikkuna latautuu taustalla eikä hidasta sivuaTestaa eri laitteilla -- Desktop, mobiili ja tablettiVarmista että chatbot on valmis -- Tietopohja lisätty, testattu testialustalla, julkaistu Julkaise-välilehdeltä
Seuraavaksi Testaa chatbotin toimintaa ennen julkaisua
Chat-ikkunan tietoturva, evästeet ja CSP-yhteensopivuus
Ratkaisuja yleisimpiin ongelmiin