Slik tilpasser du chatbotens utseende

How to Customize the Shoply AI Chat

Shoply AI Chat og AI Search tilbyr mer enn 40 alternativer for å tilpasse appens utseende.

Denne delen viser deg de ulike tilpasningsalternativene som er tilgjengelige for AI-chatboten din. Du kan tilpasse utseendet, utformingen av chatvinduet og meldingsopplevelsen slik at det passer merkevaren din.

Klar til å komme i gang? Åpne Customize AI Chat i Shoply AI Admin Console, enten du bruker Shopify eller en annen nettsideplattform. Hvis chatboten ikke er synlig ennå, følger du installasjons- og synlighetssjekklisten.

Forhåndsvis chatvinduet ditt

Prøv det samme temaet og illustrasjonene i desktop-bredde som brukes i adminpanelet. Velg et lyst eller mørkt utseende og sammenlign hvor mye plass chatvinduet opptar.

Chat window preview
Shopping assistant
Can you help me find a winter jacket?
Of course! Are you looking for a lightweight shell or extra warmth for colder days?
Type your message…
Light theme: light surfaces with dark text.
Desktop preview · 480 px chat window
Shopping assistantType your message…
Scaled view of a 1200 px desktop. Adjust the slider to compare widths.

These examples do not change your store. Set your preferences in Customize AI Chat and save them there.

Hvis du vil endre hvordan AI-en snakker i stedet for hvordan den ser ut, se hvordan du tilpasser AI-ens personlighet.

Customize AI Chat includes icon selection, uploads, background, corner roundness, and shadow controls.
Customize AI Chat includes icon selection, uploads, background, corner roundness, and shadow controls. Click the screenshot to view it at full size.

Valg av chatikon

Select an icon

Du kan velge et chatikon blant våre 17 forhåndsdefinerte ikoner, eller laste opp et bilde som ditt eget chatikon.

Choose different icons for the AI Chat button

Farge og størrelse på chatikonet

Customize the AI Chat button

Primary Color

Dette er hovedtemafargen, og den brukes også som uthevet tekstfarge i chatvinduet.

Hvis du bruker lys modus på nettstedet ditt, bør du velge en annen temafarge enn hvit — dette er for å sikre at uthevet tekst fortsatt er lesbar mot den lyse bakgrunnen. Hvis du bruker mørk modus på nettstedet ditt, bør du velge en annen temafarge enn svart.

Complementary Color

Dette er en komplementærfarge som fungerer sammen med primærfargen din for å skape graderinger (en jevn overgang mellom to farger) for chatikonet og toppfeltet i chatvinduet, noe som gjør chatikonet mer visuelt tiltalende og bedre tilpasset merkevaren din.

Icon’s Line Color

Dette er omrissfargen til chatikonet.

Whether to remove the background color of the chat icon.

Dette er ofte nyttig hvis du laster opp et bilde som chatikon og ønsker å fjerne bakgrunnsfargen (primærfargen) fra chatikonet.

Whether to remove the shadow of the chat icon.

Dette alternativet lar deg fjerne skyggeeffekten fra chatikonet for et flatere og mer minimalistisk design. Dette er særlig nyttig hvis butikken din har en ren, moderne estetikk, eller hvis du har lastet opp et egendefinert ikon som allerede har egne skygge- eller dybdeeffekter.

Floating Icon Size for desktop and mobile.

På mobil kan det være lurt å angi en mindre størrelse for chatikonet for å unngå å blokkere kundens visning av mobilskjermen.

Plassering av chatikonet

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

Bruk en høyere verdi hvis du vil at ikonet skal ligge foran andre UI-elementer.

Auto-hide chat icon on mobile

Skjul chatikonet etter et angitt antall sekunder på mobile enheter.

Dette alternativet er kun tilgjengelig for mobile enheter. Det bidrar til å forhindre at chatikonet blokkerer kundens visning av mobilskjermen.

Tilpasning av chatvinduet

Når du klikker på chatikonet til Shoply AI, vises chatvinduet. Kunder kan samhandle med Shoply AI gjennom dette chatvinduet.

Denne delen går gjennom de ulike alternativene som er tilgjengelige for å tilpasse chatvinduet.

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

Hvis du velger mørk modus, vil bakgrunnen i chatvinduet være svart og skriftfargen hvit. Vi anbefaler å bruke mørk modus hvis butikkens tema også er i mørk modus.

Dark or Bright Mode for AI Chat Window

Width of the chat window on desktop

Dette alternativet gjelder kun for desktop. På mobil opptar chatvinduet alltid hele skjermen.

Select the branding image and background image

Du kan velge å laste opp ditt eget merkevarebilde og bakgrunnsbilde for chatvinduet, eller ganske enkelt la Shoply AI generere disse bildene for deg.

Hvis du velger å bruke AI-genererte bilder, vil Shoply AI generere merkevarebilder og bakgrunnsbilder basert på beskrivelsen av butikken din.

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

Bakgrunnsbilder i chatvinduet kan gjøre teksten over dem uleselig. Derfor legger vi som standard et halvgjennomsiktig lag over bakgrunnsbildet.

Whether to remove Shoply AI’s Logo in Input Bar

Dette alternativet lar deg fjerne Shoply AI-logoen fra chatens inndatalinje for en renere og mer merkevaretilpasset opplevelse. Dette er særlig nyttig hvis du vil opprettholde en konsekvent merkeidentitet gjennom hele butikken uten tredjepartslogoer, eller hvis du foretrekker et mer minimalistisk chatgrensesnitt.

Dette alternativet er kun tilgjengelig på betalte abonnementer.

Forhåndsdefinerte meldinger for AI Chat

Du kan også angi eller redigere standardmeldinger som veileder kunder når de først samhandler med chatboten din. I tillegg kan du konfigurere oversettelsesalternativene for disse meldingene (se denne FAQ-siden for mer informasjon).

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

Hvis du lar velkomstmeldingen stå tom, vil vi ikke vise velkomstmeldingen over chatikonet.

Popup Welcome Message

Pre-defined messages in chat window

Du kan sette opp opptil 3 typer forhåndsdefinerte meldinger i chatvinduet:

  1. Første melding i chatvinduet - Dette er den første hilsenen som automatisk vises når kunder åpner chatvinduet for første gang. Bruk denne til å ønske kunder velkommen og sette tonen for samtalen.

  2. Opptil 4 startspørsmål - Dette er klikkbare spørsmålsforslag som vises i starten av chatten. De hjelper med å veilede kunder ved å vise vanlige spørsmål de kan klikke på for å starte en samtale, noe som gjør det enklere for kunder å komme i gang.

  3. Plassholdermelding i inndatafeltet - Dette er hjelpeteksten som vises i chatens inndatafelt før kundene begynner å skrive. Den gir veiledning om hva kunder kan spørre om, for eksempel “Spør meg om hva som helst 🤗” eller “Hvordan kan jeg hjelpe deg i dag?”

Disse innstillingene styrer den vanlige åpningen av chatten. Når en kunde åpner chatten via en “Question About This Product?”-lenke, viser Shoply i stedet produktnavnet, en kort produktfremheving og automatisk genererte spørsmål om den varen. Du trenger ikke å skrive startspørsmål for hvert produkt. Lær hvordan AI-drevne produktspørsmål fungerer, eller følg trinnene for å legge til en knapp for produktspørsmål.

Se eksempelet for hver type forhåndsdefinert melding:

Pre-defined Messages in Chat Window