# Hvordan kan vi få undersøkelsen til å legge seg bak chatbot?

Canonical: https://www.skyra.no/no/help/hvordan-kan-vi-fa-undersokelsen-til-a-legge-seg-bak-chatbot

Language: no

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.

![Illustrasjon: Hvordan kan vi få undersøkelsen til å legge seg bak chatbot?](<https://cdn.sanity.io/images/tjuxddem/production/db023b0be18b18fd43c4ba12c99418efdf4ae515-1512x1024.png?fit=max&auto=format>)

<a id="h_4cc1dd5765"></a>

## Dette er mulige løsninger

<a id="h_b84ee4a85e"></a>

### **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.

<a id="h_4590649f07"></a>

### **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:

1. **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.
2. **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".

![Illustrasjon: Hvordan kan vi få undersøkelsen til å legge seg bak chatbot?](<https://cdn.sanity.io/images/tjuxddem/production/5a2d4f5af13a21a8f6126fd489ab94d232ed06b3-1466x734.png?fit=max&auto=format>)

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

> [!TIP]
> [Les mer om CSS styling av Skyra undersøkelser](<https://www.skyra.no/no/help/css-styling-av-undersokelse>)

<a id="h_f1f93f1b12"></a>

## **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.

<a id="h_1c975a7d5c"></a>

### **Hvordan justere z-index?**

1. Åpne nettsidens CSS-fil eller administrasjonspanel der du kan legge til tilpasset styling.  
​
2. Finn eller legg til en regel som spesifikt retter seg mot Skyra-undersøkelsen. Dette kan gjøres med riktig CSS-selektor.  
​
3. Angi en lavere ` z-index ` for Skyra-undersøkelsen, for eksempel:  
​

```css
.skyra-survey {
  z-index: 1000; /* Sett denne til en verdi som er lavere enn chatbotens z-index */
}
```

1. Lagre endringene og test visningen på nettsiden for å sikre at chatboten nå ligger over undersøkelsen.

<a id="h_162ed41f58"></a>

#### **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.

> [!TIP]
> **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.

<a id="h_ec81a75708"></a>

## 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.

<a id="h_96a96589ae"></a>

### **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) `.

<a id="h_54a9762707"></a>

#### **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:

```css
skyra-survey::part(wrapper) {
  bottom: 6rem; /* Flytter undersøkelsen høyere opp */
  right: 1rem; /* Holder den inne fra høyrekanten */
}
```

<a id="h_d7940d5e91"></a>

#### **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:

```css
@media (max-width: 768px) {
  skyra-survey::part(wrapper) {
    bottom: 10rem; /* Flytter undersøkelsen høyere opp */
    left: 50%; /* Sentrerer den horisontalt */
    transform: translateX(-50%); /* Justerer slik at den er midtstilt */
  }
}
```

> [!WARNING]
> **Support**  
> Har du spørsmål eller trenger hjelp? Ta kontakt med oss via [**support@skyra.no**](<mailto:support@skyra.no>)

## I disse samlingene

- [Installasjon](<https://www.skyra.no/no/help/installasjon.md>) — Installer scriptet