Sådan tilpasser du din chatbots udseende

Shoply AI Chat og AI Search giver mere end 40 muligheder for at tilpasse appens udseende.

Dette afsnit gennemgår de forskellige tilpasningsmuligheder, der er tilgængelige for din AI-chatbot. Du kan personliggøre dens udseende, designet af chatvinduet og beskedoplevelsen, så det matcher dit brand.

Klar til at komme i gang? Åbn Customize AI Chat i din Shoply AI Admin Console, uanset om du bruger Shopify eller en anden hjemmesideplatform. Hvis chatbotten endnu ikke er synlig, skal du følge installations- og synlighedstjeklisten.

Forhåndsvis dit chatvindue

Prøv det samme tema og de samme illustrationer i desktop-bredde, som bruges i adminpanelet. Vælg et lyst eller mørkt udseende, og sammenlign, hvor meget plads chatvinduet optager.

Hvis du vil ændre, hvordan AI’en taler, frem for hvordan den ser ud, kan du se hvordan du tilpasser din AI’s personlighed.

Valg af chatikon

Select an icon

Du kan vælge et chatikon blandt vores 17 foruddefinerede forskellige ikoner eller uploade et billede som dit eget chatikon

Farve og størrelse på chatikonet

Primary Color

Dette er den primære temafarve, og den bruges også som fremhævet tekstfarve i chatvinduet.

Hvis du bruger lyst tema på din hjemmeside, skal du vælge en farve, der ikke er hvid, som din temafarve — dette sikrer, at den fremhævede tekst stadig er læsbar på den lyse baggrund. Hvis du bruger mørkt tema på din hjemmeside, skal du vælge en farve, der ikke er sort, som din temafarve.

Complementary Color

Dette er en komplementær farve, der fungerer sammen med din primære farve for at skabe gradienter (glidende overgang mellem to farver) til chatikonet og chatvinduets header, hvilket gør chatikonet mere visuelt tiltalende og i tråd med dit brand.

Icon’s Line Color

Dette er konturfarven på chatikonet.

Whether to remove the background color of the chat icon.

Dette er ofte nyttigt, hvis du uploader et billede som chatikon og ønsker at fjerne baggrundsfarven (den primære farve) fra chatikonet.

Whether to remove the shadow of the chat icon.

Denne mulighed giver dig mulighed for at fjerne skyggeeffekten under chatikonet for et fladere, mere minimalistisk design. Dette er især nyttigt, hvis din butik har en ren, moderne æstetik, eller hvis du har uploadet et brugerdefineret ikon, som allerede indeholder sine egne skygge- eller dybdeeffekter.

Floating Icon Size for desktop and mobile.

På mobil kan det være en god idé at angive en mindre størrelse for chatikonet, så det ikke blokerer kundens visning af mobilskærmen.

Placering af chatikonet

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

Brug en højere værdi, hvis du vil have, at ikonet forbliver foran andre UI-elementer.

Auto-hide chat icon on mobile

Skjul chatikonet efter et angivet antal sekunder på mobile enheder.

Denne mulighed er kun tilgængelig på mobile enheder. Den hjælper med at forhindre, at chatikonet blokerer kundens visning af mobilskærmen.

Tilpasning af chatvinduet

Når du klikker på chatikonet i Shoply AI, popper chatvinduet op. Kunder kan interagere med Shoply AI via dette chatvindue.

Dette afsnit gennemgår de forskellige muligheder, der er tilgængelige for at tilpasse chatvinduet.

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

Hvis du vælger mørk tilstand, vil baggrunden i chatvinduet være sort, og skriftfarven vil være hvid. Vi anbefaler at vælge mørk tilstand, hvis din butiks tema også er i mørk tilstand.

Width of the chat window on desktop

Denne mulighed gælder kun for desktop. På mobil optager chatvinduet altid hele skærmen.

Select the branding image and background image

Du kan vælge at uploade dit eget brandingbillede og baggrundsbillede til chatvinduet, eller blot lade Shoply AI generere disse billeder for dig.

Hvis du vælger at bruge det AI-genererede billede, vil Shoply AI generere brandingbillederne og baggrundsbillederne baseret på beskrivelsen af din butik.

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

Baggrundsbilleder i chatvinduet kan gøre teksten ovenpå svær at læse. Derfor tilføjer vi som standard et halvgennemsigtigt lag oven på baggrundsbilledet.

Whether to remove Shoply AI’s Logo in Input Bar

Denne mulighed giver dig mulighed for at fjerne Shoply AI-logoet fra chatinputlinjen for en renere og mere brandet oplevelse. Dette er især nyttigt, hvis du vil bevare en ensartet brandidentitet i hele din butik uden tredjepartslogoer, eller hvis du foretrækker et mere minimalistisk chatinterfacedesign.

Denne mulighed er kun tilgængelig på betalte abonnementer.

Foruddefinerede beskeder til AI Chat

Du kan også angive eller redigere standardbeskeder, der guider kunder, når de interagerer med din chatbot første gang. Derudover kan du konfigurere oversættelsesmulighederne for disse beskeder (se denne FAQ-side for flere detaljer).

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

Hvis du lader velkomstbeskeden være tom, viser vi ikke velkomstbeskeden over chatikonet.

Pre-defined messages in chat window

Du kan opsætte op til 3 typer foruddefinerede beskeder i chatvinduet:

1. Første besked i chatvinduet - Dette er den indledende hilsen, som automatisk vises, når kunder åbner chatvinduet første gang. Brug denne til at byde kunder velkommen og sætte tonen for samtalen.

2. Op til 4 startspørgsmål - Dette er klikbare spørgsmålsforslag, der vises i begyndelsen af chatten. De hjælper med at guide kunder ved at tilbyde almindelige spørgsmål, de kan klikke på for at starte en samtale, hvilket gør det nemmere for kunder at komme i gang.

3. Pladsholderbesked i inputfeltet - Dette er den hjælpetekst, der vises i chatinputfeltet, før kunder begynder at skrive. Den giver vejledning om, hvad kunder kan spørge om, såsom “Ask me anything 🤗” eller “How can I help you today?”

Disse indstillinger styrer standardåbningen af chatten. Når en shopper åbner chatten via et “Question About This Product?”-link, viser Shoply i stedet produktnavnet, en kort produktfremhævning og automatisk genererede spørgsmål om den pågældende vare. Du behøver ikke skrive startspørgsmål for hvert produkt. Lær, hvordan AI-drevne produktspørgsmål fungerer, eller følg trinene for at tilføje en produktspørgsmåls-knap.

Se eksemplet for hver type foruddefinerede beskeder: