Embedding tal-Widget

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

Quick Start

Żid dan il-kodiċi qabel it-tag </body> li jispiċċa:

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

Dak kollu! Il-chatbot tiegħek issa qiegħed live fuq il-websajt tiegħek.

Kif Issib l-Chatbot ID Tiegħek

1. Mur fis-settings tal-chatbot tiegħek
2. Naviga lejn it-tab Embed
3. Kopja l-embed code (jinkludi l-ID tiegħek)

Personalizzar tal-Widget

Iċ-ċomb u t-tagħrif tal-widget huma kkonfigurati fid-dashboard tiegħek — mhux fl-embed code. Mur f Dashboard → Chatbots → [your chatbot] → Widget biex taġġusta:

• Position — bottom-right, bottom-left, jew inline
• Colors — kulur primarju, sfond u kulur tat-test, u r-reġjun tal-bord
• Size — wisa' u għoli tal-widget

Biex tiftaħ il-chat awtomatikament wara dewmien konfigurabbli, ippermetti Auto-Open fit-tab Behavior tal-istess paġna ta' settings.

Il-bidliet japplikaw awtomatikament għall-websajt tiegħek — m'hemmx bżonn taġġorna l-embed code. Ara l-gwida Widget Customization għal kull għażla disponibbli.

Il-lingwa tal-widget tiġi skoperta awtomatikament mill-browser ta' kull viżitatur, ibbażata fuq il-lingwi li tippermetti fit-tab Languages tal-chatbot tiegħek.

Widget tal-FAQ

Wiri ta' 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"
  async
></script>

Il-widget tal-FAQ juri FAQs ippubblikati mil-chatbot tiegħek. Kuluri u stil (primarju, sfond u kulur tat-test, reġjun tal-bord) huma kkonfigurati f Dashboard → FAQs → Settings.

Għażliet tal-Widget tal-FAQ

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>

Ottimizzazzjoni għall-Mobile

Il-chat widget huwa sħiħament ottimizzat għall-apparati mobbli:

• Layout wisa' sħiħ fuq skrins żgħar
• Annimazzjoni slide-up meta jinfetaħ
• Immaniġġjar tat-tastiera fuq iOS (il-widget jadatta għal fuq it-tastiera fuq l-iskrin)
• Appoġġ għall-safe-area għall-notch tal-iPhone u għall-home indicator
• Miri ta' touch ikbar għal użu aħjar
• Id-daqs tal-font tal-input jipprevjeni l-auto-zoom fuq iOS

Gwidi Skont il-Pjattaforma

WordPress

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

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

1. Installa kwalunkwe plugin "Header/Footer Scripts"
2. Żid l-embed code fis-sezzjoni tal-footer
3. Save u publish

Shopify

Rakkomandat: ChatReact Shopify App

Installa l-app ChatReact mis-Shopify App Store għall-integrazzjoni l-iktar sempliċi:

1. Installa l-app ChatReact fl-amministrazzjoni Shopify tiegħek
2. Daħħal l-Chatbot ID tiegħek fis-settings tal-app
3. Il-chat widget jidher awtomatikament fuq il-frontend tal-maħżen tiegħek
4. Immaniġġja assenjazzjonijiet tal-widget għal kull paġna, jew ippermettilha everywhere

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

Alternattiva: Embed Manwali

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

Webflow

1. Mur f Project Settings → Custom Code
2. Żid fil-Footer Code
3. Publish is-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 programmaticament:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Testing

Preview Mode

Qabel tibda l-embed live:

1. Uża l-feature Preview fid-dashboard tiegħek
2. Ittesta s-sitwazzjonijiet differenti
3. Ivverifika li r-risposti huma preċiżi

Troubleshooting

Il-Widget Mhux Turi

1. Iċċekkja l-konsola tal-browser għal żbalji
2. Ivvverifika li l-chatbot ID huwa korrett
3. Kun żgur li l-chatbot huwa attiv (mhux diżattivat)
4. Iċċekkja jekk ad blockers qed jinterferixxu
5. Iċċekkja l-użu tal-pjan tiegħek — il-widget jinterrompi meta jintlaħaq il-limitu mensili tal-pjan

Plugins ta' Caching & Ottimizzazzjoni

Xi plugins ta' caching jew ottimizzazzjoni tas-scripts jikkoreġu l-URLs tal-script, li jistgħu jieqfu l-loading tal-widget. Jekk jiġri dan, żid URL API espliċitu fit-tag tal-script:

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

L-istess attribut jaħdem fuq l-scripts tal-FAQ u tal-form widget.

Konflitti ta' Stil

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

• Il-widget is-skopja l-istili tiegħu għall-kontenitur tiegħu stess u juża regoli ta' prijorità għolja biex jirreżisti l-konflitti
• Iċċekkja valuri z-index ta' elementi li jkopru l-widget
• Evita regoli ġenerali !important fil-CSS tal-websajt tiegħek li jimmiraw elementi ġeneriċi

Prestazzjoni

Il-widget huwa mfassal għall-impatt minimal:

• Jinload asynchronous — qatt ma jillokka r-render tal-paġna tiegħek
• Daqs ħafif: madwar 30 KB trasferiti compressed

Passi Li Jmiss

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — embed forms standalone bil-form widget