Widget įterpimas

Pridėkite Jūsų AI chatbot prie bet kurios svetainės per kelias sekundes naudodami mūsų paprastą embed code.

Greitas pradėjimas

Įdėkite šį kodą prieš uždarantį </body> žymę:

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

Viskas! Jūsų chatbot dabar veikia jūsų svetainėje.

Kaip rasti savo Chatbot ID

1. Eikite į savo chatbot nustatymus
2. Atidarykite skirtuką Embed
3. Kopijuokite embed kodą (jame yra jūsų ID)

Arba raskite ID savo dashboard URL: /dashboard/company/chatbots/[CHATBOT_ID]

Widget parinktys

Tinkinkite widget naudodami data atributus:

Pagrindinės parinktys

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

Spalvų perrašymai

Perrašykite darbalaukio nustatymus naudodami inline spalvas:

<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 valdiklis

Rodykite FAQ 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"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ widget rodo jūsų chatbot'o paskelbtus FAQ.

FAQ Widget parinktys

Category Filter 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ų widget yra visiškai optimizuotas mobiliesiems įrenginiams:

• Viso pločio maketas mažuose ekranuose
• Slankioji animacija atidarant
• iOS klaviatūros apdorojimas (widget prisitaiko prie ekrano klaviatūros)
• Safe-area palaikymas iPhone'o išpjovai ir namų indikatoriui
• Didesni lietimo taikiniai geresniam naudojimui
• Įvedimo lauko šrifto dydis apsaugo nuo iOS automatinio priartinimo

Pagal platformą skirtos gairės

WordPress

Rekomenduojama: Naudokite oficialų ChatReact WordPress įskiepį paprasčiausiai integracijai su Gutenberg blokais, Elementor valdikliais ir trumpaisiais kodais.

Alternatyva: Rankinis įterpimas per "Header/Footer Scripts" įskiepį:

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

Shopify

Rekomenduojama: ChatReact Shopify App

Įdiekite ChatReact programėlę iš Shopify App Store paprasčiausiai integracijai:

1. Įdiekite ChatReact programėlę savo Shopify administravimo skydelyje
2. Įveskite savo Chatbot ID programėlės nustatymuose
3. Pokalbių widget automatiškai atsiras jūsų parduotuvės puslapyje
4. Tvarkykite widget priskyrimą puslapiams arba įjunkite visur

Programėlė taip pat palaiko Form ir FAQ valdiklius kaip App Blocks Theme Editoriuje.

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 į pagrindinį App.vue arba šabloną:

<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

Bendraukite su widgetu programiškai:

// 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]'
});

Testavimas

Peržiūros režimas

Prieš įterpiant gyvai:

1. Naudokite Preview funkciją savo dashboard
2. Išbandykite skirtingus scenarijus
3. Patikrinkite, ar atsakymai yra tikslūs

Vietinis vystymas

Vietiniam testavimui naudokite localhost URL'us:

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

Trikčių šalinimas

Valdiklis nerodomas

1. Patikrinkite naršyklės konsolę dėl klaidų
2. Įsitikinkite, kad chatbot ID yra teisingas
3. Įsitikinkite, kad chatbot yra aktyvus (neišjungtas)
4. Patikrinkite, ar ad blockers netrukdo

Stiliaus konfliktai

Jei jūsų svetainės CSS konfliktuoja:

• Valdiklis naudoja shadow DOM izoliacijai
• Patikrinkite z-index reikšmes
• Įsitikinkite, kad nėra !important perrašymų

Našumas

Valdiklis sukurtas turėti minimalų poveikį:

• Lazy loaded
• < 50KB bendras dydis
• Non-blocking
• Cached aggressively

Kiti veiksmai

• WordPress įskiepis →
• Shopify integracija →
• DUK valdymas →