Öppna chatten från egen länk eller knapp

I stället för chattbubblan i hörnet kan besökarna även öppna chatten från en länk eller knapp på webbplatsen – till exempel ”Hjälp och support” i sidofältet eller ”Fråga om min plan” på prissidan. Chattfönstret öppnas då precis intill det elementet.

Ingen extra kod behövs: den vanliga inbäddningskoden från Bädda in widgeten räcker. Ett exempel att kopiera finns också i kontot under Projekt → Inbäddning → Öppna chatten från egen länk.

Det enklaste fallet

En länk som pekar på #rc-open:

<a href="#rc-open">Help & support</a>

Eller en knapp med attributet data-rc-open:

<button type="button" data-rc-open>Open chat</button>

data-rc-open fungerar på alla element, inte bara knappar. Förutom #rc-open godtar widgeten även #reactive-chat som länkmål.

Klicket räknas även om widgeten inte har laddats färdigt: fönstret öppnas så snart den är redo.

Var fönstret visas

• Till höger om elementet om det finns plats, annars till vänster. Fönstrets överkant ligger i höjd med elementet.
• Alltid helt synligt: fönstret hålls inom det synliga området och följer elementet när sidan rullas eller webbläsarfönstrets storlek ändras.
• På smala skärmar (mindre än 480 pixlar breda, alltså de flesta smarttelefoner) öppnas chatten som vanligt i helskärm. Där finns ingen plats bredvid elementet.
• Som sidopanel: om chattfönstret är inställt som sidopanel i full höjd under Utseende öppnas det där och inte bredvid elementet.
• Om chatten redan är öppen flyttas fönstret till den senast klickade länken.
• När chatten stängs (även med Escape-tangenten) återgår tangentbordsfokus till länken eller knappen som öppnade den.

För att öppna fönstret på dess vanliga plats i hörnet skriver du data-rc-open="corner". data-rc-anchor="none" gör samma sak:

<button type="button" data-rc-open="corner">Open chat</button>

Förifyll meddelandefältet

Med data-rc-message finns en mening redan i meddelandefältet när chatten öppnas. Den skickas inte – besökaren kan komplettera, ändra eller radera den och skickar den själv.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

Upp till 200 tecken används. Chatten växlar då till konversationsfliken.

Välj en flik

Om chatten har flera flikar avgör data-rc-tab vilken som visas främst när den öppnas:

• msg – konversationen,
• home – startsidan,
• help – hjälpartiklarna.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

Om chatten saknar fliken du anger (till exempel help utan hjälpartiklar) öppnas chatten helt enkelt som vanligt.

Öppna från egen JavaScript

Samma alternativ finns som anrop. anchor är elementet som fönstret ska visas intill; message och tab är valfria:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Utan anchor öppnas fönstret på sin vanliga plats. ReactiveChat('open') utan alternativ fungerar som tidigare. Om själva elementet har data-rc-message eller data-rc-tab gäller de även för anropet; det du skickar uttryckligen i anropet har företräde.

Om din kod kan köras innan inbäddningskoden har laddats lägger du den här raden före den. Anropen köas då och utförs så snart widgeten är redo:

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

Helt utan chattbubbla

Om chatten bara ska kunna nås via egna länkar – till exempel ”Hjälp och support” i sidofältet – finns två sätt.

I kontot: under Projekt → Utseende → Profil ställer du in Visning på Endast via egna länkar (ingen chattikon) och sparar. Inställningen gäller utan ändringar på webbplatsen. Kopiera ändå inbäddningskoden under Projekt → Installation igen efteråt: den nya kodsnutten innehåller inte längre din profilfärg, så chattikonen blinkar inte till när sidan laddas. Så länge widgeten inte kunnat hämta inställningen från servern – till exempel utan anslutning eller vid ett första besök innan besökaren har accepterat cookies – visas ikonen ändå som säkerhetsnät, så att chatten går att nå.

I kodsnutten: om ikonen aldrig får visas döljer du chattbubblan med data-rc-hide-launcher="true" i inbäddningskoden. Attributet gäller alltid, oavsett inställningen i kontot:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

Se då till att varje sida där besökare ska kunna nå chatten har minst en sådan länk.

Felsökning

• Klicket lägger bara till #rc-open i adressen: widgeten är inte inbäddad på den här sidan eller har inte laddats (till exempel utan samtycke). Kontrollera att inbäddningskoden finns.
• Fönstret öppnas i hörnet i stället för intill länken: finns data-rc-open="corner" eller data-rc-anchor="none" på elementet? Är webbläsarfönstret smalare än 480 pixlar? Är chattfönstret inställt som sidopanel?
• Texten visas inte i meddelandefältet: attributet heter data-rc-message och måste finnas på själva elementet som klickades.

Övriga inställningar i kodsnutten beskrivs i Bädda in widgeten. Hur du visar ett kort för ditt eget erbjudande inne i chatten förklaras i Reklamkortet i chatten.

Läs mer i dokumentationen

Fördjupning: Referens för skripttaggen och JavaScript-API. Alla kapitel finns i dokumentationen.