My Website

` este punctul de montare — panoul de chat se randează în interiorul acestuia și îi ocupă dimensiunile. Stilează div-ul după cum dorești (oferă-i o înălțime fixă, plasează-l într-un container flex, într-o celulă de grid etc.), iar panoul de chat se va adapta. Ai nevoie de **un singur** tag ` ``` {% endcode %} Fragmentul în linie o conține în schimb pe `

`, astfel încât o pagină poate găzdui mai multe chat-uri care merg în locuri diferite: {% code overflow="wrap" %} ```html

``` {% endcode %} Pentru un agent, formularea se schimbă în `?agent=AGENT_ID` sau `data-agent="AGENT_ID"`. Câteva lucruri care merită știute: - Utilizați butonul de copiere în loc să tastați manual ID-ul. Dacă ID-ul nu corespunde unei campanii sau unui agent din contul dvs., chat-ul va funcționa în continuare, dar va reveni la rutarea implicită. - O persoană care se află deja în mijlocul unei conversații va rămâne cu persoana cu care a început, chiar dacă ulterior ajunge pe o pagină care indică altă destinație. Acest lucru previne schimbarea personalității unei conversații la jumătatea drumului. - O destinație specifică paginii are prioritate față de setarea implicită a contului și față de declanșatoarele bazate pe cuvinte cheie. ### Spune widgetului cine este vizitatorul (Avansat) Dacă plasezi widgetul de chat într-o zonă pentru membri, un portal pentru clienți sau o aplicație unde utilizatorii sunt deja autentificați, site-ul tău știe deja cine sunt aceștia. Poți transmite aceste informații widgetului, astfel încât vizitatorului să nu i se mai ceară detalii pe care le-a furnizat deja, iar AI-ul tău să poată folosi ceea ce știi deja despre el. Adaugă un mic bloc de setări **înainte** de scriptul widgetului: {% code overflow="wrap" %} ```html ``` {% endcode %} Pagina ta ar trebui să completeze acele valori pe partea de server, folosind datele utilizatorului autentificat. Se întâmplă două lucruri: - **Formularul „Înainte de a începe...” este omis.** Cu un nume și o adresă de e-mail furnizate, vizitatorul trece direct la conversație, iar acele detalii sunt salvate în contactul său exact ca și cum le-ar fi introdus el însuși. - **Tot ce se află sub `data` este transmis AI-ului tău.** Orice introduci acolo — plan, număr de comandă, dată de reînnoire, sold credit, număr de locuri — devine parte din ceea ce știe AI-ul despre acea persoană, astfel încât să poată răspunde la întrebări precum „când se reînnoiește planul meu?” fără a cere vizitatorului să explice cine este. Folosește orice nume de câmp care are sens pentru tine; acestea vor apărea în contact la secțiunea Câmpuri personalizate. Poți trimite până la 20 de valori, actualizate la fiecare mesaj, astfel încât, dacă planul se schimbă în timpul conversației, AI-ul va vedea noua valoare. Pentru elementele încorporate (inline embeds), poți plasa aceleași informații pe `

`, ceea ce este util atunci când o pagină conține mai multe ferestre de chat: {% code overflow="wrap" %} ```html

``` {% endcode %} Dacă site-ul tău află cine este vizitatorul abia după încărcarea paginii — de exemplu, într-o aplicație de tip single-page unde autentificarea are loc fără reîncărcarea paginii — apelează această funcție ori de câte ori ai detaliile, iar widgetul se va actualiza automat: {% code overflow="wrap" %} ```html ``` {% endcode %} Câteva lucruri care merită știute: - Dacă două persoane diferite se conectează pe același computer, a doua persoană începe o conversație nouă în loc să o vadă pe cea a primei persoane. Widgetul observă schimbarea persoanei și se resetează. - De la sine, acest lucru servește pentru context, nu pentru autentificarea cuiva. Conversațiile sunt în continuare păstrate separat, așa cum au fost întotdeauna, deci transmiterea unui `id` nu permite nimănui să deschidă conversația altcuiva, iar cineva care folosește un dispozitiv sau un browser diferit începe o conversație nouă acolo. Pentru a continua conversația pe mai multe dispozitive, semnați `id` așa cum este descris în continuare. - Este opțional. Un widget de pe o pagină publică obișnuită nu are nevoie de nimic din toate acestea și se comportă exact ca înainte. #### Reluați aceeași conversație pe orice dispozitiv (ID vizitator conectat) Dacă clienții dvs. au conturi, puteți face ca chatul lor să îi urmărească: se conectează pe un telefon, continuă pe un laptop, și este aceeași conversație cu același contact în căsuța dvs. de primire, iar AI-ul știe în continuare tot ce s-a spus. Pentru aceasta, DM Champ are nevoie de dovada că vizitatorul este într-adevăr cine spune pagina dvs. că este, altfel oricine ar putea introduce un număr de client în browserul său și ar putea citi chatul acelui client. Dovada este o semnătură pe care o calculați pe serverul dvs. 1. În panoul **Gestionare** al widgetului, sub **Canale și încorporare**, găsiți **Vizitatori autentificați** și faceți clic pe **Generare secret**. Copiați secretul de identitate. Păstrați-l doar pe serverul dumneavoastră; nu îl introduceți niciodată în pagină. ::: master-only

Rândul Vizitatori autentificați din panoul Gestionare al widgetului de chat, care arată secretul de identitate mascat cu butoanele Afișare, Copiere și Regenerare, și fragmentul de setări cu câmpurile id și hash dedesubt — Rândul Vizitatori autentificați sub Canale și încorporare. Secretul rămâne ascuns până când faceți clic pe Afișare; fragmentul de mai jos arată unde se introduc id-ul și semnătura acestuia pe pagina dumneavoastră.

::: 2. Când serverul dumneavoastră randează o pagină pentru un client autentificat, calculați un HMAC-SHA256 al ID-ului acelui client folosind secretul, sub formă de șir hexazecimal cu litere mici: {% code overflow="wrap" %} ```js // Node.js const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex"); ``` {% endcode %} {% code overflow="wrap" %} ```php // PHP $hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET); ``` {% endcode %} {% code overflow="wrap" %} ```python # Python import hmac, hashlib hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest() ``` {% endcode %} 3. Introduceți ID-ul și hash-ul în blocul de setări, lângă numele și adresa de e-mail pe care le transmiteți deja: {% code overflow="wrap" %} ```html ``` {% endcode %} Încorporarea inline preia aceeași valoare ca `data-visitor-hash` pe `

`, iar `window.chatWidget.setVisitor({ visitor: { id, hash } })` funcționează pentru aplicațiile care conectează utilizatorii fără reîncărcarea paginii. Ce se întâmplă odată ce semnătura este verificată: - Chatul clientului este stocat în contul său, mai degrabă decât în browser, deci este aceeași conversație pe fiecare dispozitiv și fiecare browser în care este conectat, și un singur contact în căsuța dvs. de primire. - Mesajele sale anterioare se încarcă pe noul dispozitiv, iar AI-ul continuă de unde a rămas. - Dacă semnătura este incorectă, widgetul se comportă discret ca înainte, ca un chat normal per-browser, și tipărește motivul în consola browserului, astfel încât un dezvoltator să îl poată identifica. Vizitatorii dvs. nu văd niciodată o eroare. - ID-ul este comparat exact așa cum l-ați trimis, deci semnați aceeași valoare pe care o transmiteți ca `id` și folosiți același ID pentru aceeași persoană peste tot. Două lucruri de știut: - **Regenerare** în panoul Gestionare vă oferă un secret nou. Paginile care se semnează în continuare cu cel vechi revin la chat-urile normale per-browser până când serverul dvs. folosește noul secret. Conversațiile existente sunt păstrate; ele sunt legate de ID-ul clientului, nu de secret. - O conversație pe care cineva a avut-o înainte de a se conecta, ca vizitator anonim, rămâne un chat separat. Conversația bazată pe cont începe cu primul mesaj pe care îl trimite în timp ce este conectat. ### Modifică setările widgetului din propriul tău cod (API) Tot ce se află în panoul **Gestionare** al widgetului poate fi modificat și prin [REST API](../api/reference.md), ceea ce este util dacă gestionezi mai multe site-uri web sau dacă dorești să dezactivezi automat butonul de atașare pentru un client. Trimite un `PATCH` către `https://api.dmchamp.com/v1/chat-widget-configs/CONFIG_ID` cu cheia ta API și doar câmpurile pe care dorești să le modifici — de exemplu, `{"show_upload_button": false}` ascunde butonul de atașare, `{"show_emoji_button": false}` ascunde selectorul de emoji-uri, iar `{"launcher_icon": "chat-dots"}` schimbă pictograma lansatorului. `CONFIG_ID` este același identificator ca cel din scriptul tău de încorporare. Lista completă a câmpurilor acceptate (nume, mesaj de întâmpinare, culori, pictograma lansatorului, domenii permise, formular de informații vizitator, notificare de confidențialitate, temă, stilul colțurilor și al fontului) se află în [Referința API](../api/reference.md) la secțiunea **Widget de chat**. Site-urile web preiau modificarea la următoarea încărcare a paginii. ### La ce să te aștepți după instalare După ce ați adăugat scriptul pe site-ul dumneavoastră, widgetul de chat va crea automat un buton de chat în colțul site-ului (implicit în dreapta jos). Widgetul rămâne într-o poziție fixă pe măsură ce utilizatorii derulează paginile, asigurându-se că este întotdeauna accesibil. ::: master-only

