Chatwidget stylen met Eigen CSS

Eigen CSS

Als de ingebouwde kleur- en themainstellingen niet toereikend zijn, kunt u beide widgets aanpassen met uw eigen CSS. De CSS wordt rechtstreeks in de widget geïnjecteerd, waardoor deze blijft werken ook al draait de widget in een Shadow DOM waar de stylesheets van uw pagina niet bij kunnen.

Beschikbaar voor Standaard-pakketten en hoger, voor zowel de zwevende widget als de Inline-widget, elk met een eigen CSS-veld.

Waar u het kunt vinden

• Zwevende widget: Dashboard → uw assistent → Kanalen → Chatwidget → Geavanceerd
• Inline-widget: Dashboard → uw assistent → Kanalen → Inlinechat → Geavanceerd

Het live voorbeeld naast de editor past uw CSS direct toe terwijl u typt. Het veld accepteert maximaal 20.000 tekens.

Stabiele selectors

Uw CSS richt zich op de elementen van de widget via deze gedocumenteerde classes. Dit is een stabiel contract: ze blijven werken na updates van de widget.

Waarschuwing: Alleen deze selectors zijn stabiel. Alle andere interne class-namen kunnen zonder voorafgaande kennisgeving veranderen wanneer de widget wordt bijgewerkt, wat uw styling kan breken. Controleer uw styling opnieuw na updates van de widget.

Geen !important nodig

Uw CSS overschrijft automatisch de ingebouwde stijlen van de widget, eenvoudige selectors zijn voldoende:

.wca-header {
  background: #0f172a;
}
.wca-message--bot {
  border-radius: 4px;
}

Technisch gezien verplaatst de widget zijn ingebouwde stijlen naar een CSS cascade layer wanneer er eigen CSS aanwezig is. Hierdoor krijgen uw regels zonder layer altijd voorrang, ongeacht de specificiteit van de selector.

Voorbeelden

De chatknop opnieuw stylen met een animatie:

@keyframes wca-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.wca-bubble {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: wca-pulse 2s ease-in-out infinite;
}

Vierkante berichtballonnen met een aangepaste lettergrootte:

.wca-message--bot,
.wca-message--user {
  border-radius: 4px;
  font-size: 15px;
}

Aangepaste styling voor het invoerveld:

.wca-input {
  border: 2px solid #0f172a;
  border-radius: 8px;
}
.wca-input::placeholder {
  color: #94a3b8;
}

Beperkingen

• Positie en grootte van de zwevende widget (afstanden, breedte, hoogte) worden geregeld via de dashboardinstellingen, niet via CSS, omdat ze als inline stijlen worden toegepast
• Andere interne classes buiten de gedocumenteerde .wca-*-selectors zijn niet stabiel
• @import en externe url()-verwijzingen zijn toegestaan, maar tellen mee voor de tekenlimiet en verlengen de laadtijd

Aanbevolen werkwijze

• Gebruik bij voorkeur de ingebouwde instellingen voor kleuren, lettertypen en afbeeldingen, gebruik eigen CSS alleen voor zaken die niet met de instellingen mogelijk zijn
• Houd u aan de gedocumenteerde selectors zodat updates van de widget uw styling niet breken
• Controleer uw live website na updates van de widget, vooral als u elementen buiten de stabiele selectors hebt gestyled
• Houd het beknopt, een handvol gerichte regels is eenvoudiger te onderhouden dan een compleet nieuw thema