Ga naar hoofdinhoud

Geavanceerde chatstijl

De ingebouwde uiterlijk instellingen .. kleuren, radii, schaduwen, scheidingswanden, acrup .. dekking van de meeste branding behoeften. Voor alles wat dan ook, er is een Aangepaste CSS veld in de admin app's globale instellingen. Wat er ook gaat in er wordt geïnjecteerd in een <style> blok op elke storefront pagina; er is geen per-pagina of per-blok versie van.

CSS aangepaste eigenschappen kunt u overschrijven​

Het widget stelt zijn eigen uiterlijk in door CSS aangepaste eigenschappen op :root, en op zijn eigen containers ook, dus ze werken nog steeds binnen thema's die Shadow DOM gebruiken. Override een van deze direct in plaats van het bestrijden van specificiteit:

:root {
  --user-bg-color: #2C9AB4;
  --user-text-color: #FFFFFF;
  --bot-bg-color: #FFFFFF;
  --bot-text-color: #1A1E23;
  --chat-bubble-radius: 10px;
  --input-button-radius: 10px;
  --outer-radius: 20px;
  --container-padding: 20px;
  --chat-input-spacing: 20px;
  --divider-spacing: 15px;
  --divider-thickness: 1px;
  --divider-color: rgba(0,0,0,0.1);
  --container-border-color: #2C9AB4;
  --container-border-width: 2px;
  --container-border-radius: 20px;
  --container-background-color: #FAFAFA;
  --shadow-offset-x: 8px;
  --shadow-offset-y: 8px;
  --shadow-blur: 24px;
  --shadow-opacity: 0.1;
  --profile-image-size: 40px;
  --bubble-size: 60px;
  --chat-container-width: 980px;
  --chat-container-padding: 20px;
  --chat-container-margin: 20px;
  --chat-max-height-desktop: 35vh;
  --chat-max-height-mobile: 50vh;
}

De meeste van deze hebben al een matching veld op de Uiterlijk pagina

Echte keuzes die de moeite waard zijn om te weten​

SelectieWat het is.
#main-chat-containerHet hoofdchatpaneel
.AIchatbotKlasse op het hoofdchatpaneel
[data-style-template="classic"] / .classic-stylePresenteer wanneer Classic het actieve sjabloon is
[data-style-template="bubbly"] / .bubbly-stylePresent wanneer Bubbly Glow actief is
[data-style-template="floaty"]Present wanneer Floaty actief is
#ai-ambient-wrapperBuitenverpakking voor de Floaty en Bubbly Glow ambient gloeiblobs
.chat-anchor-bubble-wrapperVaste-positie-wikkel rond de drijvende lanceerbel
.chat-anchor-bubbleDe circulaire lanceerbel zelf
.desktop-headingDe chatkop kop
.chat-login-buttonDe gastaanmeldprompt-knop
.show-border / .show-shadowToegepast op #main-chat-container wanneer deze instellingen aan staan

Een klein voorbeeld . . draai de schaduw van de bel en geef de header een aangepaste onderstreping, zonder het raken van een andere instelling:

.chat-anchor-bubble {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.desktop-heading {
  border-bottom: 2px solid var(--user-bg-color);
}

Een paar dingen om in gedachten te houden​

De drijvende zeepbel is altijd position: fixed, verankerd linksonder of rechtsonder, afhankelijk van de Positie van de bel instelling (zie Chattenpositionering & layoutU kunt het opnieuw inrichten met Custom CSS, maar het verplaatsen van een vaste hoek wordt niet ondersteund en zal waarschijnlijk breken op mobiele.

Aangepaste CSS is globaal . . één veld, toegepast op de widget op elke pagina en elk blok op de winkel, omdat het leeft in hetzelfde metafield als de rest van uw instellingen. Houd selectoren scoped aan de eigen klassen en ID's van de widget hierboven, in plaats van brede tag selectoren, zodat niets lekt in de rest van uw thema. En als u uw eigen animaties of overschrijven tekst kleuren, respect prefers-reduced-motion en contrast leesbaar houden . . de widget niet afdwingt een van die voor u op aangepaste CSS.

Volgende stappen​