Widgeti manustamine

Lisage oma AI-chatbot mis tahes veebisaidile sekunditega meie lihtsa manuskoodiga.

Kiire alustamine

Lisage see kood enne sulguvat </body>-sildi:

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

See ongi kõik! Teie chatbot on nüüd teie veebisaidil aktiivne.

Kuidas leida oma chatbot'i ID

1. Minge oma chatbot'i seadetele
2. Avage Embed vahekaart
3. Kopeerige manuskood (sisaldab teie ID-d)

Widgeti kohandamine

Widgeti välimust ja käitumist konfigureeritakse teie juhtpaneelis — mitte manuskoodis. Minge Dashboard → Chatbots → [your chatbot] → Widget, et kohandada:

• Positsioon — paremal all, vasakul all või inline
• Värvid — primaar-, tausta- ja tekstivärv ning serva raadius
• Suurus — widgeti laius ja kõrgus

Et avada vestlus automaatselt pärast seadistatavat viivitust, lubage Auto-Open samal seadete lehel vahekaardil Behavior.

Muutused rakenduvad teie veebisaidile automaatselt — manuskoodi pole vaja uuendada. Kõigi saadaolevate valikute jaoks vaadake Widget Customization juhendit.

Widgeti keel tuvastatakse automaatselt iga külastaja brauseri järgi, lähtudes keeltest, mille te lubate oma chatbot'i Languages vahekaardil.

KKK-widget

Kuvage KKK-d nagu akordionit mis tahes lehel:

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

KKK-widget kuvab teie chatbot'i avaldatud KKK-sid. Värvid ja stiilid (primaar-, tausta- ja tekstivärv, serva raadius) seadistatakse asukohas Dashboard → FAQs → Settings.

KKK-widgeti valikud

Kategooria filtri näide

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

Mobiilseks optimeerimine

Chat-widget on täielikult optimeeritud mobiilseadmete jaoks:

• Täislaiuse paigutus väikestel ekraanidel
• Avamisel libisev ülalt-alla animatsioon
• iOS-klaviatuuri käsitlemine (widget kohandub ekraanil oleva klaviatuuriga)
• Safe-area tugi iPhone'i sälgu ja kodunäidiku jaoks
• Suuremad puutealad parema kasutatavuse jaoks
• Sisendi fondi suurus hoiab ära iOS-i automaatse suumimise

Platvormispetsiifilised juhendid

WordPress

Soovitatav: Kasutage ametlikku ChatReact WordPress Plugin lihtsaimaks integreerimiseks Gutenberg plokkide, Elementor widgetite ja lühikoodidega.

Alternatiiv: Manuaalne manustamine läbi "Header/Footer Scripts" plugin'i:

1. Installige ükskõik milline "Header/Footer Scripts" plugin
2. Lisage manuskood jaluse sektsiooni
3. Salvestage ja avaldage

Shopify

Soovitatav: ChatReact Shopify App

Installige ChatReact rakendus Shopify App Store'ist kõige lihtsamaks integreerimiseks:

1. Installige ChatReact rakendus oma Shopify admini
2. Sisestage oma Chatbot ID rakenduse sätetes
3. Chat widget ilmub automaatselt teie e-poelehele
4. Haldate widgeti määranguid per leht või lubate selle kõikjal

Rakendus toetab ka Vormide ja KKK-de widget'e kui App Block'e Theme Editor'is.

Alternatiiv: Manuaalne manustamine

1. Minge Online Store → Themes → Edit Code
2. Avage theme.liquid
3. Lisage kood enne </body>
4. Salvestage

Webflow

1. Minge Project Settings → Custom Code
2. Lisage Footer Code kohta
3. Avaldage sait

Next.js / React

Kasutage Script komponenti:

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

Lisage oma App.vue või layout'i:

<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

Suhelge widgetiga programmiliselt:

// 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();

Testimine

Eelvaate režiim

Enne otsemanustamist:

1. Kasutage Preview funktsiooni oma juhtpaneelil
2. Testige erinevaid stsenaariume
3. Kontrollige, et vastused on täpsed

Tõrkeotsing

Widget ei ilmu

1. Kontrollige brauseri konsooli vigade jaoks
2. Veenduge, et chatbot'i ID on õige
3. Kontrollige, et chatbot on aktiivne (mitte keelatud)
4. Kontrollige, kas reklaamiblokkerid ei sega
5. Kontrollige oma plaani kasutust — widget peatub, kui teie plaani kuuline limiit on täis

Vahemälu- ja optimeerimispluginad

Mõned vahemälu- või skriptide optimeerimise pluginad ümberkirjutavad skripti URL-e, mis võib põhjustada widgeti laadimise peatuse. Kui see juhtub, lisage skripti sildile selge API URL:

<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 atribuut toimib ka KKK- ja vormi widgeti skriptide puhul.

Stiilide konfliktid

Kui teie saidi CSS tekitab konflikte:

• Widget skoopib oma stiilid oma konteinerisse ja kasutab kõrge prioriteediga reegleid, et vastu panna konfliktidele
• Kontrollige z-index väärtusi elementidel, mis widgeti kattuvad
• Vältige laiaulatuslikke !important reegleid teie saidi CSS-is, mis sihtivad üldisi elemente

Jõudlus

Widget on disainitud minimaalset mõju silmas pidades:

• Laaditakse asünkroonselt — ei blokeeri kunagi teie lehe renderdamist
• Kerge: umbes 30 KB kokkusurutud ülekande suurus

Järgmised sammud

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — manustage eraldiseisvaid vorme form-widgeti abil