Chattfönster: stil, storlek, sidopanel och mobilvy

Färgerna sätter karaktären, formen gör resten. Under /app/projects/{id} på fliken Utseende, avsnittet Profil, finns två grupper av val: Stil (form snarare än färg) och Fönster (hur det öppna fönstret visas). Om du inte väljer något behålls standardvärdena. Du sparar med Spara; förhandsvisningen under Widgetens startskärm visar den riktiga widgeten.

Designguidens mallar anger samtidigt dessa val.

Stil

• Rubrikfält – toning (standard), platt eller glas. Gäller startskärmens rubrikfält och namnlisten.
• Täthet – normal (standard), kompakt eller luftig. Avstånd på startskärmen och i konversationen.
• Bubblor – mjuk (standard, följer hörnradien), rund (18 px) eller kantig (4 px).
• Skugga – mjuk (standard), hård eller ingen. Gäller fönstret, inte chattknappen.
• Avatar – rund (standard) eller kantig.
• Inmatningsfält – platt (standard) eller pillerform (kraftigt rundat, med runda knappar).
• Kort – med ram (standard) eller platt. Gäller startskärmens rutor, hjälprader och kort i konversationen.

Fönster

• Fönsterstorlek – normal (standard, 380 px brett), bred (440 px), smal (340 px) eller hög (nästan hela skärmhöjden, högst 960 px). Normalhöjden är 620 px, mindre på små skärmar.
• Layout – flytande fönster (standard) eller sidopanel. Sidopanelen sitter i full höjd vid kanten, på chattknappens sida, och glider in därifrån. Chattknappen drar sig undan medan panelen är öppen. Den stängs med knappen i rubrikfältet.
• Bakgrund – meddelandeområdets bakgrund: enkel (standard), prickar, rutnät eller toning (en aning av profilfärgen).
• Textstorlek – normal (standard, 14 px), stor (15,5 px) eller liten (13 px). Gäller bubblor och inmatning, inte chattknappen.
• Öppningsanimation – glid in (standard), zooma in, tona in eller ingen. Om besökaren har valt ”minska rörelse” i systemet uteblir animationen ändå.
• Besökarbubbla – färgen på besökarnas bubblor: primärfärg (standard, en ljus blandning av profilfärgen), accentfärg eller neutral (grå). Även här räknar widgeten om textfärgen tills texten är läsbar.

Fönsterstorlek och layout gäller först från 481 px skärmbredd. Därunder öppnas chatten alltid i helskärm (se nedan).

I kod

Alla val finns i profilen under stil. Värdena är de interna namnen:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Ett okänt värde återgår till standardvärdet.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

Som data-rc-brand='{"stil":{"ansicht":"seite"}}' i inbäddningskoden räknas profilen som sidans egen profil och har företräde framför kontot, se Färger, typsnitt och tema.

Rörelse

Med data-rc-motion i koden styr du animationer: auto (standard, följer besökarens systeminställning), reduced (ingen rörelse) eller full.

data-rc-motion="reduced"

Rubrikfält

Rubrikfältet visar vem som svarar:

• Om någon i teamet skriver visas personens visningsnamn. Varje teammedlem anger det i sina personliga inställningar, se Team, konsol och aviseringar.
• Om AI-assistenten svarar visas namnet från AI och kunskap → Assistent (standard ”Ada”), se AI-assistent.
• Annars titeln ”Chatt”. Du ändrar den och den andra raden (”Vi finns här”, ”AI-assistent”) under Texter och språk med nycklarna header.title, header.subtitle_online och header.subtitle_bot.

Avatarer visar namnets första bokstav och tecknet ✦ för assistenten. Egna foton för teammedlemmar kan inte sparas för närvarande.

Rubrikfältet har också en kuvertikon som låter besökare få konversationen skickad via e-post. Du stänger av den under Regler och service → Konversationen via e-post, se Tillgänglighet, formulär och service.

Informationen ”Powered by reactive.chat”

På gratisplanen visas ”Powered by reactive.chat” längst ner i fönstret. Från en betald plan bestämmer du själv under Utseende → reactive.chat i chatten med växeln Dölj ”Powered by reactive.chat”. Standard är då dolt. Formuleringen kan inte ändras.

På telefoner

Upp till 480 px bredd, och på enheter i liggande läge upp till 480 px höjd, öppnas chatten i helskärm: utan hörn, med hela den synliga höjden, även när skärmtangentbordet öppnas. Inmatningsfältet använder 16 px text så att telefonen inte zoomar in och knappar är minst 44 px stora. Chattknappen drar sig undan medan chatten är öppen.

Fönsterstorlek och sidopanel gäller inte på telefoner. Övriga stilval, färger och textstorlek gör det. Chattknappens telefonstorlek anger du under Chattknappen.