Widget Embedding

Adăugați chatbotul dumneavoastră AI pe orice site în câteva secunde, folosind codul nostru simplu de embed.

Pornire rapidă

Adăugați acest cod înainte de eticheta de închidere </body>:

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

Gata! Chatbotul dumneavoastră este acum activ pe site-ul dumneavoastră.

Găsirea ID-ului chatbotului dumneavoastră

1. Accesați setările chatbotului dumneavoastră
2. Accesați fila Embed
3. Copiați codul de embed (include ID-ul dvs.)

Sau găsiți ID-ul în URL-ul din dashboard: /dashboard/company/chatbots/[CHATBOT_ID]

Opțiuni Widget

Personalizați widgetul cu data attributes:

Opțiuni de bază

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

Suprascrieri de culoare

Suprascrie setările din dashboard cu culori inline:

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

Widget FAQ

Afișați FAQ-urile ca un acordeon pe orice pagină:

<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 afișează întrebările frecvente publicate de chatbot-ul dumneavoastră.

Opțiuni Widget FAQ

Exemplu filtru categorie

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

Optimizare pentru mobil

Widgetul de chat este complet optimizat pentru dispozitive mobile:

• Layout pe lățime completă pe ecrane mici
• Animație de glisare în sus la deschidere
• Gestionarea tastaturii iOS (widgetul se ajustează la tastatura de pe ecran)
• Suport pentru zona sigură pentru decupajul iPhone și indicatorul home
• Ținte de atingere mai mari pentru o utilizabilitate mai bună
• Dimensiunea fontului de intrare previne zoom-ul automat pe iOS

Ghiduri specifice platformei

WordPress

Recomandat: Folosiți pluginul oficial ChatReact WordPress pentru cea mai ușoară integrare cu blocuri Gutenberg, widgeturi Elementor și shortcode-uri.

Alternativă: Embed manual printr-un plugin "Header/Footer Scripts":

1. Instalați orice plugin "Header/Footer Scripts"
2. Adăugați codul de embed în secțiunea de footer
3. Salvați și publicați

Shopify

Recomandat: Aplicația ChatReact Shopify

Instalați aplicația ChatReact din Shopify App Store pentru cea mai ușoară integrare:

1. Instalați aplicația ChatReact în panoul admin Shopify
2. Introduceți ID-ul Chatbot în setările aplicației
3. Widgetul de chat apare automat în vitrina magazinului
4. Gestionați atribuirile widgetului per pagină, sau activați-l peste tot

Aplicația suportă și widgeturi Form și FAQ ca App Blocks în Theme Editor.

Alternativă: Embed manual

1. Accesați Online Store → Themes → Edit Code
2. Deschideți theme.liquid
3. Adăugați codul înainte de </body>
4. Salvați

Webflow

1. Accesați Project Settings → Custom Code
2. Adăugați în Footer Code
3. Publicați site-ul

Next.js / React

Utilizați componenta 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

Adăugați în App.vue principal sau în layout-ul dumneavoastră:

<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

Interacționați cu widget-ul programatic:

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

Testare

Mod previzualizare

Înainte de a integra live:

1. Utilizați funcția Preview în dashboard-ul dumneavoastră
2. Testați diferite scenarii
3. Verificați dacă răspunsurile sunt corecte

Dezvoltare locală

Pentru testare locală, folosiți URL-uri localhost:

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

Depanare

Widgetul nu apare

1. Verificați consola browserului pentru erori
2. Verificați că ID-ul chatbotului este corect
3. Asigurați-vă că chatbotul este activ (nu este dezactivat)
4. Verificați dacă blocatoarele de reclame intervin

Conflicte de stilizare

Dacă CSS-ul site-ului dvs. intră în conflict:

• Widgetul folosește shadow DOM pentru izolare
• Verificați valorile z-index
• Asigurați-vă că nu există suprascrieri !important

Performanță

Widgetul este proiectat pentru impact minim:

• Lazy loaded
• < 50KB total size
• Non-blocking
• Cached aggressively

Pași următori

• Plugin WordPress →
• Integrare Shopify →
• Gestionare FAQ →