Widgeti manustamine

Lisage oma AI chatbot igale veebisaidile sekunditega meie lihtsa embed code'i abil.

Kiire alustamine

Lisage see kood enne </body> sulgemistähist:

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

1. Minge oma chatboti sätetesse
2. Minge Embed vahekaardile
3. Kopeerige embed-kood (sisaldab teie ID-d)

Or find the ID in your dashboard URL: /dashboard/company/chatbots/[CHATBOT_ID]

Widget Options

Kohandage widgetit andmeatribuutidega:

Põhilised valikud

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

Värvide ülekirjutamine

Ülekirjuta armatuurlaua seaded inline-värvidega:

<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

Kuva FAQ-id akordionina mis tahes lehel:

<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 vidin kuvab teie chatbot'i avaldatud FAQ-sid.

FAQ Widget valikud

Category Filter näide

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

Mobiilne optimeerimine

Vestlusvidin on täielikult optimeeritud mobiilseadmete jaoks:

• Täislaiuses paigutus väikestel ekraanidel
• Ülespoole libisev animatsioon avamisel
• iOS klaviatuuri käsitlemine (vidin kohandub ekraaniklaviatuuriga)
• Safe-area tugi iPhone'i sälgu ja kodunäidiku jaoks
• Suuremad puutealad parema kasutatavuse jaoks
• Sisestusvälja fondisuurus hoiab ära iOS automaatse suurendamise

Platvormispetsiifilised juhised

WordPress

Soovitatav: Kasutage ametlikku ChatReact WordPress pistikprogrammi lihtsaimaks integratsiooniks Gutenbergi plokkide, Elementori vidinite ja lühikoodidega.

Alternatiiv: Manuaalne manustamine "Header/Footer Scripts" pistikprogrammi kaudu:

1. Installige mõni "Header/Footer Scripts" plugin
2. Lisage embed-kood footeri sektsiooni
3. Salvesta ja avalda

Shopify

Soovitatav: ChatReact Shopify App

Installige ChatReact rakendus Shopify App Store'ist lihtsaimaks integratsiooniks:

1. Installige ChatReact rakendus oma Shopify halduspaneelis
2. Sisestage oma Chatbot ID rakenduse seadetesse
3. Vestlusvidin ilmub automaatselt teie poe esikusele
4. Hallake vidina määramisi leheküljeti või lubage see kõikjal

Rakendus toetab ka Form ja FAQ vidinaid App Blocks'idena Theme Editoris.

Alternatiiv: Manuaalne manustamine

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

Webflow

1. Minge Project Settings → Custom Code
2. Lisage Footer Code'i
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 see oma põhifaili 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 vidinaga programmiliselt:

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

Testing

Preview Mode

Before embedding live:

1. Use the Preview feature in your dashboard
2. Test different scenarios
3. Verify responses are accurate

Local Development

For local testing, use localhost URLs:

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

Troubleshooting

Widget Not Appearing

1. Check browser console for errors
2. Verify chatbot ID is correct
3. Ensure chatbot is active (not disabled)
4. Check if ad blockers are interfering

Styling Conflicts

If your site's CSS conflicts:

• Widget uses shadow DOM for isolation
• Check z-index values
• Ensure no !important overrides

Performance

The widget is designed for minimal impact:

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

Next Steps

• WordPress pistikprogramm →
• Shopify integratsioon →
• KKK haldamine →