Boleh kami bantu?

Terangkan ringkas perkara ini – kami akan menghubungi Anda melalui e-mel.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Ke halaman utama

Färger, typsnitt och tema

Profilfärg, accent, egna ytfärger, hörnradie, typsnitt, ljust och mörkt, mallar och egen CSS – och hur widgeten ser till att all text förblir läsbar.

Widgeten använder din profilfärg, ditt typsnitt och om du vill en hel uppsättning egna färger. Den räknar då om färgerna tills all text förblir läsbar på varje yta. Du väljer färgen, widgeten tar hand om kontrasten.

Alla inställningar på den här sidan finns under /app/projects/{id} på fliken Utseende, avsnittet Profil. Undantaget är färgtemat (ljust, mörkt, automatiskt): det finns på fliken Installation under Grunduppgifter.

Designguiden

Överst i avsnittet Profil leder en guide dig genom designen i fyra steg:

  1. Stil – 18 färdiga mallar, som kan filtreras efter Ljus, Mörk, Professionell, Lekfull, Mysig, Sval och Minimal. Bland dem finns till exempel Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit och Espresso.
  2. Färger – primärfärg och accent, snabbval bland åtta färgpar och val av ytor: standard, ljusa, mörka eller egna.
  3. Form – fönsterstil, hörnradie, chattknappens form och storlek.
  4. Klart – en sammanfattning.

Guiden sparar ingenting själv. Den fyller bara i fälten nedanför; inget sparas förrän du trycker på Spara. Miniatyren i guiden är en skiss. Den riktiga widgeten med dina värden ser du i förhandsvisningen av avsnittet Widgetens startskärm.

För finjustering fäller du ut Alla inställningar var för sig. Typsnitt och egen CSS finns bara där.

Fälten

Endast färger i formen #rrggbb med sex siffror är giltiga. Kortformer som #f00 eller rgb(…) förkastas och standardvärdet används i stället.

Ytor och text

Under Ytor och text kan du vid behov ange fem ytterligare färger. Varje färg har en kryssruta för egen färg:

Utan bocken använder widgeten den färguppsättning som passar webbplatsen, ljus eller mörk. Värdet i fältet är då bara en utgångspunkt, inte ett avläst värde. Med bocken gäller din färg.

Om du bara anger en egen bakgrund härleder widgeten resten från den: bubbelyta, text, sekundär text och linjer.

Läsbarhet: vad widgeten räknar om

Kunder väljer sin profilfärg, inte en läsbar färg. Därför kontrollerar widgeten varje kombination av text och yta mot ett kontrastförhållande på minst 4,5:1. Det är gränsen i WCAG 2.x för vanlig text.

Vad som räknades om visas i kontot direkt under formuläret, på raden Omräknat så att texten förblir läsbar. En ljusgul textfärg ser därför mörkare ut i widgeten än den du angav, och där ser du varför.

På din sida kan du också själv hämta de uppmätta värdena:

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Ljust, mörkt eller som webbplatsen

Under Installation → Grunduppgifter → Widgetens färgtema väljer du:

Med det automatiska valet tittar widgeten på följande, i den här ordningen:

  1. sidans bakgrundsfärg mitt på skärmen,
  2. CSS-värdet color-scheme på <html>, om det är exakt dark eller light,
  3. vanliga växlar på <html> eller <body>, som klassen dark eller data-theme="dark",
  4. till sist besökarens systeminställning.

Om sidan växlar mellan ljust och mörkt följer widgeten med. Den kontrollerar också igen när fönstret öppnas.

I kod anger du temat på inbäddningskoden eller vid körning. Det har företräde framför kontoinställningen:

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

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

Med setTheme minns widgeten valet i besökarens webbläsare. setTheme('auto') tar bort det igen. Det passar en egen växel för ljust/mörkt på sidan.

Ange färger i kod

För enskilda sidor, till exempel en kampanj, kan du ange profilen på inbäddningskoden eller vid körning. Fältnamnen är:

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand räknar om kontrast och härledda färger direkt, utan att bygga om widgeten. null tar bort ett värde igen och standardvärdet gäller.

På inbäddningskoden heter attributet data-rc-brand och tar JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Viktigt – vad har företräde, inbäddningskoden eller kontot? Koden som ditt konto genererar innehåller redan profilfärg, radie samt chattknappens form och storlek. Det är bara startläget, så att chattknappen visas med rätt färg direkt. Så snart widgeten har inställningarna från servern gäller kontot fullt ut.

Om du däremot skriver något ytterligare fält i data-rc-brand, till exempel accent, stil eller en etikett, räknas profilen i koden som sidans egen profil. Den har då företräde framför kontot. Från kontot gäller bara visningen ”Endast via egna länkar” fortfarande på den här sidan. Sidan deltar inte heller i några A/B-test.

Om du ändrar profilfärg i kontot kopierar du inbäddningskoden under Installation igen efteråt. Annars blinkar den gamla färgen till medan sidan laddas.

Hur själva inbäddningskoden fungerar och vilka andra sätt som finns (window.ReactiveChatSettings, ReactiveChat('boot', …)) beskrivs i Teknisk integration.

Egen CSS

Under Alla inställningar var för sig → Egen CSS skriver du CSS som tillämpas sist, efter alla andra regler.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

I kod fungerar samma sak med customCss, till exempel i ReactiveChat('boot', { customCss: '…' }) eller som attributet data-rc-custom-css.

Logotyp i fönstrets rubrikfält

Enklast är att ange logotypen i kontot: Projekt → Utseende → Profil, fältet Logotyp (adress). Den visas sedan i chattfönstrets rubrikfält, senast en minut efter att du sparat.

I kod kan du med logo också ange höjd, alternativtext och placering, till exempel logotypen i chattknappen. En logotyp i kod har företräde framför kontofältet:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

Logotypen på startskärmen är däremot enkel att ange i kontot, se Chattens startskärm.

Om något ser annorlunda ut än väntat

Kemas kini terakhir: