Inċorporazzjoni tal-Widget

Żid il-chatbot AI tiegħek ma' kwalunkwe sit web f'sekondi bil-embed code sempliċi tagħna.

Bidu Rapidu

Żid dan il-kodiċi qabel it-tag tal-għeluq </body>:

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

Dak hu! Il-chatbot tiegħek issa huwa online fuq il-websajt tiegħek.

Kif issib l-ID tal-chatbot tiegħek

1. Mur fis-settings tal-chatbot tiegħek
2. Mur fit-tab Embed
3. Ikkopja l-kodiċi tal-embed (jinkludi l-ID tiegħek)

Jew issib l-ID fil-URL tad-dashboard tiegħek: /dashboard/company/chatbots/[CHATBOT_ID]

Għażliet tal-Widget

Ippersonalizza l-widget b'data attributes:

Għażliet Bażiċi

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

Sovrascritturi tal-Kuluri

Sovrascrivi s-settings tad-dashboard b'kuluri 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>

FAQ Widget

Uri l-FAQs bħala accordion fuq kwalunkwe paġna:

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

Il-FAQ widget turi FAQs ippubblikati mill-chatbot tiegħek.

FAQ Widget Options

Eżempju ta' Category Filter

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

Mobile Optimization

Il-chat widget huwa kompletament ottimizzat għall-apparat mobbli:

• Layout sħiħ fuq skrin żgħir
• Animazzjoni ta' slide-up meta jinfetaħ
• iOS keyboard handling (il-widget jaġġusta għall-keyboard fuq l-iskrin)
• Appoġġ ta' safe-area għal notch u home indicator ta' iPhone
• Touch targets akbar għal użu aħjar
• Daqs tal-font tal-input jipprevjeni l-autozoom tal-iOS

Gwidi Speċifiċi għall-Pjattaforma

WordPress

Rakkomandat: Uża l-Plugin WordPress uffiċjali ta' ChatReact għall-integrazzjoni l-aktar faċli b'blocks Gutenberg, widgets Elementor, u shortcodes.

Alternattiva: Embed manwali permezz ta' plugin "Header/Footer Scripts":

1. Installa kwalunkwe plugin "Header/Footer Scripts"
2. Żid il-kodiċi embed fis-sezzjoni tal-footer
3. Ħlief u ippubblika

Shopify

Rakkomandat: ChatReact Shopify App

Installa l-app ChatReact mill-Shopify App Store għall-integrazzjoni l-aktar faċli:

1. Installa l-app ChatReact fl-admin ta' Shopify tiegħek
2. Daħħal il-Chatbot ID tiegħek fis-settings tal-app
3. Il-chat widget jidher awtomatikament fuq il-vetrina tiegħek
4. Immaniġġja l-assenjazzjonijiet tal-widget għal kull paġna, jew attivah kullimkien

L-app tappoġġja wkoll il-widgets Form u FAQ bħala App Blocks fl-Theme Editor.

Alternattiva: Manual Embed

1. Mur f'Online Store → Themes → Edit Code
2. Iftaħ theme.liquid
3. Żid il-kodiċi qabel </body>
4. Ħlief

Webflow

1. Mur f'Project Settings → Custom Code
2. Żid fil-Footer Code
3. Ippubblika s-sit

Next.js / React

Uża l-komponent 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

Żid fil-App.vue prinċipali tiegħek jew fil-layout:

<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

Interaġixxi mal-widget b'mod programmatiku:

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

Ttestjar

Preview Mode

Before embedding live:

1. Uża l-karatteristika Preview fid-dashboard tiegħek
2. Ittesta s-sitwazzjonijiet differenti
3. Iċċekkja li r-risposti huma korretti

Local Development

Għat-testijiet lokali, uża URLs ta' localhost:

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

Riżoluzzjoni tal-problemi

Widget ma Jidhirx

1. Iċċekkja l-console tal-browser għal żbalji
2. Ivverifika li chatbot ID huwa korrett
3. Kun żgur li l-chatbot huwa attiv (mhux diżattivat)
4. Iċċekkja jekk ad blockers qed jinterferixxu

Kkonflitti fis-Stil

Jekk il-CSS tas-sit tiegħek jikkonflitta:

• Il-widget juża shadow DOM għall-izolament
• Iċċekkja l-valuri ta' z-index
• Kun żgur li m'hemm l-ebda !important overrides

Prestazzjoni

Il-widget huwa mfassal għal impatt minimu:

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

Passi Li Jmiss

• Plugin WordPress →
• Integrazzjoni Shopify →
• Ġestjoni tal-FAQ →