JavaScript-API: styr widgeten från din sida

Widgeten tillhandahåller ett enda globalt objekt: window.ReactiveChat. Du anropar alla kommandon i funktionsform:

ReactiveChat('command', argument1, argument2);

Namnen på grundkommandona följer vanliga chattwidgetar (boot, shutdown, open, identify, update, track …), så att ett byte kräver lite arbete.

Kön före laddning

Laddaren skapar först ReactiveChat. Tills kärnan har laddats registrerar den här versionen varje anrop i ReactiveChat.q; kärnan går sedan igenom listan i ordning. Inget anrop går förlorat.

Om din kod kan köras före laddartaggen lägger du den här raden före den:

window.ReactiveChat = window.ReactiveChat || function () {
  (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments);
};

Detta innebär två saker:

• Före laddningen är varje returvärde undefined. Använd därför kommandon med returvärde (getSession, isOpen, tour …) efter händelsen ready (se Händelser).
• Ett kommando utlöser laddning. Varje kommando utom boot, update, track och identify laddar kärnan direkt (utlösaren command). Ett tidigt anrop till identify kostar därför inget.

Kommandon kastar aldrig undantag: ett fel i ett kommando ger undefined, ett okänt kommando ignoreras (med data-rc-debug="true" visas det i konsolen).

ReactiveChat('on', 'ready', function () {
  var s = ReactiveChat('getSession');
  console.log('Visitor', s && s.visitorId);
});

Start och avstängning

• boot (cfg?: object) – det första anropet anger konfigurationen med samma fält som skripttaggens attribut (camel case, till exempel { siteKey, locale, theme, position, brand }) och startar. Varje ytterligare anrop tar bara över locale, theme, dnd, autoOpen, strings och position. Om boot saknas i kön anropar kärnan det själv.
• shutdown () – tar bort widgeten från sidan (fönster, anslutning, observatörer) och återställer ReactiveChat till en enkel kö. Att starta igen utan omladdning av sidan är inte avsett.

ReactiveChat('boot', { locale: 'en', theme: 'dark' });

Fönster

• open (opts?) – öppnar fönstret. opts är antingen ett element (fönstret visas intill det) eller ett objekt:
• anchor (element, valfritt) – öppna intill detta element; utan det: normal position.
• message (sträng, valfri) – skriv text i inmatningsfältet, skicka den inte (högst 200 tecken).
• tab (msg | home | help, valfri) – välj flik. Om själva anchor har data-rc-message eller data-rc-tab gäller dessa; uttryckliga värden i anropet har företräde. Före laddningen sparas begäran.
• close () – stänger fönstret.
• toggle () – växlar mellan öppet och stängt.
• isOpen () → boolean.

document.querySelector('#hilfe').addEventListener('click', function (ev) {
  ReactiveChat('open', { anchor: ev.currentTarget, message: 'Question about my order', tab: 'msg' });
});

Meddelanden och konversationer

• sendMessage (text: string) – skickar ett meddelande för besökarens räkning, som om hen hade skrivit det (samma gränser gäller, se Gränser). Använd detta bara efter en handling av besökaren, aldrig utan uppmaning.
• newConversation () – startar en ny konversation.
• leaveMessage () – öppnar formuläret för att lämna ett meddelande när ingen är tillgänglig.
• startConversation (text: string, suche?: string) – startar en ny konversation och skickar text så snart den är redo. Används av Smart Answer för att fortsätta en sökfråga i chatten.
• continueConversation (id: string, text: string) – fortsätter en befintlig konversation med text (id som matchar [0-9A-Za-z_-]{1,64}, annars startas en ny). Används även för överlämningen från Smart Answer.

Besökare och kontext

