Anpassa utseendet på Live-chattknappen

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.