Widgetin upotus

Lisää AI-chatbotisi mille tahansa verkkosivustolle sekunneissa yksinkertaisella upotuskoodillamme.

Aloita nopeasti

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

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

Siinä kaikki! Chatbotisi on nyt käytössä verkkosivustollanne.

Chatbotin ID:n löytäminen

1. Siirtykää chatbotinne asetuksiin
2. Valitkaa Upotus-välilehti
3. Kopioikaa upotuskoodi (sisältää ID:n)

Widgetin mukauttaminen

Widgetin ulkoasu ja käyttäytyminen määritellään hallintapaneelissanne — ei upotuskoodissa. Siirtykää kohtaan Hallintapaneeli → Chatbotit → [chatbotinne] → Widget säätääksenne:

• Sijainti — oikea alakulma, vasen alakulma tai upotettu (inline)
• Värit — pääväri, tausta- ja tekstivärit sekä reunojen pyöristys
• Koko — widgetin leveys ja korkeus

Jos haluatte avata chatin automaattisesti konfiguroitavan viiveen jälkeen, ottakaa käyttöön Automaattinen avaus saman asetussivun Käyttäytyminen-välilehdellä.

Muutokset päivittyvät verkkosivullenne automaattisesti — upotuskoodia ei tarvitse päivittää. Katso Widget Customization -opas kaikista saatavilla olevista vaihtoehdoista.

Widgetin kieli tunnistetaan automaattisesti vierailijan selaimesta niiden kielten perusteella, jotka olette ottaneet käyttöön chatbotinne Kielet-välilehdellä.

FAQ-widget

Näyttäkää usein kysytyt kysymykset akordeonina millä tahansa sivulla:

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

FAQ-widget näyttää julkaisunne FAQ:t chatbotiltanne. Värit ja tyylittely (pääväri, tausta- ja tekstivärit, reunojen pyöristys) määritellään kohdassa Hallintapaneeli → FAQ:t → Asetukset.

FAQ-widgetin asetukset

Kategoriasuodattimen 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:

• Kokonaleveysasettelu pienillä näytöillä
• Liukuva avautumis-animaatio
• iOS-näppäimistön käsittely (widget säätää sijaintiaan näytöllä olevan näppäimistön mukaan)
• Safe-area-tuki iPhonen lovelle ja kotipalkille
• Suuremmat kosketuskohteet paremman käytettävyyden vuoksi
• Syötteen fonttikoko estää iOS:n automaattisen zoomauksen

Alustakohtaiset ohjeet

WordPress

Suositeltu: Käyttäkää virallista ChatReact WordPress Plugin -lisäosaa helpoimpaan integrointiin Gutenberg-lohkojen, Elementorin widgetien ja shortcodejen kanssa.

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

1. Asentakaa mikä tahansa "Header/Footer Scripts" -lisäosa
2. Lisätkää upotuskoodi footer-kohtaan
3. Tallettakaa ja julkaiskaa

Shopify

Suositus: ChatReact Shopify App

Asentakaa ChatReact-sovellus Shopify App Storesta helpoimpaan integrointiin:

1. Asentakaa ChatReact-sovellus Shopify-hallintapaneeliinne
2. Syöttäkää Chatbot ID sovelluksen asetuksiin
3. Chat-widget ilmestyy automaattisesti myymäläänne
4. Hallinnoikaa widgetin kohdistuksia sivukohtaisesti tai ottakaa se käyttöön kaikkialla

Sovellus tukee myös Lomake- ja FAQ-widgettejä App Blockseina Theme Editorissa.

Vaihtoehto: Manuaalinen upotus

1. Siirtykää Online Store → Themes → Edit Code
2. Avaa theme.liquid
3. Lisää koodi ennen </body>-tägää
4. Tallenna

Webflow

1. Siirtykää Project Settings → Custom Code
2. Lisätkää koodi 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ätkää pää-App.vue-tiedostoon 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-rajapinta

Voitte ohjata widgetiä ohjelmallisesti:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Testaus

Esikatselutila

Ennen live-upotusta:

1. Käyttäkää Esikatselu-toimintoa hallintapaneelissanne
2. Testatkaa erilaisia skenaarioita
3. Varmistakaa, että vastaukset ovat tarkkoja

Vianmääritys

Widget ei näy

1. Tarkastakaa selaimen konsolista virheilmoitukset
2. Varmistakaa chatbotin ID on oikea
3. Varmistakaa, että chatbot on aktiivinen (ei poistettu käytöstä)
4. Tarkastakaa, häiritsevätkö mainosten esto- tai muut lisäosat
5. Tarkastakaa tilinne käyttö — widget pysähtyy, kun tilauksen kuukausiraja saavutetaan

Välimuisti- ja optimointilisäosat

Jotkin välimuisti- tai skriptin optimointilisäosat muuttavat skriptien URL-osoitteita, mikä voi estää widgetin latautumisen. Jos näin tapahtuu, lisätkää selkeä API-URL skriptitunnisteeseen:

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

Sama attribuutti toimii myös FAQ- ja lomake-widgetin skripteissä.

Tyylikonfliktit

Jos sivustonne CSS aiheuttaa ristiriitoja:

• Widget rajoittaa tyylinsä omaan konteineriinsa ja käyttää korkean prioriteetin sääntöjä ristiriitojen vastustamiseksi
• Tarkastakaa widgetin päällekkäisiä elementtejä koskevat z-index-arvot
• Vältätte yleisiä !important-sääntöjä sivustonne CSS:ssä, jotka kohdistuvat geneerisiin elementteihin

Suorituskyky

Widget on suunniteltu minimoimaan vaikutus:

• Ladataan asynkronisesti — ei koskaan estä sivun renderöintiä
• Kevyt: noin 30 KB pakattuna

Seuraavat askeleet

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — upottakaa erillisiä lomakkeita lomake-widgetillä