Widgeto įterpimas

Pridėkite savo AI pokalbių robotą prie bet kurio tinklalapio per kelias sekundes naudodami mūsų paprastą įterpimo kodą.

Greitas pradžios vadovas

Pridėkite šį kodą prieš uždarantį </body> žymeklį:

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

Viskas! Jūsų pokalbių robotas dabar veikia jūsų tinklalapyje.

Kaip rasti savo Chatbot ID

1. Eikite į savo pokalbių roboto nustatymus
2. Perjunkite į skirtuką Embed
3. Nukopijuokite įterpimo kodą (jame yra jūsų ID)

Widgeto pritaikymas

Widgeto išvaizda ir elgsena konfigūruojamos jūsų valdymo skydelyje — ne įterpimo kode. Eikite į Dashboard → Chatbots → [your chatbot] → Widget, kad reguliuotumėte:

• Pozicija — apačioje dešinėje, apačioje kairėje arba inline
• Spalvos — pagrindinė, fono ir teksto spalvos, taip pat kampų apvalumas
• Dydis — widgeto plotis ir aukštis

Norėdami automatiškai atidaryti pokalbį po nustatomo delsos laiko, įjunkite Auto-Open to paties nustatymų puslapio Behavior skirtuke.

Pakeitimai taikomi jūsų tinklalapyje automatiškai — nereikia atnaujinti įterpimo kodo. Peržiūrėkite Widget Customization vadovą, kad sužinotumėte visas galimas parinktis.

Widgeto kalba nustatoma automatiškai pagal kiekvieno lankytojo naršyklę, remiantis kalbomis, kurias įjungiate savo pokalbių roboto Languages skirtuke.

DUK (FAQ) widgetas

Rodykite DUK kaip akordeoną bet kuriame puslapyje:

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

FAQ widgetas rodo paskelbtas DUK iš jūsų pokalbių roboto. Spalvos ir stilius (pagrindinė, fono ir teksto spalvos, kampų apvalumas) konfigūruojami Dashboard → FAQs → Settings.

FAQ widgeto parinktys

Kategorijų filtravimo pavyzdys

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

Mobiliojo optimizavimas

Pokalbių widgetas yra pilnai optimizuotas mobiliesiems įrenginiams:

• Pilno pločio išdėstymas mažiems ekranams
• Pozicijos iš apačios į viršų animacija atidarant
• iOS klaviatūros valdymas (widgetas prisitaiko prie ekrane esančios klaviatūros)
• Palaikymas safe-area (iPhone išpjova ir namų indikatorius)
• Didesni lietimo taikiniai geresniam naudojimui
• Įvesties šrifto dydis neleidžia iOS automatiškai priartinti

Platformai skirti vadovai

WordPress

Rekomenduojama: Naudokite oficialų ChatReact WordPress Plugin lengviausiai integracijai su Gutenberg blokais, Elementor valdikliais ir trumpaisiais kodais.

Alternatyva: Rankinė įterpimas per „Header/Footer Scripts“ įskiepį:

1. Įdiekite bet kurį „Header/Footer Scripts“ įskiepį
2. Pridėkite įterpimo kodą į footer skyrių
3. Išsaugokite ir paskelbkite

Shopify

Rekomenduojama: ChatReact Shopify App

Įdiekite ChatReact programėlę iš Shopify App Store lengviausiai integracijai:

1. Įdiekite ChatReact programėlę savo Shopify administracijoje
2. Įveskite savo Chatbot ID programėlės nustatymuose
3. Chat widgetas automatiškai pasirodys jūsų parduotuvės fronte
4. Valdykite widgeto priskyrimus puslapiams arba įjunkite jį visur

Programėlė taip pat palaiko Form ir FAQ widget'us kaip App Blocks Theme Editor'e.

Alternatyva: Rankinis įterpimas

1. Eikite į Online Store → Themes → Edit Code
2. Atidarykite theme.liquid
3. Pridėkite kodą prieš </body>
4. Išsaugokite

Webflow

1. Eikite į Project Settings → Custom Code
2. Pridėkite į Footer Code
3. Paskelbkite svetainę

Next.js / React

Naudokite Script komponentą:

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

Pridėkite prie savo pagrindinio App.vue arba išdėstymo:

<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

Sąveikaukite su widgetu programuojamai:

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

Testavimas

Peržiūros režimas

Prieš įdedant gyvai:

1. Naudokite Preview funkciją savo valdymo skydelyje
2. Išbandykite skirtingas situacijas
3. Patikrinkite, ar atsakymai yra tinkami

Trikčių šalinimas

Widgetas neatsiranda

1. Patikrinkite naršyklės konsolę dėl klaidų
2. Patikrinkite, ar chatbot ID teisingas
3. Įsitikinkite, kad chatbot yra aktyvus (ne išjungtas)
4. Patikrinkite, ar reklamos blokatoriai netrukdo
5. Patikrinkite savo plano naudojimą — widgetas sustabdomas, kai pasiekiamas mėnesinis plano limitas

Talpinimo ir optimizacijos įskiepiai

Kai kurie talpinimo arba skriptų optimizavimo įskiepiai perrašo skriptų URL, kas gali sustabdyti widgeto užkrovimą. Jei taip nutinka, pridėkite aiškų API URL prie script žymos:

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

Tas pats atributas veikia ir FAQ bei form widget skriptuose.

Stiliaus konfliktai

Jei jūsų svetainės CSS trukdo:

• Widgetas riboja savo stilius savo konteineryje ir naudoja aukšto prioritetumo taisykles konfliktams atsispirti
• Patikrinkite z-index reikšmes elementų, kurie dengia widgetą
• Venkite plačių !important taisyklių jūsų svetainės CSS, kurios taikomos bendriesiems elementams

Veikimas

Widgetas sukurtas turėti minimalų poveikį:

• Užkraunamas asinchroniškai — niekada neužblokuoja puslapio atvaizdavimo
• Lengvas: apie 30 KB suspausto perdavimo

Tolimesni veiksmai

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — įterpkite atskirus formas naudojant form widgetą