Hoe je het uiterlijk van je chatbot aanpast

Shoply AI Chat en AI Search bieden meer dan 40 opties om het uiterlijk van de app aan te passen.

In deze sectie leiden we je door de verschillende aanpassingsopties die beschikbaar zijn voor je AI Chatbot. Je kunt het uiterlijk, het ontwerp van het chatvenster en de berichtenervaring personaliseren zodat deze bij je merk passen.

Klaar om te beginnen? Open Customize AI Chat in je Shoply AI Admin Console, of je nu Shopify of een ander websiteplatform gebruikt. Als de chatbot nog niet zichtbaar is, volg dan de installatie- en zichtbaarheidschecklist.

Bekijk een voorbeeld van je chatvenster

Probeer hetzelfde thema en dezelfde illustraties op desktopbreedte die in de admin worden gebruikt. Kies een lichte of donkere weergave en vergelijk hoeveel ruimte het chatvenster inneemt.

Als je wilt aanpassen hoe de AI spreekt in plaats van hoe deze eruitziet, bekijk dan hoe je de persoonlijkheid van je AI aanpast.

Keuze van chatpictogram

Select an icon

Je kunt een chatpictogram kiezen uit onze 17 vooraf gedefinieerde pictogrammen, of een afbeelding uploaden als je eigen chatpictogram

Kleur en grootte van het chatpictogram

Primary Color

Dit is de hoofdkleur van het thema, en deze wordt ook gebruikt als accentkleur voor tekst in het chatvenster.

Als je een lichte modus op je website gebruikt, kies dan een niet-witte kleur als themakleur — dit zorgt ervoor dat de geaccentueerde tekst leesbaar blijft op de lichte achtergrond. Als je een donkere modus op je website gebruikt, kies dan een niet-zwarte kleur als themakleur.

Complementary Color

Dit is een aanvullende kleur die samen met je primaire kleur verlooptinten creëert (een vloeiende overgang tussen twee kleuren) voor het chatpictogram en de kop van het chatvenster, waardoor het chatpictogram visueel aantrekkelijker wordt en beter bij je merk past.

Icon’s Line Color

Dit is de omtrekkleur van het chatpictogram.

Whether to remove the background color of the chat icon.

Dit is vaak handig als je een afbeelding uploadt als chatpictogram en je de achtergrondkleur (de primaire kleur) van het chatpictogram wilt verwijderen.

Whether to remove the shadow of the chat icon.

Met deze optie kun je het slagschaduweffect van het chatpictogram verwijderen voor een platter, minimalistischer ontwerp. Dit is vooral handig als je winkel een strakke, moderne uitstraling heeft, of als je een aangepast pictogram hebt geüpload dat al zijn eigen schaduw- of diepte-effecten bevat.

Floating Icon Size for desktop and mobile.

Op mobiel wil je mogelijk een kleinere grootte instellen voor het chatpictogram, zodat het het zicht van de klant op het mobiele scherm niet belemmert.

Positionering van het chatpictogram

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

Gebruik een hogere waarde als je wilt dat het pictogram voor andere UI-elementen blijft staan.

Auto-hide chat icon on mobile

Verberg het chatpictogram na een opgegeven aantal seconden op mobiele apparaten.

Deze optie is alleen beschikbaar voor mobiele apparaten. Het helpt voorkomen dat het chatpictogram het zicht van de klant op het mobiele scherm belemmert.

Aanpassing van het chatvenster

Wanneer je op het chatpictogram van Shoply AI klikt, verschijnt het chatvenster. Klanten kunnen via dat chatvenster met Shoply AI communiceren.

In deze sectie leiden we je door de verschillende opties die beschikbaar zijn om het chatvenster aan te passen.

Color Theme (dark mode or light mode) of the chat window

Als je de donkere modus kiest, wordt de achtergrond van het chatvenster zwart en de letterkleur wit. We raden aan om de optie voor donkere modus te gebruiken als het thema van je winkel ook in donkere modus is.

Width of the chat window on desktop

Deze optie geldt alleen voor desktop. Op mobiel beslaat het chatvenster altijd het hele scherm.

Select the branding image and background image

Je kunt ervoor kiezen om je eigen brandingafbeelding en achtergrondafbeelding voor het chatvenster te uploaden, of Shoply AI die afbeeldingen eenvoudig voor je laten genereren.

Als je ervoor kiest om de door AI gegenereerde afbeelding te gebruiken, genereert Shoply AI de brandingafbeeldingen en achtergrondafbeeldingen op basis van de beschrijving van je winkel.

Adjust the transparency and aspect ratios of the background image for the chat window.

Achtergrondafbeeldingen in het chatvenster kunnen de tekst erboven onleesbaar maken. Daarom voegen we standaard een halftransparante laag toe boven de achtergrondafbeelding.

Whether to remove Shoply AI’s Logo in Input Bar

Met deze optie kun je het Shoply AI-logo uit de chatinvoerbalk verwijderen voor een strakkere, meer merkgerichte ervaring. Dit is vooral handig als je een consistente merkidentiteit in je hele winkel wilt behouden zonder logo’s van derden, of als je de voorkeur geeft aan een minimalistischer ontwerp van de chatinterface.

Deze optie is alleen beschikbaar voor betaalde abonnementen.

Vooraf gedefinieerde berichten voor AI Chat

Je kunt ook standaardberichten instellen of bewerken die klanten begeleiden wanneer ze voor het eerst met je chatbot communiceren. Daarnaast kun je de vertaalopties voor die berichten configureren (zie deze FAQ-pagina voor meer informatie).

Popup Welcome message (shows above chat icon if not empty)

Als je het welkomstbericht leeg laat, tonen we het welkomstbericht niet boven het chatpictogram.

Pre-defined messages in chat window

Je kunt tot 3 soorten vooraf gedefinieerde berichten instellen in het chatvenster:

1. Eerste bericht in het chatvenster - Dit is het eerste begroetingsbericht dat automatisch verschijnt wanneer klanten het chatvenster voor het eerst openen. Gebruik dit om klanten welkom te heten en de toon van het gesprek te zetten.

2. Tot 4 startvragen - Dit zijn klikbare vraagsuggesties die aan het begin van de chat worden weergegeven. Ze helpen klanten op weg door veelvoorkomende vragen aan te bieden waarop ze kunnen klikken om een gesprek te starten, waardoor het voor klanten gemakkelijker wordt om te beginnen.

3. Plaatsaanduidingstekst in het invoerveld - Dit is de hinttekst die verschijnt in het chatinvoerveld voordat klanten beginnen met typen. Het geeft aan wat klanten kunnen vragen, zoals “Ask me anything 🤗” of “How can I help you today?”

Deze instellingen bepalen de standaard opening van de chat. Wanneer een shopper de chat opent via een link “Question About This Product?”, toont Shoply in plaats daarvan de productnaam, een korte producthighlight en automatisch gegenereerde vragen over dat item. Je hoeft niet voor elk product startvragen te schrijven. Lees hoe AI-aangedreven productvragen werken, of volg de stappen om een knop voor productvragen toe te voegen.

Bekijk het voorbeeld voor elk type vooraf gedefinieerde berichten: