Skip to main content
Skip to main content

Widgetin upottaminen

Yksityiskohtaiset ohjeet chatbot-widgetin upottamiseen eri alustoille.

Widgetin upottaminen verkkosivuillesi

Tässä oppaassa opit upottamaan Aihio AI -chatbot-widgetin verkkosivuillesi. Widget toimii kaikilla alustoilla ja vaatii vain yhden koodirivin.

Nopea aloitus (1 rivi)

Yksinkertaisin tapa:

<script
  src="https://widget.aihio.ai/widget.js"
  data-chatbot-id="your-chatbot-id"
  async
></script>

Liitä tämä ennen </body> -tagia HTML-sivuillasi.

Mistä saat chatbot-id:n?

  1. Mene hallintapaneeliin
  2. Valitse chatbot
  3. Mene "Publish" -välilehteen
  4. Kopioi chatbot-id kentästä

Custom Element (Suositeltu 2026)

Moderni tapa käyttää Custom Element -komponenttia:

<!-- Lataa widget-script kerran -->
<script src="https://widget.aihio.ai/widget.js" async></script>

<!-- Lisää chatbot Custom Element -komponentilla -->
<aihio-chat chatbot-id="your-chatbot-id"></aihio-chat>

Etuja:

  • ✅ Yksi script-tag koko sivulle (vaikka useita chatbotteja)
  • ✅ Helppo konfiguroida (HTML-attribuutit)
  • ✅ Moderni standardi (Web Components)

Mukautus:

<aihio-chat
  chatbot-id="your-chatbot-id"
  primary-color="#6366f1"
  position="bottom-right"
  theme-mode="auto"
></aihio-chat>

Alustakohtaiset ohjeet

HTML / Staattiset sivut

Vaihtoehto 1: Script-tag (yksinkertaisin)

<!DOCTYPE html>
<html>
<head>
  <title>Minun sivuni</title>
</head>
<body>
  <!-- Sivun sisältö -->
  
  <!-- Chatbot widget ennen </body> -->
  <script
    src="https://widget.aihio.ai/widget.js"
    data-chatbot-id="your-chatbot-id"
    async
  ></script>
</body>
</html>

Vaihtoehto 2: Custom Element

<body>
  <!-- Sivun sisältö -->
  
  <!-- Widget script -->
  <script src="https://widget.aihio.ai/widget.js" async></script>
  
  <!-- Chatbot -->
  <aihio-chat chatbot-id="your-chatbot-id"></aihio-chat>
</body>

React / Next.js

Next.js (App Router):

// app/layout.tsx tai app/page.tsx
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        
        <Script
          src="https://widget.aihio.ai/widget.js"
          data-chatbot-id="your-chatbot-id"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

React (Client Component):

'use client';

import { useEffect } from 'react';

export default function ChatbotWidget({ chatbotId }: { chatbotId: string }) {
  useEffect(() => {
    // Lataa script kerran
    if (!document.querySelector('script[src*="widget.js"]')) {
      const script = document.createElement('script');
      script.src = 'https://widget.aihio.ai/widget.js';
      script.async = true;
      document.body.appendChild(script);
    }
  }, []);

  return <aihio-chat chatbot-id={chatbotId} />;
}

WordPress

Menetelmä 1: Theme Footer (suositeltu)

  1. Mene Ulkoasu → Tiedostojen muokkaus
  2. Valitse Theme Footer (footer.php)
  3. Lisää ennen </body>:
<script
  src="https://widget.aihio.ai/widget.js"
  data-chatbot-id="your-chatbot-id"
  async
></script>

Menetelmä 2: Widget

  1. Mene Ulkoasu → Widgetit
  2. Lisää "Custom HTML" -widget
  3. Liitä embed-koodi

Menetelmä 3: Plugin (Code Snippets)

  1. Asenna Code Snippets -plugin
  2. Luo uusi snippet
  3. Liitä embed-koodi
  4. Valitse "Run snippet everywhere"

Shopify

Theme Customizer:

  1. Mene Online Store → Themes → Customize
  2. Valitse Theme Settings → Additional Scripts
  3. Liitä embed-koodi "Scripts in footer" -kenttään

Liquid Template (edistyneet):

<!-- theme.liquid, ennen </body> -->
<script
  src="https://widget.aihio.ai/widget.js"
  data-chatbot-id="{{ settings.chatbot_id }}"
  async
></script>

Theme Settings:

  1. Mene Online Store → Themes → Customize → Theme Settings
  2. Lisää "Chatbot ID" -asetus
  3. Käytä {{ settings.chatbot_id }} templateissa

Wix

  1. Mene Add → Embed → Custom Code
  2. Liitä embed-koodi
  3. Aseta "Load code once" (ei jokaisella sivulla)
  4. Tallenna

Huom: Wix vaatii Premium-paketin Custom Code -ominaisuuteen.

Squarespace

  1. Mene Settings → Advanced → Code Injection
  2. Liitä embed-koodi "Footer" -kenttään
  3. Tallenna

Webflow

  1. Mene Project Settings → Custom Code
  2. Liitä embed-koodi "Footer Code" -kenttään
  3. Publishoi sivu

Useita chatbotteja samalla sivulla

Voit upottaa useita chatbotteja samalle sivulle:

<!-- Lataa script kerran -->
<script src="https://widget.aihio.ai/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>

Käyttötapaukset:

  • Eri chatbotit eri kielille
  • Eri chatbotit eri osastoille (myynti, tuki, HR)
  • Testaus (production + test chatbot)

Mukautus

Värit

<aihio-chat
  chatbot-id="your-chatbot-id"
  primary-color="#6366f1"
  background-color="#ffffff"
></aihio-chat>

Sijainti

Vaihtoehdot: bottom-right | bottom-left | top-right | top-left

<aihio-chat
  chatbot-id="your-chatbot-id"
  position="bottom-right"
></aihio-chat>

Teema

Vaihtoehdot: auto | light | dark

<aihio-chat
  chatbot-id="your-chatbot-id"
  theme-mode="auto"
></aihio-chat>

Täydellinen lista: Widget API -dokumentaatio

Testaus

Ennen julkaisua:

  1. Testaa Playground-tilassa:

    • Hallintapaneelissa → Chatbot → Playground
    • Keskustele chatbotin kanssa
    • Tarkista että vastaukset ovat oikein

  2. Testaa widget paikallisesti:

    <!-- Testi HTML-tiedosto -->
<!DOCTYPE html>
<html>
<body>
  <h1>Testi</h1>
  <script
    src="https://widget.aihio.ai/widget.js"
    data-chatbot-id="your-chatbot-id"
    async
  ></script>
</body>
</html>
    • Avaa tiedosto selaimessa
    • Testaa että widget latautuu
    • Testaa että keskustelu toimii

  3. Tarkista konsoli:

    • Avaa Developer Tools (F12)
    • Tarkista että ei virheitä
    • Tarkista että widget API-kutsut onnistuvat

Ongelmat ja ratkaisut

Widget ei lataudu

Syy: Script-tag väärässä paikassa

Ratkaisu:

  • Varmista että script on ennen </body> -tagia
  • Älä laita <head> -osiin

Widget näkyy mutta ei vastaa

Syy: Chatbot-id väärä tai chatbot poistettu

Ratkaisu:

  1. Tarkista chatbot-id hallintapaneelista
  2. Varmista että chatbot on "Published" (ei draft)
  3. Tarkista että chatbotilla on tietopohjaa

Widget ei näy mobiilissa

Syy: CSS-konflikti tai z-index-ongelma

Ratkaisu:

/* Lisää omaan CSS:ään jos tarvitaan */
aihio-chat {
  z-index: 9999 !important;
}

CORS-virheet

Syy: Widget yrittää kutsua API:a eri domainista

Ratkaisu:

  • Widget käyttää automaattisesti oikeaa API-osoitetta
  • Jos ongelmia → tarkista että NEXT_PUBLIC_SITE_URL on oikein

Parhaat käytännöt

1. Lataa script kerran

❌ Älä tee näin:

<!-- Jokaisella sivulla erikseen -->
<script src="widget.js" ...></script>

✅ Tee näin:

<!-- Yksi kertaa layoutissa/templatessa -->
<script src="widget.js" async></script>

2. Käytä async-attribuuttia

✅ Aina:

<script src="..." async></script>

Miksi:

  • Ei hidasta sivun latausta
  • Widget latautuu taustalla
  • Parempi käyttökokemus

3. Testaa eri laitteilla

  • ✅ Desktop (Chrome, Firefox, Safari)
  • ✅ Mobile (iOS Safari, Android Chrome)
  • ✅ Tabletti

4. Tarkista että chatbot on valmis

Ennen upottamista:

  • ✅ Chatbot on "Published" (ei draft)
  • ✅ Tietopohja on lisätty
  • ✅ Testattu Playground-tilassa

Tarvitsetko apua?

Onnea widgetin upottamiseen! 🚀