Kundo

Anpassa design och utformning på "Chatta med oss"-knappen

Uppdaterad

Det går att anpassa både text, färg och viss placering på er chatt-flik.

I framtiden kommer detta gå att göra med ett enklare gränssnitt, men idag kräver det lite ändringar i scriptet du klistrat in på din sajt från "Kod att kopiera" under inställningar för ert chattflöde.

Här är ett exempel (Tänk på att ditt-org-id måste ersättas med rätt värde från "Kod att kopiera"-sidan):

Koden från "Kod att kopiera"-sidan:

<script>
    (function(w){
        w.$kundo_chat=w.$kundo_chat||{};
        w.$kundo_chat.org=ditt-org-id;
     }(this));
</script>
<script src="https://static-chat.kundo.se/chat-js/org/ditt-org-id/widget.js" async defer></script>

För att göra så att "Chatta med oss"-knappen har t.ex en blå bakgrund:

<script>
    (function(w){
        w.$kundo_chat=w.$kundo_chat||{};
        w.$kundo_chat.org=ditt-org-id;
        w.$kundo_chat.widget_styles = {
            background_color: "blue"
        };
     }(this));
</script>
<script src="https://static-chat.kundo.se/chat-js/org/ditt-org-id/widget.js" async defer></script>

De ändringar som kan göras på detta sätt är:

{
    // Bakgrundsfärg för knappen (kundoblå)
    background_color: "#32c1df",
    // Textfärg för knappen (vit)
    text_color: "#ffffff",
    // Färg för ikonen (pratbubblorna) som visas till höger (grön)
    icon_color: "#228b22",
    // Vilken sida chatten ska visas på (left eller right). Denna kräver att också
    // offset är satt
    align_side: "left",
    // Hur långt från kanten chatten ska visas
    offset: "50px",
}

För att ändra texter:

<script>
    (function(w){
       w.$kundo_chat=w.$kundo_chat||{};
       w.$kundo_chat.org=ditt-org-id;
        w.$kundo_chat.custom_texts = {
            START_TEXT: "Klicka för att chatta",
            LOADING_TEXT: "Laddar Chatten",
        }
     }(this));
</script>
<script src="https://static-chat.kundo.se/chat-js/org/ditt-org-id/widget.js" async defer></script>