Chattknappen: form, storlek, ikon, etikett och position

Chattknappen är knappen nere i hörnet som besökarna öppnar chatten med. Du ställer in den under /app/projects/{id} på fliken Utseende, avsnittet Profil. En liveförhandsvisning, Det här är din chattknapp, visar varje ändring direkt. Du sparar med Spara och ändringen når besökarna inom en minut.

Chattknappens färg är din primärfärg, se Färger, typsnitt och tema.

Mallar för chattknappen

20 färdiga kombinationer, till exempel ”Virtuell assistent – Svarar inom 2 min”, ”Har du en fråga?”, ”Kundservice – Mån–fre 8–18” eller ”AI-assistent – Svarar på sekunder”. Ett klick fyller i form, ikon, etikett, andra rad, visning och storlek. Dina färger förblir som de är; inget sparas förrän du trycker på Spara. Justera sedan texterna.

Fälten

• Form – cirkel (standard), rundad, fyrkantig, pratbubbla eller blad. Pratbubblans spetsiga hörn pekar mot skärmens hörn. Bladet har två små, motsatta hörn.
• Storlek (px) – 44 till 72, standard 56. 44 är den minsta yta som fortfarande går att trycka på tillförlitligt.
• Storlek på telefoner (px) – 40 till 72. Tomt betyder 48 px, eller mindre om storleken ovan är mindre.
• Ikon – pratbubbla (standard), frågetecken, headset, gnistor eller ingen ikon (endast text). Utan ikon behöver chattknappen en etikett och visningen alltid. Annars visar widgeten pratbubblan.
• Etikett – synlig text bredvid ikonen, högst 40 tecken. Tomt betyder bara ikonen.
• Andra raden – en mindre rad under etiketten, högst 60 tecken. Utan etikett förblir den osynlig.
• Visning – när etiketten är synlig:
• alltid (standard),
• bara när pekaren hålls över – bara ikonen; etiketten glider fram när pekaren hålls över eller vid tangentbordsfokus. På pekskärmar förblir bara ikonen synlig.
• bara på stora skärmar – etikett först från 481 px bredd, därunder bara ikonen,
• Endast via egna länkar (ingen chattikon) – ingen chattknapp alls, se nedan.

Etikett per språk

Etikett och andra rad från formuläret gäller på alla språk. Vill du ha olika text per språk anger du dem under Texter och formulär → Egna formuleringar med nycklarna launcher.text och launcher.subtext. Ett värde där har företräde framför fälten här. Mer i Texter och språk.

Chatt helt utan chattknapp

Med visningen Endast via egna länkar (ingen chattikon) visas ingen chattknapp. Besökarna öppnar chatten från dina egna länkar eller knappar:

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

Lägg minst en sådan länk på varje sida där chatten ska kunna nås. Kopiera sedan inbäddningskoden under Installation igen: den nya innehåller inte längre profilfärgen, så chattknappen blinkar inte till medan sidan laddas.

Så länge widgeten inte har kunnat hämta inställningen från servern, till exempel utan anslutning eller vid första besöket före samtycke till cookies, visas chattknappen ändå som en säkerhetsåtgärd. Om den aldrig får visas lägger du också till detta i koden:

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

data-rc-hide-launcher gäller alltid, oavsett vad som är inställt i kontot. Utan chattknapp finns heller inga tooltip-bubblor vid chattknappen. Alla sätt att öppna chatten från egna element, med förifylld text och val av flik, beskrivs i Öppna chatten från en egen länk eller knapp.

I stället för en länk kan du också göra ett befintligt element på sidan till utlösare. data-rc-launcher-selector tar en CSS-selektor:

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

Position och avstånd

Sida, avstånd och staplingsnivå anges i inbäddningskoden. Kontot har inga fält för dem.

• data-rc-position – right (standard) eller left.
• data-rc-offset – avstånd från kanten i pixlar som JSON, standard {"x":20,"y":20}. Widgeten lägger till säkra områden som kamerautskärningen på iPhone.
• data-rc-z-index – staplingsnivån, standard 2147483000. Sänk den om ett eget element ska ligga ovanför chatten.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-position="left"
        data-rc-offset='{"x":24,"y":96}'
        async></script>

Samma fält fungerar också som position, offset och zIndex via window.ReactiveChatSettings eller ReactiveChat('boot', …). Se Teknisk integration.

Undvik fasta fält

Om sidan har ett fast fält vid nederkanten, till exempel en cookie-banner, ett varukorgsfält eller en navigationsrad på telefoner, flyttar sig chattknappen automatiskt ovanför det med 12 px mellanrum. Den mäter på nytt när sidan ändras. Element som upptar mer än 40 % av fönsterhöjden räknas som överlägg. Dem undviker den inte.

Du kan stänga av detta i inbäddningskoden:

data-rc-avoid-overlap="false"

Chattknapp med egen ikon

En helt egen ikon fungerar i kod via profilen: launcher.icon tar en inline-SVG eller en data:-adress och har företräde framför den valda ikonen.

ReactiveChat('setBrand', {
  launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});

Obs: en profil med sådana fält i koden (data-rc-brand) har företräde framför kontoinställningarna på den här sidan. Se Färger, typsnitt och tema.

På telefoner

Under 481 px bredd (och på telefoner i liggande läge upp till 480 px höjd) gäller telefonstorleken. Med visningen bara på stora skärmar visar chattknappen bara ikonen där. När besökaren öppnar chatten fyller fönstret hela skärmen och chattknappen drar sig undan.

Om chattknappen inte ser ut som väntat

• Ingen chattknapp syns: är visningen inställd på Endast via egna länkar, eller är data-rc-hide-launcher="true" satt i koden? Är projektet pausat?
• Chattknappen visas trots ”Endast via egna länkar”: widgeten har inte fått inställningen från servern än (reservläge). Lägg också till data-rc-hide-launcher="true".
• Pratbubblan visas även utan ikon: utan ikon behöver du en etikett och visningen alltid.
• Ändringar kommer inte fram: finns data-rc-brand i koden med etikett, ikon eller andra ytterligare fält? Då har koden företräde.