Ping Chat-widget#
Ping chat-widget kan bruges til at installere Ping på enhver hjemmeside.
Følg nedenstående trin for at installere den.
Forudsætninger#
For at konfigurere Ping på dit website skal du først oprette en bot og gøre den offentlig.
Installation af widget’en#
Følg disse trin for at installere chat-widget’en på dit website.
Først skal du tilføje Ping-widget’en i <head> på dit website:
<script type='module' src='https://unpkg.com/ping-chat@0.2.1/dist/ping-chat/ping-chat.esm.js'></script>
Dernæst skal du tilføje følgende kode der, hvor du ønsker knappen til at åbne Ping-chatten:
<ping-chat visible="false" team="ping" bot="ping" button-text="Let's Chat"></ping-chat>
Husk at opdatere værdierne for team og bot, så de matcher ID’erne fra din Ping-konto.
Tilpasning af widget’en#
Du kan tilpasse farver og placering af chat-widget’en med CSS og CSS-variabler.
Du kan også ændre knappens tekst med attributten button-text.
Her er et eksempel på ændring af farver, tekst og placering af widget’en i nederste højre hjørne:
<style>
ping-chat {
/* Til reference er dette standardpositionen
position: fixed;
right: 20px;
bottom: 20px;
*/
/* Ændring til position: static vil placere knappen dér på siden, hvor <ping-chat>-elementet er defineret (i stedet for flydende i hjørnet) */
position: static;
/* Ændring af farver */
--button-background-color: blue;
--button-background-color-hover: black;
--button-text-color: white;
--button-text-color-hover: yellow;
--button-border-color: gray;
--button-border-color-hover: black;
}
</style>
<ping-chat visible="false" team="ping" bot="ping" button-text="👋"></ping-chat>
Z-indeks#
Hvis chat-widget’en vises bagved andre elementer på din side, kan du øge dens z-index ved at sætte CSS-variablen --ping-z-index. Standardværdien er 50.
<style>
ping-chat {
--ping-z-index: 1000;
}
</style>
Du kan finde flere oplysninger i ping-chat dokumentationen på NPM.