BaileDoiciméadú

Éilítear Widget

Cuir do chatbóth AI ar aon suíomh Gréasáin i soicindí le ár gcód iolraithe simplí.

Tosú Tapa

Cuir an cód seo isteach sula dúnann an lipéad </body>:

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

Sin é! Tá do chatbóth beo anois ar do shuíomh Gréasáin.

Conas Do Chatbot ID a Aimsiú

  1. Téigh chuig socruithe do chatbóth
  2. Bog chuig an táb Embed
  3. Cóipeáil an cód iolraí (cuimsíonn sé do ID)

Níl an ID chatbóth sa chód iolraithe mar an gcéanna leis an ainm i URL do phainéil. Cóipeáil an ID i gcónaí ón táb Embed.

Saincheap an Widget

Tá cuma agus iompraíocht an widget cumraithe i do phainéal — ní sa chód iolraithe. Téigh chuig Dashboard → Chatbots → [your chatbot] → Widget chun a choigeartú:

  • Suíomh — bun-deas, bun-chlé, nó inline
  • Dathanna — príomh-dath, cúlra agus dathanna téacs, plus raidiós an imlíne
  • Méid — leithead agus airde an widget

Chun an comhrá a oscailt go huathoibríoch tar éis moill inbhainistithe, cumasaigh Auto-Open sa táb Behavior ar an leathanach socruithe céanna.

Beidh athruithe curtha i bhfeidhm go huathoibríoch ar do shuíomh — níl gá an cód iolraithe a nuashonrú. Féach an treoir Widget Customization le haghaidh na roghanna go léir atá ar fáil.

Braitear teanga an widget go huathoibríoch bunaithe ar bhrabhsálaí gach cuairteora, bunaithe ar na teangacha a ghníomhachtaíonn sibh i dtáb Languages do chatbóth.

Roghnaigh an suíomh Inline chun an comhrá a ionchlannú go díreach sa leathanach ag an áit ina gcuirtear an script tag. Bíonn an widget oscailte i gcónaí, gan buabhall ná cnaipe dúnadh — oiriúnach do leathanaigh comhrá tiomnaithe nó roinn tacaíochta.

Widget CC

Taispeáin CCanna mar accordion ar aon leathanach:

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

Taispeánann an widget CC CCanna foilsithe ó do chatbóth. Tá dathanna agus stíliú (príomh, cúlra agus dathanna téacs, raidiós imlíne) cumraithe i Dashboard → FAQs → Settings.

Roghanna Widget CC

SettingDescriptionWhere to Configure
Colors & StylingPríomh, cúlra agus dathanna téacs, raidiós imlíneDashboard → FAQs → Settings
WidthRoghnaigh idir 100% (leithead iomlán) nó leithead shonrach i bpicteil (400–1200px)Dashboard → FAQs → Settings
Sort OrderOrdú taispeána: Dáta (nua is sine ar dtús), Ainm (alfabrach), nó Saincheaptha (tarraingt agus scaoil láimhe)Dashboard → FAQs → Settings → Behavior
Category FilterTaispeáin ach catagóirí shonracha sa widgetEmbed code data-categories attribute
Custom ContainerRindreáil an widget laistigh de do ghné féin in ionad an div réamhshocraithe chatreact-faqEmbed code data-container attribute
LanguageSárshiúl teanga an widget (ag brath go réamhshocraithe ar an gcéad lang i do leathanach <html>, ansin ar theanga bhrabhsálaí an chuairteora)Embed code data-lang attribute

Sampla Scagaire Catagóire

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

Nuair a bhíonn an widget scagtha do chatagóir amháin, déanann ordáil shonrach na catagóire sin (a shocraítear i Dashboard → FAQs → Categories) tharghlasáil ar an socrú domhanda ordaithe.

Optamú Soghluaiste

