De chatinterface aanpassen
De chatinterface bepaalt de visuele en tekstuele presentatie binnen de klantervaring, terwijl Entry point bepaalt hoe shoppers deze ontdekken op verschillende pagina's en apparaten. Beide onderdelen bieden voorbeelden...
De chatinterface bepaalt de visuele en tekstuele presentatie binnen de klantervaring, terwijl Entry point bepaalt hoe shoppers deze ontdekken op verschillende pagina's en apparaten. Beide onderdelen bieden voorbeelden, maar de definitieve validatie moet plaatsvinden op de echte storefront.
Deze handleiding behandelt de huidige bedieningselementen voor avatar, kleur, vorm, optionele tekst, winkelwagen, pictogram, entry-point en paginaregels, zonder ervan uit te gaan dat elk bedrijf of elke integratie identieke opties biedt.
Hoe dit binnen Humind past
AI Agent is de configuratieruimte voor de klantgerichte assistent. Knowledge en Catalog leveren feiten, Guidance bepaalt het reactiegedrag, Tools voegen acties toe, Escalation definieert menselijke ondersteuning, Test-oppervlakken laten je het resultaat beoordelen vóór implementatie.
Wijzigingen kunnen veel gesprekken beïnvloeden, dus test representatieve koop- en ondersteuningsscenario's na elke betekenisvolle update. Een visueel correcte chat is niet genoeg: controleer samen het antwoord, de productcontext, de beschikbare actie en het overdrachtsgedrag.
Voordat je begint
Toegang: Schrijftoegang voor de configuratie van Agent is vereist. Sommige geavanceerde instellingen zijn beperkt tot Humind-beheerders, en Shopify-specifieke bedieningselementen verschijnen alleen voor verbonden Shopify-bedrijven.
- Bereid goedgekeurde logo- of avatarbestanden en merkkleuren voor.
- Controleer kleurcontrast en beperkingen van de mobiele storefront voordat je waarden kiest.
- Maak een lijst van paginatypen waarop de launcher zichtbaar, verborgen of aangepast moet zijn.
Stapsgewijze workflow
Stel de visuele basis in
Open AI Agent en daarna Chat interface. Kies een avatar uit de galerij of upload het bedoelde bestand. Stel interface- en tekstkleuren in, de ronding van de bubbel, achtergrond- en tekstkleuren voor toevoegen aan winkelwagen, en de ronding van knoppen.
Gebruik de preview tijdens het bewerken en controleer leesbaar contrast in elk gekleurd onderdeel. Instellingen op deze pagina worden direct opgeslagen, dus wacht op de opslagbevestiging en vermijd snelle tegenstrijdige wijzigingen.
Controleer geavanceerde presentatieopties
De huidige interface kan optioneel een aangepaste Agent-naam, starttitel en startbegroeting gebruiken. Deze kan het sprankelpictogram, de gift-finder-afbeelding, vooraf ingestelde vragen en de knop voor toevoegen aan winkelwagen tonen of verbergen. Shopify-bedrijven kunnen kiezen of de winkelwagenactie naar de winkelwagen of checkout gaat via de beschikbare bestemmingsinstelling.
Een lege aangepaste startwaarde kan die regel bewust verbergen. Leg deze beslissing vast zodat een leeg resultaat later niet wordt aangezien voor verloren inhoud.
Configureer het standaard Entry point
Open AI widgets en daarna Entry point. Schakel de standaard launcher in en kies het type, de positie, het label, de zichtbaarheid van de avatar, de bubbelgrootte, de logobehandeling en horizontale of verticale offsets waar beschikbaar. Schakel tussen desktop en mobiel om beide configuraties te beoordelen.
Houd de launcher vindbaar zonder de winkelnavigatie, toestemmingsinstellingen, productaankoopacties of toegankelijkheidswidgets te bedekken.
Voeg alleen paginaspecifieke regels toe wanneer nodig
Paginaregels kunnen ondersteunde paginatypen targeten en de zichtbaarheid op mobiel of desktop instellen op hidden, inherited of custom. Aangepaste regels kunnen de presentatie van de launcher wijzigen voor de geselecteerde paginacontext. Regels voor productpagina's kunnen ook de huidige automatische optie voor productvragen tonen.
Vermijd overlappende regels. Gebruik de contexttabbladen van de preview om standaard- en paginaspecifieke uitkomsten te vergelijken, en verwijder verouderde regels in plaats van uitzonderingen eindeloos te stapelen.
Valideer toegankelijkheid en live lay-out
Test in de preview toetsenbordtoegang, tekstcontrast, openen en sluiten, lange vertaalde tekst, smalle schermen, productpagina's en winkelwagengedrag. Implementeer daarna en herhaal de controles op de echte storefront in een privébrowser.
Als het live resultaat afwijkt, onderzoek dan de installatie, verouderde storefront-bestanden, bedrijfscontext en overeenkomst van paginaregels voordat je het ontwerp opnieuw wijzigt.
Rechten en belangrijke aandachtspunten
- De preview bevat niet elk storefront-thema, overlay of responsieve interactie.
- Geavanceerde en Shopify-specifieke opties zijn voorwaardelijk, documenteer alleen bedieningselementen die zichtbaar zijn voor het actieve bedrijf.
- Instellingen die live worden opgeslagen kunnen tests direct na het opslaan beïnvloeden.
- Paginaregels moeten wederzijds begrijpelijk blijven tussen desktop en mobiel.
Controleer het resultaat
Gebruik deze checklist voordat je het werk als voltooid beschouwt:
- Avatar-, tekst-, interface- en winkelwagenkleuren voldoen aan de contrastnorm van het team.
- Standaard- en paginaspecifieke previews van het entry-point komen overeen met de gedocumenteerde regelset.
- Lange labels, vertalingen, toetsenbordfocus en mobiele lay-outs blijven bruikbaar.
- De live storefront toont één correcte launcher zonder kritieke bedieningselementen te bedekken.
Problemen oplossen
Een visuele wijziging verschijnt niet
Wacht op de opslagbevestiging van de pagina, bevestig het actieve bedrijf, vernieuw de preview en test een nieuwe storefront-sessie. Controleer of een paginaspecifieke regel de standaard overschrijft.
De launcher verschijnt op de verkeerde plaats
Controleer apparaatsselectie, positie, offsets en de overeenkomende paginaregel. Bevestig dat een andere dubbele widgetinstallatie niet de onverwachte instantie veroorzaakt.
Tekst of knoppen zijn moeilijk leesbaar
Controleer opnieuw zowel de achtergrond- als tekstkleuren voor interface- en winkelwagenbedieningselementen. Test echte labels en vertaalde tekst op desktop- en mobiele formaten voordat je het gecorrigeerde ontwerp publiceert.