Det går att anpassa text, färg och viss placering på er chatt-flik, den knapp som används för att starta en chatt på er webbplats.

Standardutseendet för knappen är vit text och en vit ikon mot en svart bakgrund. När en besökare för musen ovanpå knappen så växlar färgerna för text och bakgrund plats för att göra det tydligt att knappen går att interagera med.

För att anpassa knappen behöver ändringar göras i skriptet du klistrat in på din webbplats från "Kod att kopiera" under inställningar för ert chattflöde.

Kodexempel

Exempel som ger knappen en blå bakgrund och turkos text

Färgen på ikonen blir densamma som textfärgen, om inte en egen färg sätts för ikonen.

<script>
  (function(w){
    w.$kundo_chat=w.$kundo_chat||{};
    w.$kundo_chat.widget_styles = {
      background_color: "blue",
      text_color: "#40e0d0"
   };
  }(this));
</script>

De ändringar som är möjliga att göra på detta sätt är:

{
  // Bakgrundsfärg för knappen (Kundo-blå)
  background_color: "#25bfda",
  // Textfärg för knappen (vit) - kommer också att ändra färgen på ikonen
  text_color: "#ffffff",
  // Vilken sida chatten ska visas på ("left" eller "right")
  align_side: "left",
  // Ändra hur långt från kanten av webbläsarfönstret som chatten 
  // ska visas (gäller enbart om webbläsarfönstret är minst 600px
  // brett)
  offset: "50px",
  vertical_offset: "50px",
}

Ändra knapp-texter

Det går att ändra vad som står på knappen. START_TEXT är den text som visas innan en användare klickar på knappen. LOADING_TEXT är texten som visas efter att en användare klickat på knappen och innan chattfönstret har hunnit öppnas.

<script>
  (function(w){
    w.$kundo_chat=w.$kundo_chat||{};
    w.$kundo_chat.custom_texts = {
      START_TEXT: "Klicka för att chatta",
      LOADING_TEXT: "Laddar Chatten",
    }
  }(this));
</script>

Vill du inte ha någon text alls på knappen så är det möjligt genom att enbart ange ett mellanslag som värde; START_TEXT: " "

Anpassa chattrutan efter er hemsidas header

Ibland har det hänt att vår chatt lägger sig ovanför headern på hemsidan, och att man alltid vill att den ska synas. I dessa fall rekommenderar vi att man lägger till följande kodexempel i er CSS:

#kundo_chat_frame {
 max-height: calc(100% - 64px) !important;
 }

Har kan 64px ändras till det värdet ni önskar, som bör motsvara höjden på er header.