Balonul de chat plutitor din colțul din dreapta jos al unui site web live, înainte ca un vizitator să dea clic pe el — Iată ce văd vizitatorii pe site-ul tău înainte de a deschide chatul — doar butonul plutitor, poziționat conform setărilor tale de Aspect.

::: Când vizitatorii dau clic pe acest buton, acesta se extinde într-o fereastră de chat completă unde pot începe o conversație, afișând mesajul dumneavoastră de întâmpinare. Dacă opțiunea Colectare informații vizitator este activată, apare mai întâi un formular mic care solicită numele și adresa de e-mail (și opțional numărul de telefon) înainte ca aceștia să poată tasta. ::: master-only

Panoul de chat deschis care arată mesajul de întâmpinare în fundal și formularul de captare a clienților potențiali Înainte de a începe (Prenume, E-mail, Telefon) în fața acestuia — Panoul de chat deschis. Aici opțiunea Colectare informații vizitator este activată, deci formularul „Înainte de a începe...” apare peste conversație — vizitatorii îl completează o dată, apoi discută normal.

::: Interfața de chat se adaptează automat la diferite dimensiuni de ecran, astfel încât funcționează fără probleme atât pe desktop, cât și pe dispozitivele mobile. ### Testarea implementării După ce ai adăugat widgetul pe site-ul tău, testează dacă funcționează: 1. Deschide site-ul tău într-un browser. 2. Dă clic pe butonul de chat pentru a deschide widgetul. 3. Trimite un mesaj de test și confirmă că primești un răspuns. 4. Repetă procesul pe un alt dispozitiv sau browser pentru a confirma că funcționează peste tot. ::: master-only

Panoul de chat după ce un vizitator trimite un mesaj de test, arătând balonul cu mesajul său trimis sub mesajul de întâmpinare — După trimiterea unui mesaj, acesta apare ca un balon de ieșire în firul conversației — AI-ul tău sau echipa ta răspunde în aceeași fereastră.

::: Dacă widgetul de chat nu apare pe site-ul tău, verifică următoarele: 1. Asigură-te că ai înlocuit `CONFIG_ID` cu identificatorul tău real de configurare. 2. Asigură-te că eticheta script este plasată înainte de eticheta de închidere ``. 3. Verifică codul pentru eventuale greșeli de dactilografiere. ### În spatele unui firewall corporativ Dacă widgetul se încarcă pentru public, dar nu și pentru angajații din rețeaua de la birou, este aproape sigur că rețeaua blochează domeniul de pe care acesta se încarcă. Roagă echipa IT să permită, prin HTTPS standard pe portul 443: - **Domeniul din fragmentul tău de încorporare** — adresa din linia `