É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ú
- Téigh chuig socruithe do chatbóth
- Bog chuig an táb Embed
- 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
| Setting | Description | Where to Configure |
|---|---|---|
| Colors & Styling | Príomh, cúlra agus dathanna téacs, raidiós imlíne | Dashboard → FAQs → Settings |
| Width | Roghnaigh idir 100% (leithead iomlán) nó leithead shonrach i bpicteil (400–1200px) | Dashboard → FAQs → Settings |
| Sort Order | Ordú taispeána: Dáta (nua is sine ar dtús), Ainm (alfabrach), nó Saincheaptha (tarraingt agus scaoil láimhe) | Dashboard → FAQs → Settings → Behavior |
| Category Filter | Taispeáin ach catagóirí shonracha sa widget | Embed code data-categories attribute |
| Custom Container | Rindreáil an widget laistigh de do ghné féin in ionad an div réamhshocraithe chatreact-faq | Embed code data-container attribute |
| Language | Sá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":
- Suiteáil aon plugin "Header/Footer Scripts"
- Cuir an cód iolraithe sa rannóg footer
- Sábháil agus foilseach
Shopify
Moltar: ChatReact Shopify App
Suiteáil an aip ChatReact ón Shopify App Store don chomhtháthú is éasca:
- Suiteáil an aip ChatReact i do riarachán Shopify
- Cuir do Chatbot ID isteach i socruithe an aip
- Tá an widget comhrá le feiceáil go huathoibríoch ar do siopa
- 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
- Téigh chuig Online Store → Themes → Edit Code
- Oscail
theme.liquid - Cuir cód isteach sula
</body> - Sábháil
Webflow
- Téigh chuig Project Settings → Custom Code
- Cuir le Footer Code
- 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:
- Bain úsáid as an ghné Preview i do phainéal
- Tástáil réimsí éagsúla cásanna
- 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
- Seiceáil consól an bhrabhsálaí le haghaidh earráidí
- Dearbhaigh go bhfuil an chatbot ID ceart
- Déan cinnte go bhfuil an chatbot gníomhach (níl sé díghníomhachtaithe)
- Seiceáil an bhfuil blocálaithe fógraí ag cur isteach
- 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
!importanti 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
- Widget Customization →
- WordPress Plugin →
- Shopify Integration →
- FAQ Management →
- Smart Contact Forms → — ionchlannú foirmeacha neamhspleácha leis an widget foirme