Hur du anpassar din chatbots utseende

Shoply AI Chat och AI Search erbjuder fler än 40 alternativ för att anpassa appens utseende.

Det här avsnittet guidar dig genom de olika anpassningsalternativ som finns tillgängliga för din AI-chatbot. Du kan anpassa dess utseende, chattfönstrets design och meddelandeupplevelsen så att de matchar ditt varumärke.

Redo att komma igång? Öppna Customize AI Chat i din Shoply AI Admin Console, oavsett om du använder Shopify eller en annan webbplatsplattform. Om chatboten ännu inte syns, följ installations- och synlighetschecklistan.

Förhandsgranska ditt chattfönster

Prova samma tema och illustrationer i skrivbordsbredd som används i adminpanelen. Välj ett ljust eller mörkt utseende och jämför hur mycket utrymme chattfönstret tar upp.

Om du vill ändra hur AI:n pratar snarare än hur den ser ut, se hur du anpassar din AI:s personlighet.

Val av chattikon

Select an icon

Du kan välja en chattikon från våra 17 fördefinierade ikoner, eller ladda upp en bild som din egen chattikon

Färg och storlek på chattikonen

Primary Color

Detta är huvudfärgen i temat, och den används också som markerad textfärg i chattfönstret.

Om du använder ljust läge på din webbplats, välj en färg som inte är vit som temafärg — detta för att säkerställa att den markerade texten fortfarande är läsbar mot den ljusa bakgrunden. Om du använder mörkt läge på din webbplats, välj en färg som inte är svart som temafärg.

Complementary Color

Detta är en kompletterande färg som fungerar tillsammans med din primärfärg för att skapa övertoningar (mjuk övergång mellan två färger) för chattikonen och sidhuvudet i chattfönstret, vilket gör chattikonen mer visuellt tilltalande och bättre anpassad till ditt varumärke.

Icon’s Line Color

Detta är konturfärgen för chattikonen.

Whether to remove the background color of the chat icon.

Detta är ofta användbart om du laddar upp en bild som chattikon och vill ta bort chattikonens bakgrundsfärg (primärfärgen).

Whether to remove the shadow of the chat icon.

Det här alternativet låter dig ta bort skuggeffekten från chattikonen för en plattare, mer minimalistisk design. Det är särskilt användbart om din butik har en ren, modern estetik, eller om du har laddat upp en anpassad ikon som redan innehåller egna skugg- eller djup-effekter.

Floating Icon Size for desktop and mobile.

På mobil kan du vilja ställa in en mindre storlek för chattikonen för att undvika att den blockerar kundens vy av mobilskärmen.

Placering av chattikonen

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

Använd ett högre värde om du vill att ikonen ska ligga framför andra UI-element.

Auto-hide chat icon on mobile

Dölj chattikonen efter ett angivet antal sekunder på mobila enheter.

Detta alternativ är endast tillgängligt för mobila enheter. Det hjälper till att förhindra att chattikonen blockerar kundens vy av mobilskärmen.

Anpassning av chattfönstret

När du klickar på chattikonen för Shoply AI öppnas chattfönstret. Kunder kan interagera med Shoply AI genom det chattfönstret.

Det här avsnittet guidar dig genom de olika alternativ som finns tillgängliga för att anpassa chattfönstret.

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

Om du väljer mörkt läge kommer chattfönstrets bakgrund att vara svart och textfärgen vit. Vi rekommenderar att använda alternativet mörkt läge om din butiks tema också är i mörkt läge.

Width of the chat window on desktop

Detta alternativ gäller endast för dator. På mobil upptar chattfönstret alltid hela skärmen.

Select the branding image and background image

Du kan välja att ladda upp din egen varumärkesbild och bakgrundsbild för chattfönstret, eller helt enkelt låta Shoply AI generera dessa bilder åt dig.

Om du väljer att använda den AI-genererade bilden kommer Shoply AI att generera varumärkesbilderna och bakgrundsbilderna baserat på beskrivningen av din butik.

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

Bakgrundsbilder i chattfönstret kan göra texten ovanpå svårläst. Därför lägger vi som standard till ett halvtransparent lager ovanpå bakgrundsbilden.

Whether to remove Shoply AI’s Logo in Input Bar

Det här alternativet låter dig ta bort Shoply AI-logotypen från chattens inmatningsfält för en renare och mer varumärkesanpassad upplevelse. Det är särskilt användbart om du vill behålla en konsekvent varumärkesidentitet i hela din butik utan tredjepartslogotyper, eller om du föredrar en mer minimalistisk design på chattgränssnittet.

Detta alternativ är endast tillgängligt för betalplaner.

Fördefinierade meddelanden för AI Chat

Du kan också ställa in eller redigera standardmeddelanden som vägleder kunder när de först interagerar med din chatbot. Dessutom kan du konfigurera översättningsalternativen för dessa meddelanden (se denna FAQ-sida för mer information).

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

Om du lämnar välkomstmeddelandet tomt kommer vi inte att visa välkomstmeddelandet ovanför chattikonen.

Pre-defined messages in chat window

Du kan ställa in upp till 3 typer av fördefinierade meddelanden i chattfönstret:

1. Första meddelandet i chattfönstret - Detta är det inledande hälsningsmeddelandet som automatiskt visas när kunder öppnar chattfönstret för första gången. Använd detta för att välkomna kunder och sätta tonen för konversationen.

2. Upp till 4 startfrågor - Dessa är klickbara frågeförslag som visas i början av chatten. De hjälper till att vägleda kunder genom att erbjuda vanliga frågor som de kan klicka på för att starta en konversation, vilket gör det enklare för kunder att komma igång.

3. Platshållarmeddelande för inmatning - Detta är hinttexten som visas i chattens inmatningsfält innan kunder börjar skriva. Den ger vägledning om vad kunder kan fråga, till exempel “Fråga mig vad som helst 🤗” eller “Hur kan jag hjälpa dig idag?”

Dessa inställningar styr standardöppningen av chatten. När en besökare öppnar chatten via en länk som “Question About This Product?” visar Shoply i stället produktnamnet, en kort produkthöjdpunkt och automatiskt genererade frågor om den artikeln. Du behöver inte skriva startfrågor för varje produkt. Läs mer om hur AI-drivna produktfrågor fungerar, eller följ stegen för att lägga till en knapp för produktfrågor.

Se exemplen för varje typ av fördefinierade meddelanden: