Dersom du har en chatbot på nettsiden, kan den komme i konflikt med Skyra-undersøkelser, spesielt på mobilskjermer. Dette kan føre til at chatboten og undersøkelsen overlapper hverandre, noe som kan påvirke brukeropplevelsen.

Dette er mulige løsninger

Desktop

For desktop anbefales det å endre posisjonen til undersøkelsen slik at den ikke overlapper med chatboten.

Naviger til Survey > Settings > Position i Skyra sitt kontrollpanel.
Velg et hjørne for undersøkelsen som ikke er i konflikt med chatbotens plassering.

Mobil

På mobilskjermer er plassen begrenset, og både chatboten og undersøkelsen kan ende opp i samme område. Dette kan føre til at de overlapper.

For å løse dette kan du bruke to CSS-teknikker:

Z-index – Bestemmer hvilken rekkefølge elementer vises i (forgrunn eller bakgrunn). Ved å justere z-index kan du kontrollere om chatboten eller undersøkelsen skal ligge øverst.
Wrapper-posisjonering – Ved hjelp av ::part(wrapper)-selektoren kan du flytte undersøkelsen til et annet område på skjermen, slik at den ikke overlapper chatboten.

Minimert tekst: Teksten på minimert versjon av undersøkelsen justeres, slik at den blir kortere. Dette gjøres under Survey > Edit > Button texts. For eksempel kan du endre fra "Fortsett undersøkelsen" til "Tilbakemelding" eller "Fortsett".

I de neste avsnittene forklarer vi hvordan du justerer z-index og posisjonering med wrapper i CSS.

Les mer om CSS styling av Skyra undersøkelser

Hva er Z-index og hvordan fungerer det?

z-index er en CSS-egenskap som styrer hvordan elementer vises i forhold til hverandre på Z-aksen (dvs. dybden på siden). Enkelt forklart: elementer med høyere z-index vil vises "over" elementer med lavere z-index.

Som standard er Skyra-widgetens z-index satt til en veldig høy verdi (maxint), slik at den aldri havner bak annet innhold. Dersom du ønsker at chatboten skal vises foran undersøkelsen, kan du justere undersøkelsens z-index til en verdi som er lavere enn chatbotens.

Hvordan justere z-index?

Åpne nettsidens CSS-fil eller administrasjonspanel der du kan legge til tilpasset styling.
Finn eller legg til en regel som spesifikt retter seg mot Skyra-undersøkelsen. Dette kan gjøres med riktig CSS-selektor.
Angi en lavere z-index for Skyra-undersøkelsen, for eksempel:
Lagre endringene og test visningen på nettsiden for å sikre at chatboten nå ligger over undersøkelsen.

Eksempel

Hvis chatbotens z-index er satt til 1500, kan du justere Skyra-undersøkelsen til å bruke en z-index på 1000. Dette sørger for at undersøkelsen fortsatt er synlig, men ligger bak chatboten.

Tips: Sjekk dokumentasjonen til chatbot-leverandøren din for å finne ut hvilken z-index chatboten bruker, slik at du kan sette en passende verdi for undersøkelsen.

Hva er wrapper-posisjonering og hvordan fungerer det?

I tilfeller der chatboten og undersøkelsen overlapper, kan du bruke ::part(wrapper)-selektoren til å justere plasseringen av undersøkelsen manuelt. Dette gir deg full kontroll over hvor undersøkelsen vises på skjermen, slik at den ikke kommer i veien for chatboten.

Hvordan fungerer dette?

Skyra-undersøkelsen er bygget som et custom element, og wrapper er en del av dette elementet som styrer hvor undersøkelsen plasseres. Med CSS kan du spesifisere nøyaktig hvor den skal vises ved å bruke skyra-survey::part(wrapper).

Eksempel: Flytte undersøkelsen høyere opp på skjermen

Dersom chatboten er plassert nederst til høyre, kan du justere undersøkelsen slik at den flyttes opp og ikke overlapper:

Eksempel: Justere plasseringen kun for mobil

På mobil kan det være nødvendig å plassere undersøkelsen mer sentralt eller på en annen del av skjermen for å unngå overlapping med chatboten. Du kan bruke en medieforespørsel for å justere plasseringen kun på små skjermer: