Ni kan enkelt anpassa text, färg och placering på Live-chattknappen – alltså den knapp besökaren klickar på för att starta en Livechatt på er webbplats.

Anpassa färg och placering

För att ändra utseendet behöver ni lägga till inställningar direkt i chattscriptet som ni klistrat in från Kod att kopiera i inställningarna för ert chattflöde.

Exempel: Knapp med blå bakgrund och turkos text

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

Tillgängliga inställningar:

javascriptCopyEdit{
  background_color: "#25bfda",       // Bakgrundsfärg
  text_color: "#ffffff",             // Text- & ikonfärg
  align_side: "left",                // Placering: "left" eller "right"
  offset: "50px",                    // Avstånd från höger/vänster kant
  vertical_offset: "50px"           // Avstånd från nederkant
}

Ändra knapptext

Ni kan också justera texten på chattknappen.

htmlCopyEdit<script>
  (function(w){
    w.$kundo_chat = w.$kundo_chat || {};
    w.$kundo_chat.custom_texts = {
      START_TEXT: "Klicka för att chatta",     // Syns innan klick
      LOADING_TEXT: "Laddar chatten"           // Syns precis efter klick
    }
  }(this));
</script>

Vill ni ha en helt tom knapp?
Sätt START_TEXT: " " (mellanslag som värde).

Justera höjd så chattrutan inte täcker header

Om chattrutan riskerar att skymma er hemsidas toppmeny (t.ex. header), kan ni justera höjden med CSS:

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

 Ändra 64px till höjden på er header.