Vdelava vidžeta

Dodajte vaš AI klepetalni bot na katerokoli spletno stran v nekaj sekundah z našo preprosto kodo za vdelavo.

Hitri začetek

Dodajte to kodo pred zapiralnim </body> tagom:

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

To je to! Vaš klepetalni robot je zdaj aktiven na vaši spletni strani.

Iskanje ID-ja vašega klepetalnega robota

1. Pojdite v nastavitve vašega klepetalnega robota
2. Odprite zavihek Embed
3. Kopirajte vstavno kodo (vsebuje vaš ID)

Ali poiščite ID v URL-ju vaše nadzorne plošče: /dashboard/company/chatbots/[CHATBOT_ID]

Widget Options

Prilagodite widget z data attributes:

Osnovne možnosti

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

Prepisovanje barv

Prepišite nastavitve dashboarda z barvami v vrstici:

<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

Prikažite FAQ kot accordion na kateri koli strani:

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

Pripomoček FAQ prikazuje objavljena FAQs iz vašega chatbota.

Možnosti FAQ widgeta

Primer filtriranja kategorij

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

Mobilna optimizacija

Chat widget je popolnoma optimiziran za mobilne naprave:

• Postavitev polne širine na majhnih zaslonih
• Animacija drsenja navzgor ob odpiranju
• Ravnanje s tipkovnico iOS (widget se prilagodi zaslonski tipkovnici)
• Podpora za safe-area za iPhone notch in home indikator
• Večje dotične tarče za boljšo uporabnost
• Velikost pisave vnosa preprečuje samodejno povečavo iOS

Navodila za posamezne platforme

WordPress

Priporočeno: Uporabite uradni ChatReact WordPress vtičnik za najlažjo integracijo z Gutenberg bloki, Elementor pripomočki in kratkimi kodami.

Alternativa: Ročna vdelava prek vtičnika "Header/Footer Scripts":

1. Namestite poljubni vtičnik "Header/Footer Scripts"
2. Dodajte vdelano kodo v odsek footer
3. Shranite in objavite

Shopify

Priporočeno: ChatReact Shopify App

Namestite ChatReact aplikacijo iz Shopify App Store za najlažjo integracijo:

1. Namestite ChatReact aplikacijo v svojem Shopify adminu
2. Vnesite svoj Chatbot ID v nastavitve aplikacije
3. Chat widget se samodejno pojavi na vaši prodajni strani
4. Upravljajte dodelitve widgeta po strani ali ga omogočite povsod

Aplikacija prav tako podpira Form in FAQ widgete kot App Blocke v Theme Editorju.

Alternativa: Ročna vdelava

1. Pojdite v Online Store → Themes → Edit Code
2. Odprite theme.liquid
3. Dodajte kodo pred </body>
4. Shranite

Webflow

1. Pojdite v Project Settings → Custom Code
2. Dodajte v Footer Code
3. Objavite spletno stran

Next.js / React

Uporabite komponento Script:

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

Dodajte v vaš glavni App.vue ali postavitev:

<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

Upravljajte z widgetom programatično:

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

Testiranje

Način predogleda

Pred vdelavo v živo:

1. Uporabite funkcijo Preview v vašem dashboardu
2. Preizkusite različne scenarije
3. Preverite, ali so odgovori natančni

Lokalni razvoj

Za lokalno testiranje uporabite URL-je localhost:

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

Odpravljanje težav

Widget se ne prikazuje

1. Preverite konzolo brskalnika za napake
2. Preverite, ali je chatbot ID pravilen
3. Poskrbite, da je chatbot aktiven (ni onemogočen)
4. Preverite, ali motijo blokatorji oglasov

Slogovni konflikti

Če CSS vaše strani povzroča konflikte:

• Widget uporablja shadow DOM za izolacijo
• Preverite vrednosti z-index
• Prepričajte se, da ni !important preglasitev

Zmogljivost

Widget je zasnovan za minimalen vpliv:

• Nalaganje po potrebi
• < 50KB skupne velikosti
• Neblokirajoč
• Agresivno predpomnjen

Naslednji koraki

• WordPress vtičnik →
• Shopify integracija →
• Upravljanje FAQ →