Widgetin upotus

Lisää AI-chatbotinne mihin tahansa verkkosivustoon sekunneissa yksinkertaisella upotuskoodillamme.

Pika-aloitus

Lisää tämä koodi ennen sulkevaa </body>-tägiä:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Siinä kaikki! Chatbotinne on nyt käytössä sivustollanne.

Chatbotin ID:n löytäminen

1. Siirry chatbotinne asetuksiin
2. Avaa Embed-välilehti
3. Kopioi embed-koodi (sisältää ID:nne)

Tai löydä ID dashboardin URL-osoitteesta: /dashboard/company/chatbots/[CHATBOT_ID]

Widget-asetukset

Muokkaa widgettiä data-attribuuteilla:

Perusasetukset

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-right"
  data-language="en"
  async
></script>

Väriylikirjoitukset

Ylikirjoita dashboardin asetukset sisäisillä väreillä:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ Widget

Näytä FAQit accordionina millä tahansa sivulla:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ-widget näyttää chatbotiltanne julkaistut usein kysytyt kysymykset.

FAQ Widget -asetukset

Category Filter -esimerkki

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Mobiilioptimointi

Chat-widget on täysin optimoitu mobiililaitteille:

• Koko leveyden asettelu pienillä näytöillä
• Ylöspäin liukuva animaatio avattaessa
• iOS-näppäimistön käsittely (widget mukautuu näytöllä olevaan näppäimistöön)
• Safe-area-tuki iPhonen lovelle ja koti-indikaattorille
• Suuremmat kosketusalueet paremman käytettävyyden vuoksi
• Syöttökentän fonttikoko estää iOS:n automaattisen zoomauksen

Alustakohtaiset ohjeet

WordPress

Suositeltava: Käytä virallista ChatReact WordPress -lisäosaa helpoimman integraation saavuttamiseksi Gutenberg-lohkoilla, Elementor-widgeteillä ja lyhytkoodeilla.

Vaihtoehto: Manuaalinen upotus "Header/Footer Scripts" -lisäosan kautta:

1. Asentakaa mikä tahansa "Header/Footer Scripts" -plugin
2. Lisätkää embed code footer-osioon
3. Tallentakaa ja julkaiskaa

Shopify

Suositeltava: ChatReact Shopify App

Asenna ChatReact-sovellus Shopify App Storesta helpoimman integraation saavuttamiseksi:

1. Asenna ChatReact-sovellus Shopify-hallintapaneelissasi
2. Syötä Chatbot ID sovelluksen asetuksiin
3. Chat-widget ilmestyy automaattisesti myymälääsi
4. Hallitse widget-määrityksiä sivukohtaisesti tai ota käyttöön kaikkialla

Sovellus tukee myös Form- ja FAQ-widgettejä App Blockeina Theme Editorissa.

Vaihtoehto: Manuaalinen upotus

1. Siirtykää Online Store → Themes → Edit Code
2. Avaatte theme.liquid
3. Lisätkää koodi ennen </body>
4. Tallentakaa

Webflow

1. Siirtykää Project Settings → Custom Code
2. Lisätkää Footer Code -kohtaan
3. Julkaiskaa sivusto

Next.js / React

Käyttäkää Script-komponenttia:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Lisää pää-App.vue-tiedostoosi tai layoutiin:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

Käytä widgettiä ohjelmallisesti:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Testing

Preview Mode

Ennen kuin upotatte tuotantoon:

1. Käyttäkää Preview-toimintoa dashboardissanne
2. Testatkaa erilaisia skenaarioita
3. Varmistakaa, että vastaukset ovat paikkansapitäviä

Local Development

Paikalliseen testaamiseen käyttäkää localhost-URL-osoitteita:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Vianmääritys

Widget ei näy

1. Tarkista selainkonsoli virheiden varalta
2. Varmista, että chatbotin ID on oikein
3. Varmista, että chatbot on aktiivinen (ei poistettu käytöstä)
4. Tarkista, häiritsevätkö mainostenesto-ohjelmat

Tyylikonfliktit

Jos sivustosi CSS aiheuttaa konflikteja:

• Widget käyttää shadow DOM:ia eristykseen
• Tarkista z-index-arvot
• Varmista, ettei !important-ylikirjoituksia ole

Suorituskyky

Widget on suunniteltu minimoimaan vaikutus:

• Lazy loaded
• < 50KB total size
• Non-blocking
• Cached aggressively

Seuraavat vaiheet

• WordPress-lisäosa →
• Shopify-integraatio →
• FAQ-hallinta →