Tá an widget comhrá lán-oiriúnaithe do ghléasanna soghluaiste:

  • Leagan leithead-iomlán ar scáileáin bheaga
  • Beochan sleamhnaithe suas nuair a osclaítear
  • Láimhseáil méarchláir iOS (coigeartaíonn an widget don mhéarchlár ar an scáileán)
  • Tacaíocht do cheantar sábháilteacht don notch agus innéacs baile iPhone
  • Targaim tadhaill níos mó le húsáid níos fearr
  • Méid cló ionchuir a choscann uathoibríoch-zoommáil iOS

Treoracha Sonracha do Ardán

WordPress

Moltar: Bain úsáid as an ChatReact WordPress Plugin oifigiúil chun an comhtháthú is éasca a fháil le bloic Gutenberg, widgets Elementor, agus shortcodes.

Malartach: Ionchlannú láimhe trí plugin "Header/Footer Scripts":

  1. Suiteáil aon plugin "Header/Footer Scripts"
  2. Cuir an cód iolraithe sa rannóg footer
  3. Sábháil agus foilseach

Shopify

Moltar: ChatReact Shopify App

Suiteáil an aip ChatReact ón Shopify App Store don chomhtháthú is éasca:

  1. Suiteáil an aip ChatReact i do riarachán Shopify
  2. Cuir do Chatbot ID isteach i socruithe an aip
  3. Tá an widget comhrá le feiceáil go huathoibríoch ar do siopa
  4. Bainistigh sainuiteanna widget in aghaidh an leathanaigh, nó cumasaigh é áit ar bith

Tacaíonn an aip freisin le Form agus FAQ widgets mar App Blocks sa Theme Editor.

Malartach: Ionchlannú Láimhe

  1. Téigh chuig Online Store → Themes → Edit Code
  2. Oscail theme.liquid
  3. Cuir cód isteach sula </body>
  4. Sábháil

Webflow

  1. Téigh chuig Project Settings → Custom Code
  2. Cuir le Footer Code
  3. Foilsigh an suíomh

Next.js / React

Bain úsáid as an Script component:

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

Cuir i do App.vue príomhúil nó leagan aschuir:

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

API JavaScript

Iompraigh leis an widget go cláraitheach:

// 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();

Tástáil

Mód Réamhaisnéise

Sula gcuirtear beo:

  1. Bain úsáid as an ghné Preview i do phainéal
  2. Tástáil réimsí éagsúla cásanna
  3. Deimhnigh go bhfuil freagraí cruinn

Ag tástáil ar shuíomh forbartha áitiúil? Bain úsáid as an gcód iolraithe caighdeánach gan athrú — oibríonn sé ar leathanach localhost freisin.

Fadhbanna a Dheisiú

Níl an Widget le Feiceáil

  1. Seiceáil consól an bhrabhsálaí le haghaidh earráidí
  2. Dearbhaigh go bhfuil an chatbot ID ceart
  3. Déan cinnte go bhfuil an chatbot gníomhach (níl sé díghníomhachtaithe)
  4. Seiceáil an bhfuil blocálaithe fógraí ag cur isteach
  5. Seiceáil do úsáid phlean — stopann an widget nuair a shroicheann tú teorainn mhíosúil do phlean

Caching & Plugins Optamaithe

Is féidir le roinnt plugins taiscthe nó uathoibriúcháin script URLanna a athscríobh, rud a fhéadfadh stad a chur ar luchtú an widget. Má tharlaíonn sé sin, cuir URL API sainráite leis an script tag:

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

Oibríonn an tréith chéanna ar na scripts widget FAQ agus form.

Easaontas Stíle

Má bhíonn coinbhleacht CSS ar do shuíomh:

  • Scópaíonn an widget a stíleanna laistigh dá choimeádán féin agus úsáideann sé rialacha ard-toirte chun friotaíocht a thaispeáint
  • Seiceáil luachanna z-index d’earraí a chlúdaíonn an widget
  • Seachain rialacha globála !important i CSS do shuíomh a dhéanann sprioc ar eilimintí ginearálta

Feidhmíocht

Tá an widget dearaidh le tionchar íosta:

  • Luchtaíonn sé go asynchrónach — ní chuireann sé bac ar léiriú do leathanach
  • Éadrom: thart ar 30 KB i iompar comhbhrúite

Céimeanna Ar Aghaidh