Kundo

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

Uppdaterad

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 svart med vit text och en vit ikon. När en besökare för musen ovanför 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.

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

Kodexempel

Tänk på att ditt-org-id måste ersättas i alla exempel med rätt värde från "Kod att kopiera"-sidan.

Koden från "Kod att kopiera"-sidan utan ändringar

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

Exempel som ger knappen en blå bakgrund och turkos text

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

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

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

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