• identify ({ userId, email, name, userHash, exp }) – identifierar en inloggad användare. Andra fält slopas. Utan giltig userHash som beräknats på din server räknas användaren som obekräftad: namn och e-post visas i agentpanelen men inget av detta ger åtkomst till kunddata eller andras konversationshistorik. Allt om signaturen finns under Identifiera besökare.
• update (attrs: object) – skickar attribut vidare till MousePlayer-kopplingen (bara relevant om du använder MousePlayer).
• track (name: string, meta?: object) – rapporterar en milstolpe. Fält i meta som finns i kontextlistan (url, path, title, page_type, product_id, variant_id, category, price, currency, cart_value, cart_items, in_stock och andra) går till assistenten och agenterna som sidkontext. Andra fält slopas. Se Identifiera besökare och skicka kontext.
• getSession () → { sessionId, visitorId, tabId } eller null.
• getEndpoint () → { siteKey, wsUrl, apiBase, locale, visitorId } – varifrån widgeten får sin anslutning; för egna skript som behöver samma adress.
• portal (basis?: string) → boolean – öppnar kundportalen i en ny flik och skickar med den bekräftade identiteten. false om det inte finns någon bekräftad användare. basis är ett valfritt eget ursprung med https:// som protokoll.

ReactiveChat('track', 'produkt_angesehen', {
  page_type: 'product', product_id: 'SKU-4711', price: 49.9, currency: 'EUR', in_stock: true
});

Språk och tema

• setLocale (locale: 'de' | 'en' | 'pl') – byter språk; valet sparas i webbläsaren.
• setTheme ('light' | 'dark' | 'auto').

Tipsbubbla, reklamkort och rundturer

• showTeaser ({ text, quickReplies?, replyRoles?, avatar?, ttlMs?, ruleId? }) → boolean – visar en liten bubbla vid chattknappen. quickReplies högst 3, ttlMs 0–120000 (standard 15000). Den visas inte (false) om fönstret är öppet, chattknappen är dold, ”Stör ej” gäller, en konversation pågår eller en begränsning gäller.
• show (text | object) → boolean – kortform: ReactiveChat('show', 'Questions about shipping?').
• hideTeaser / hide () – döljer bubblan.
• promo (false | true | object) – dölj reklamkortet på sidan, visa det igen eller ersätt det med egna fält (titel, text, bild, knopf, ziel, link_text, link_ziel, farbe, orte, zielgruppe).
• tour (id: string) → boolean – startar en produktrundtur som skapats i kontot; false för okänt ID. Rundturer ställs in under Anpassning.
• tourStop () – avslutar den pågående rundturen.

A/B-tester

• abVariant () → { test, variant, qa } eller null – varianten som besökaren ser.
• abGoal () – rapporterar att målet för det pågående testet har nåtts (till exempel på tacksidan).

ReactiveChat('on', 'ready', function () { ReactiveChat('abGoal'); });

Utseende under körning

• setBrand (marke: object) – ersätter färger och form utan ombyggnad; null tar bort ett värde igen.
• brandCheck () → lista över uppmätta kontraster { paar, ist, soll }.
• brandTokens () → de beräknade utseendevärdena.
• setStart (startseite: object) – ange startskärmen under körning (för förhandsvisningar).

Objektens fält beskrivs under Anpassning.

Händelser

• on (name, callback) / off (name, callback) – prenumerera på och avsluta prenumeration på händelser. Lista och data: Händelser.

Direkt på objektet

Efter laddningen finns vissa kommandon också som metoder: ReactiveChat.getSession(), ReactiveChat.isOpen(), ReactiveChat.getEndpoint(), ReactiveChat.startConversation(), ReactiveChat.continueConversation(). Dessutom ReactiveChat.version (kärnans version). Dessa metoder finns inte före laddningen – funktionsformen är det säkra sättet.

Vad som inte finns

Så att ingen behöver leta: kommandona destroy, reset, setUser, send, setConsent, trackPage och navigate finns inte. Du styr samtycke genom samtyckesplattformen eller data-rc-consent (Integrera integritetsskydd), widgeten upptäcker själv sidbyten (SPA), och för utloggning se Identifiera besökare.

Nästa: Händelser