# Innbygging og popups

Bygg inn skjemaet ditt på en nettside eller vis det som en popup-overlegg.

## Innbygging og popups

Sett skjemaet ditt inn i en hvilken som helst nettside som en innbygget visning eller en popup-overlegg. Du konfigurerer det i Del-panelet og limer inn ett kodesnippet på nettstedet ditt.

<p>
  Begge snippetene bygges fra delingslenken du har valgt, så de arver den lenkens utløpsdato, svargrense, egendefinerte domene og analyse.
  Opprett lenken først — se <a href="/no/sharing-publishing/sharing-embedding">delingslenker</a>. Standardverdier for spørringsparametere
  satt på lenken er unntaket: de legges ikke til i innbyggings- eller popup-snippeter.
</p>

<h2 id="embed">Innbygget visning</h2>

<p>
  En innbygget visning plasserer skjemaet direkte inne på en side ved hjelp av en iframe. Åpne <strong>Del</strong>-panelet, klikk på{' '}
  <strong>Innbygging</strong>-kortet, og kopier det genererte kodesnippetet inn i nettsidens HTML.
</p>

<h3 id="embed-layout">Oppsett</h3>

<h3 id="embed-display">Visning</h3>

<p>
  Klikk <strong>Vis kode</strong> for å se den genererte HTML-en. Bruk <strong>Kopier innbyggingskode</strong> for å kopiere den, og lim den
  deretter inn på nettstedet ditt. <strong>Tilbakestill til standard</strong> gjenoppretter alle innstillinger.
</p>

<h3 id="embed-snippet">Hva snippetet inneholder</h3>

<p>
  Med automatisk høydejustering av er snippetet én enkelt iframe som peker mot delingslenken din med <code>?embed=1</code> lagt til.
  Visningsalternativene legger til sine egne parametere: <code>hideCover=1</code>, <code>hideLogo=1</code>, og <code>theme=dark</code> eller{' '}
  <code>theme=light</code>.
</p>

```html
<iframe src="https://form.formstep.io/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>
```

<p>
  Med automatisk høydejustering på pakkes iframen inn i en <code>div</code> og etterfølges av et skript. Det innebygde skjemaet sender en{' '}
  <code>formbase:resize</code>-melding ved hver høydeendring; skriptet sjekker meldingens opprinnelse og avsenderrammen, og setter deretter
  iframe-høyden. Ingenting annet på siden din berøres, og ingen eksternt skript lastes inn.
</p>

<h2 id="popup">Popup</h2>

<p>
  En popup viser skjemaet som et overlegg på toppen av siden. Åpne <strong>Del</strong>-panelet, klikk på <strong>Popup</strong>-kortet,
  sett opp alternativene dine, og lim det genererte kodesnippetet inn på nettstedet ditt.
</p>

<h3 id="popup-trigger">Utløser</h3>

<p>Velg hvordan popupen åpnes:</p>

<h3 id="popup-layout">Oppsett</h3>

<h3 id="popup-display">Visning</h3>

<h3 id="popup-styling">Popup-styling</h3>

<h3 id="popup-behavior">Atferd</h3>

<p>
  Klikk <strong>Vis kode</strong> for å se det genererte snippetet. Bruk <strong>Kopier popup-kode</strong> for å kopiere det, og lim det
  deretter inn på nettstedet ditt. <strong>Tilbakestill til standard</strong> gjenoppretter alle innstillinger.
</p>

<h3 id="popup-snippet">Hva snippetet inneholder</h3>

<p>
  Popup-snippetet er én selvstendig <code>{'<script>'}</code>-blokk. Den bygger overlegget, lukkeknappen og iframen i ren JavaScript når
  popupen åpnes — ingenting annet legges til på siden din før det, ingen stilark settes inn, og ingen eksternt skript lastes inn.
  Kommentaren under skriptet forteller deg funksjonsnavnet du skal kalle:
</p>

```html
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->
```

<p>
  En bindestrek i en egendefinert slug blir en understrek i funksjonsnavnet, fordi en bindestrek ikke er gyldig i et
  JavaScript-identifikatornavn. Kopier navnet fra kommentaren i stedet for å utlede det selv.
</p>

<h2 id="color-scheme">Fargevalg</h2>

<p>Innbygginger og popups deler de samme tre alternativene, og begge overstyrer skjemaets eget tema inne i rammen:</p>

<ul>
  <li>
    <strong>La brukeren velge</strong> — standard. Skjemaet følger den besøkendes operativsystem- eller nettleserpreferanse for mørk/lys.
  </li>
  <li>
    <strong>Mørk modus</strong> — tvinger mørk modus uavhengig av den besøkendes preferanse.
  </li>
  <li>
    <strong>Lys modus</strong> — tvinger lys modus uavhengig av den besøkendes preferanse.
  </li>
</ul>

> 💡 **Tilpass nettstedets tema**
> <p>
>     Hvis nettstedet ditt alltid er mørkt, sett innbyggingen eller popupen til Mørk modus slik at skjemaet smelter inn. Hvis nettstedet
>     respekterer den besøkendes preferanse, velg La brukeren velge. For å style selve skjemaet, se{' '}
>     <a href="/no/branding-domains/appearance-theming">utseende og temaer</a>.
>   </p>

<h2 id="next-steps">Neste steg</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Delingslenker](/no/sharing-publishing/sharing-embedding) — Opprett og administrer delingslenke-URLer
  - [QR-koder](/no/sharing-publishing/sharing-embedding#qr-codes) — Generer og plasser skannbare koder
  - [Egendefinerte domener](/no/branding-domains/custom-domains) — Server skjemaer fra ditt eget domene
  - [Utseende og temaer](/no/branding-domains/appearance-theming) — Tema, forside, logo, mørk modus
</div>