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
  z_index: 1                         // Lägre tal lägger chatten under andra element
}

Ä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.

Lägg chatten under andra element på sidan

Chattknappen och chattrutan ligger som standard på z-index: 10000, alltså över det mesta på en webbplats. Har ni en egen panel som ska synas ovanpå chatten, till exempel en varukorg som glider in från sidan, sätter ni z_index i widget_styles:

<script>
  (function(w){
    w.$kundo_chat = w.$kundo_chat || {};
    w.$kundo_chat.widget_styles = {
      z_index: 1
    };
  }(this));
</script>

Värdet gäller chattknappen, flödesväljaren och chattrutan. Välj ett tal som är lägre än z-index på det element som ska ligga överst.

Använder ni även AI-chatten ställer ni in dess z-index separat, se Lägg upp AI-chatten på er webbplats.