Dokumentasjon

Alt du trenger for å integrere Preik på din nettside.

Kom i gang

Å legge til Preik på nettsiden din tar bare noen minutter. Du trenger kun å legge til en enkel script-tag i HTML-koden din.

Logg inn på dashbordet

Gå til dashbordet og logg inn med kontoen din.

Kopier embed-koden

Gå til "Integrasjon"-fanen for å finne din unike embed-kode. Her kan du også tilpasse utseendet visuelt.

Lim inn på nettsiden

Lim inn koden rett før </body> taggen på alle sider der du vil vise chatboten.

Embed-kode

Grunnleggende embed-kode med kun påkrevde attributter:

<script
  src="https://preik.no/widget.js"
  data-store-id="din-butikk-id"
  async
></script>

Fullstendig eksempel med alle tilpasninger:

<script
  src="https://preik.no/widget.js"
  data-store-id="din-butikk-id"
  data-accent-color="#F97316"
  data-text-color="#111827"
  data-bg-color="#111827"
  data-surface-color="#1F2937"
  data-theme="dark"
  data-position="bottom-right"
  data-greeting="Hei! Hvordan kan jeg hjelpe deg?"
  data-placeholder="Skriv en melding..."
  data-brand-name="Min Bedrift"
  data-font-body="Inter, sans-serif"
  data-font-brand="Georgia, serif"
  data-brand-style="normal"
  async
></script>

Widget-tilpasning

Attributt	Beskrivelse	Standard
data-store-id	Din unike butikk-ID (påkrevd)	—
data-accent-color	Hovedfarge for knapper og bruker-meldinger	#F97316
data-text-color	Tekstfarge (overstyrer tema)	Basert på tema
data-bg-color	Bakgrunnsfarge for widget	Basert på tema
data-surface-color	Farge for header, input-område og meldingsbobler	Basert på tema
data-theme	Fargetema: auto, light, eller dark	auto
data-position	Plassering: bottom-right eller bottom-left	bottom-right
data-greeting	Velkomstmelding som vises når chatten er tom	Hei! Hvordan kan jeg hjelpe deg i dag?
data-placeholder	Plassholder-tekst i input-feltet	Skriv en melding...
data-brand-name	Navn som vises i header	Assistent
data-font-body	Font for brødtekst	System font stack
data-font-brand	Font for merkenavn i header	System font stack
data-brand-style	Stil for merkenavn: normal eller italic	normal

Farger og tema

Aksentfarge

Aksentfargen brukes for send-knappen, brukerens chat-bobler, og fokus-effekter. Bruk en farge som matcher merkevaren din.

data-accent-color="#3B82F6"

Tema

Widgeten støtter lys og mørk modus. Med auto følger den brukerens systeminnstillinger.

auto

Følger system-preferanse

light

Alltid lys bakgrunn

dark

Alltid mørk bakgrunn

Tekstfarge

Normalt settes tekstfargen automatisk basert på tema. Bruk data-text-color for å overstyre dette.

Bakgrunnsfarger (for mørk modus)

For mørk modus kan du tilpasse bakgrunns- og overflatefargene for å matche merkevaren din bedre.

data-bg-color

Hovedbakgrunn for widgeten

data-surface-color

Header, input og meldingsbobler

data-bg-color="#0A0F1A"
data-surface-color="#151B28"

Fonter

Widgeten bruker systemfonter som standard for optimal ytelse. Du kan overstyre dette med egne fonter, men husk at du må laste inn fontene selv.

Viktig: Widgeten laster ikke inn fonter automatisk. Du må inkludere font-filene eller lenke til Google Fonts på nettsiden din.

Eksempel med Google Fonts

<!-- Last inn fonter i <head> -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital@1&display=swap" rel="stylesheet">

<!-- Bruk fontene i widgeten -->
<script
  src="https://preik.no/widget.js"
  data-store-id="din-butikk-id"
  data-font-body="Inter, sans-serif"
  data-font-brand="Playfair Display, serif"
  data-brand-style="italic"
  async
></script>

Posisjon og layout

Widgeten vises som en flytende knapp i hjørnet av skjermen. På mobil åpnes chatten i fullskjerm for bedre brukeropplevelse.

bottom-right

Standard plassering

bottom-left

Alternativ plassering

Dimensjoner

• Desktop: 400px bredde, 500px høyde
• Mobil: Fullskjerm med 16px margin
• Trigger-knapp: 56px diameter

Tekst og meldinger

Velkomstmelding

Velkomstmeldingen vises når brukeren åpner chatten for første gang. Bruk den til å forklare hva chatboten kan hjelpe med.

data-greeting="Hei! Jeg kan hjelpe deg med spørsmål om våre produkter, priser og leveringstider."

Plassholder-tekst

Teksten som vises i input-feltet før brukeren skriver.

data-placeholder="Still et spørsmål..."

Merkenavn

Navnet som vises i header sammen med "Online"-indikatoren.

data-brand-name="Kundeservice"

System-prompt

System-prompten definerer chatbotens personlighet, oppførsel og begrensninger. Den redigeres i dashbordet under "Prompt"-fanen.

Beste praksis

•Definer rollen: Start med å fortelle AI-en hvem den er, f.eks. "Du er en kundeserviceassistent for [Bedriftsnavn]."
•Sett tone: Beskriv hvordan den skal kommunisere - vennlig, profesjonell, uformell, etc.
•Definer begrensninger: Fortell hva den IKKE skal svare på eller diskutere.
•Gi eksempler: Inkluder eksempel-dialoger for vanlige spørsmål.
•Håndter ukjente spørsmål: Instruer hvordan den skal svare når den ikke vet svaret.

Eksempel på system-prompt

Du er en hjelpsom kundeserviceassistent for Båtbutikken AS.

Din rolle:
- Hjelpe kunder med spørsmål om båtutstyr, produkter og priser
- Gi råd om vedlikehold og bruk av båtutstyr
- Svare på norsk med en vennlig og profesjonell tone

Retningslinjer:
- Hold svarene korte og konsise
- Hvis du ikke vet svaret, si det ærlig og henvis til kundeservice
- Ikke diskuter konkurrenter eller gi juridiske/medisinske råd
- Ved komplekse henvendelser, foreslå å kontakte oss på hei@batbutikken.no

Vanlige spørsmål:
- Åpningstider: Man-fre 09-17, lør 10-15
- Leveringstid: 1-3 virkedager
- Retur: 30 dagers åpent kjøp

Innhold og kunnskapsbase

Chatboten kan læres opp på bedriftens innhold for å gi mer presise og relevante svar. Dette konfigureres i dashbordet under "Innhold"-fanen.

Støttede innholdstyper

Nettside-crawling

Vi crawler nettsiden din automatisk

PDF-dokumenter

Last opp manualer, kataloger, etc.

Tekstfiler

FAQ, produktinfo, retningslinjer

Manuell input

Skriv inn informasjon direkte

Tips for godt innhold

• Inkluder ofte stilte spørsmål (FAQ)
• Legg til produktbeskrivelser og spesifikasjoner
• Oppdater innholdet regelmessig
• Strukturer informasjonen tydelig med overskrifter

API-referanse

For avanserte integrasjoner kan du kommunisere direkte med chat-API-et.

Endepunkt

POSThttps://preik.no/api/chat

Request body

{
  "messages": [
    { "role": "user", "content": "Hva er åpningstidene?" }
  ],
  "storeId": "din-butikk-id",
  "noStream": false
}

Parametere

messages - Array med samtalehistorikk
storeId - Din butikk-ID
noStream - Sett til true for å få hele svaret på en gang (standard: false for streaming)

Response (noStream: true)

{
  "content": "Vi har åpent mandag til fredag 09-17, og lørdag 10-15."
}

Streaming response

Med noStream: false returneres svaret som en text/plain stream der teksten kommer inkrementelt.

Plattform-guider

WordPress

Alternativ 1: Plugin

Installer "Insert Headers and Footers" eller "WPCode" plugin
Gå til plugin-innstillingene
Lim inn embed-koden i "Footer"-seksjonen
Lagre endringene

Alternativ 2: Tema-fil

Gå til Utseende → Tema-filredigerer
Åpne footer.php
Lim inn koden rett før </body>
Lagre filen

Shopify

Gå til Online Store → Themes
Klikk "Actions" → "Edit code"
Finn theme.liquid under Layout
Finn </body> taggen (vanligvis nederst)
Lim inn embed-koden rett før denne taggen
Klikk "Save"

Wix

Gå til Settings i Wix-dashbordet
Velg "Custom Code" under Advanced
Klikk "+ Add Code"
Lim inn embed-koden
Velg "Body - end" som plassering
Velg hvilke sider koden skal vises på
Klikk "Apply"

Squarespace

Gå til Settings → Advanced → Code Injection
Lim inn embed-koden i "Footer"-feltet
Klikk "Save"

Webflow

Gå til Project Settings
Velg "Custom Code"-fanen
Lim inn embed-koden i "Footer Code"-feltet
Publiser nettsiden på nytt

React / Next.js

// I _app.tsx eller layout.tsx
import Script from 'next/script'

export default function App() {
  return (
    <>
      {/* ... din app ... */}
      <Script
        src="https://preik.no/widget.js"
        data-store-id="din-butikk-id"
        strategy="lazyOnload"
      />
    </>
  )
}

HTML / Vanilla JS

Lim inn embed-koden rett før </body> i HTML-filen din:

<!DOCTYPE html>
<html>
<head>
  <title>Min nettside</title>
</head>
<body>
  <!-- Nettsidens innhold -->

  <script
    src="https://preik.no/widget.js"
    data-store-id="din-butikk-id"
    async
  ></script>
</body>
</html>

Feilsøking

Widgeten vises ikke

• Sjekk at script-taggen er plassert før </body>
• Verifiser at data-store-id er riktig
• Åpne nettleserens Developer Tools (F12) og sjekk Console for feilmeldinger
• Sjekk Network-fanen for å se om widget.js lastes inn
• Tøm nettleserens cache og prøv igjen

Chatboten svarer ikke

• Sjekk at butikk-ID-en er korrekt og aktiv
• Verifiser at du har en gyldig abonnementsplan
• Sjekk Network-fanen for API-feil (4xx/5xx responser)
• Kontakt support hvis problemet vedvarer

Styling/utseende-problemer

• Widgeten bruker Shadow DOM og bør ikke påvirkes av nettsiden din
• Hvis du bruker egne fonter, sjekk at de er lastet inn på siden
• Prøv å sette tema eksplisitt med data-theme="light"

Cache-problemer

• Legg til en versjon-parameter for å tvinge oppdatering:

src="https://preik.no/widget.js?v=2"

Mobil-spesifikke problemer

• Widgeten åpnes i fullskjerm på mobil - dette er tilsiktet oppførsel
• Hvis tastaturet dekker input-feltet, scroll ned i chatten
• Enkelte WebViews (f.eks. Instagram-nettleseren) kan ha begrensninger

Ofte stilte spørsmål

De fleste kunder er oppe og kjører innen 24-48 timer. Når du har fått tilgang, tar det bare noen minutter å legge til embed-koden på nettsiden din.

Nei, det holder å kunne lime inn en kodesnutt på nettsiden din. Vi har guider for alle populære plattformer som WordPress, Shopify, Wix og flere.

Ja! I dashbordet kan du teste chatboten i sanntid før du publiserer den på nettsiden din. Du kan også bruke demoen på forsiden vår.

Vi kjører en månedlig oppdatering basert på innholdsendringer på nettsiden din. Trenger du å legge til noe kritisk mellom oppdateringene? Ta kontakt, så ordner vi det raskt.

Ja, chatboten forstår og svarer på norsk som standard, men kan også håndtere andre språk. Kontakt oss for flerspråklig konfigurasjon.

Absolutt. Farger, fonter, tekster og posisjon kan tilpasses via data-attributter. Se dokumentasjonen for alle tilgjengelige alternativer.

Trenger du hjelp?

Sliter du med integrasjonen eller har spørsmål? Vi hjelper deg gjerne!

hei@preik.no

← Tilbake til forsiden

Dokumentasjon

Alt du trenger for å integrere Preik på din nettside.

Kom i gang

Å legge til Preik på nettsiden din tar bare noen minutter. Du trenger kun å legge til en enkel script-tag i HTML-koden din.

Logg inn på dashbordet

Gå til dashbordet og logg inn med kontoen din.

Kopier embed-koden

Gå til "Integrasjon"-fanen for å finne din unike embed-kode. Her kan du også tilpasse utseendet visuelt.

Lim inn på nettsiden

Lim inn koden rett før </body> taggen på alle sider der du vil vise chatboten.

Embed-kode

Grunnleggende embed-kode med kun påkrevde attributter:

<script
  src="https://preik.no/widget.js"
  data-store-id="din-butikk-id"
  async
></script>

Fullstendig eksempel med alle tilpasninger:

<script
  src="https://preik.no/widget.js"
  data-store-id="din-butikk-id"
  data-accent-color="#F97316"
  data-text-color="#111827"
  data-bg-color="#111827"
  data-surface-color="#1F2937"
  data-theme="dark"
  data-position="bottom-right"
  data-greeting="Hei! Hvordan kan jeg hjelpe deg?"
  data-placeholder="Skriv en melding..."
  data-brand-name="Min Bedrift"
  data-font-body="Inter, sans-serif"
  data-font-brand="Georgia, serif"
  data-brand-style="normal"
  async
></script>

Widget-tilpasning

Attributt	Beskrivelse	Standard
data-store-id	Din unike butikk-ID (påkrevd)	—
data-accent-color	Hovedfarge for knapper og bruker-meldinger	#F97316
data-text-color	Tekstfarge (overstyrer tema)	Basert på tema
data-bg-color	Bakgrunnsfarge for widget	Basert på tema
data-surface-color	Farge for header, input-område og meldingsbobler	Basert på tema
data-theme	Fargetema: auto, light, eller dark	auto
data-position	Plassering: bottom-right eller bottom-left	bottom-right
data-greeting	Velkomstmelding som vises når chatten er tom	Hei! Hvordan kan jeg hjelpe deg i dag?
data-placeholder	Plassholder-tekst i input-feltet	Skriv en melding...
data-brand-name	Navn som vises i header	Assistent
data-font-body	Font for brødtekst	System font stack
data-font-brand	Font for merkenavn i header	System font stack
data-brand-style	Stil for merkenavn: normal eller italic	normal

Farger og tema

Aksentfarge

Aksentfargen brukes for send-knappen, brukerens chat-bobler, og fokus-effekter. Bruk en farge som matcher merkevaren din.

data-accent-color="#3B82F6"

Tema

Widgeten støtter lys og mørk modus. Med auto følger den brukerens systeminnstillinger.

auto

Følger system-preferanse

light

Alltid lys bakgrunn

dark

Alltid mørk bakgrunn

Tekstfarge

Normalt settes tekstfargen automatisk basert på tema. Bruk data-text-color for å overstyre dette.

Bakgrunnsfarger (for mørk modus)

For mørk modus kan du tilpasse bakgrunns- og overflatefargene for å matche merkevaren din bedre.

data-bg-color

Hovedbakgrunn for widgeten

data-surface-color

Header, input og meldingsbobler

data-bg-color="#0A0F1A"
data-surface-color="#151B28"

Fonter

Widgeten bruker systemfonter som standard for optimal ytelse. Du kan overstyre dette med egne fonter, men husk at du må laste inn fontene selv.

Viktig: Widgeten laster ikke inn fonter automatisk. Du må inkludere font-filene eller lenke til Google Fonts på nettsiden din.

Eksempel med Google Fonts

<!-- Last inn fonter i <head> -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital@1&display=swap" rel="stylesheet">

<!-- Bruk fontene i widgeten -->
<script
  src="https://preik.no/widget.js"
  data-store-id="din-butikk-id"
  data-font-body="Inter, sans-serif"
  data-font-brand="Playfair Display, serif"
  data-brand-style="italic"
  async
></script>

Posisjon og layout

Widgeten vises som en flytende knapp i hjørnet av skjermen. På mobil åpnes chatten i fullskjerm for bedre brukeropplevelse.

bottom-right

Standard plassering

bottom-left

Alternativ plassering

Dimensjoner

• Desktop: 400px bredde, 500px høyde
• Mobil: Fullskjerm med 16px margin
• Trigger-knapp: 56px diameter

Tekst og meldinger

Velkomstmelding

Velkomstmeldingen vises når brukeren åpner chatten for første gang. Bruk den til å forklare hva chatboten kan hjelpe med.

data-greeting="Hei! Jeg kan hjelpe deg med spørsmål om våre produkter, priser og leveringstider."

Plassholder-tekst

Teksten som vises i input-feltet før brukeren skriver.

data-placeholder="Still et spørsmål..."

Merkenavn

Navnet som vises i header sammen med "Online"-indikatoren.

data-brand-name="Kundeservice"

System-prompt

System-prompten definerer chatbotens personlighet, oppførsel og begrensninger. Den redigeres i dashbordet under "Prompt"-fanen.

Beste praksis

•Definer rollen: Start med å fortelle AI-en hvem den er, f.eks. "Du er en kundeserviceassistent for [Bedriftsnavn]."
•Sett tone: Beskriv hvordan den skal kommunisere - vennlig, profesjonell, uformell, etc.
•Definer begrensninger: Fortell hva den IKKE skal svare på eller diskutere.
•Gi eksempler: Inkluder eksempel-dialoger for vanlige spørsmål.
•Håndter ukjente spørsmål: Instruer hvordan den skal svare når den ikke vet svaret.

Eksempel på system-prompt

Du er en hjelpsom kundeserviceassistent for Båtbutikken AS.

Din rolle:
- Hjelpe kunder med spørsmål om båtutstyr, produkter og priser
- Gi råd om vedlikehold og bruk av båtutstyr
- Svare på norsk med en vennlig og profesjonell tone

Retningslinjer:
- Hold svarene korte og konsise
- Hvis du ikke vet svaret, si det ærlig og henvis til kundeservice
- Ikke diskuter konkurrenter eller gi juridiske/medisinske råd
- Ved komplekse henvendelser, foreslå å kontakte oss på hei@batbutikken.no

Vanlige spørsmål:
- Åpningstider: Man-fre 09-17, lør 10-15
- Leveringstid: 1-3 virkedager
- Retur: 30 dagers åpent kjøp

Innhold og kunnskapsbase

Chatboten kan læres opp på bedriftens innhold for å gi mer presise og relevante svar. Dette konfigureres i dashbordet under "Innhold"-fanen.

Støttede innholdstyper

Nettside-crawling

Vi crawler nettsiden din automatisk

PDF-dokumenter

Last opp manualer, kataloger, etc.

Tekstfiler

FAQ, produktinfo, retningslinjer

Manuell input

Skriv inn informasjon direkte

Tips for godt innhold

• Inkluder ofte stilte spørsmål (FAQ)
• Legg til produktbeskrivelser og spesifikasjoner
• Oppdater innholdet regelmessig
• Strukturer informasjonen tydelig med overskrifter

API-referanse

For avanserte integrasjoner kan du kommunisere direkte med chat-API-et.

Endepunkt

POSThttps://preik.no/api/chat

Request body

{
  "messages": [
    { "role": "user", "content": "Hva er åpningstidene?" }
  ],
  "storeId": "din-butikk-id",
  "noStream": false
}

Parametere

messages - Array med samtalehistorikk
storeId - Din butikk-ID
noStream - Sett til true for å få hele svaret på en gang (standard: false for streaming)

Response (noStream: true)

{
  "content": "Vi har åpent mandag til fredag 09-17, og lørdag 10-15."
}

Streaming response

Med noStream: false returneres svaret som en text/plain stream der teksten kommer inkrementelt.

Plattform-guider

WordPress

Alternativ 1: Plugin

Installer "Insert Headers and Footers" eller "WPCode" plugin
Gå til plugin-innstillingene
Lim inn embed-koden i "Footer"-seksjonen
Lagre endringene

Alternativ 2: Tema-fil

Gå til Utseende → Tema-filredigerer
Åpne footer.php
Lim inn koden rett før </body>
Lagre filen

Shopify

Gå til Online Store → Themes
Klikk "Actions" → "Edit code"
Finn theme.liquid under Layout
Finn </body> taggen (vanligvis nederst)
Lim inn embed-koden rett før denne taggen
Klikk "Save"

Wix

Gå til Settings i Wix-dashbordet
Velg "Custom Code" under Advanced
Klikk "+ Add Code"
Lim inn embed-koden
Velg "Body - end" som plassering
Velg hvilke sider koden skal vises på
Klikk "Apply"

Squarespace

Gå til Settings → Advanced → Code Injection
Lim inn embed-koden i "Footer"-feltet
Klikk "Save"

Webflow

Gå til Project Settings
Velg "Custom Code"-fanen
Lim inn embed-koden i "Footer Code"-feltet
Publiser nettsiden på nytt

React / Next.js

// I _app.tsx eller layout.tsx
import Script from 'next/script'

export default function App() {
  return (
    <>
      {/* ... din app ... */}
      <Script
        src="https://preik.no/widget.js"
        data-store-id="din-butikk-id"
        strategy="lazyOnload"
      />
    </>
  )
}

HTML / Vanilla JS

Lim inn embed-koden rett før </body> i HTML-filen din:

<!DOCTYPE html>
<html>
<head>
  <title>Min nettside</title>
</head>
<body>
  <!-- Nettsidens innhold -->

  <script
    src="https://preik.no/widget.js"
    data-store-id="din-butikk-id"
    async
  ></script>
</body>
</html>

Feilsøking

Widgeten vises ikke

• Sjekk at script-taggen er plassert før </body>
• Verifiser at data-store-id er riktig
• Åpne nettleserens Developer Tools (F12) og sjekk Console for feilmeldinger
• Sjekk Network-fanen for å se om widget.js lastes inn
• Tøm nettleserens cache og prøv igjen

Chatboten svarer ikke

• Sjekk at butikk-ID-en er korrekt og aktiv
• Verifiser at du har en gyldig abonnementsplan
• Sjekk Network-fanen for API-feil (4xx/5xx responser)
• Kontakt support hvis problemet vedvarer

Styling/utseende-problemer

• Widgeten bruker Shadow DOM og bør ikke påvirkes av nettsiden din
• Hvis du bruker egne fonter, sjekk at de er lastet inn på siden
• Prøv å sette tema eksplisitt med data-theme="light"

Cache-problemer

• Legg til en versjon-parameter for å tvinge oppdatering:

src="https://preik.no/widget.js?v=2"

Mobil-spesifikke problemer

• Widgeten åpnes i fullskjerm på mobil - dette er tilsiktet oppførsel
• Hvis tastaturet dekker input-feltet, scroll ned i chatten
• Enkelte WebViews (f.eks. Instagram-nettleseren) kan ha begrensninger

Ofte stilte spørsmål

De fleste kunder er oppe og kjører innen 24-48 timer. Når du har fått tilgang, tar det bare noen minutter å legge til embed-koden på nettsiden din.

Nei, det holder å kunne lime inn en kodesnutt på nettsiden din. Vi har guider for alle populære plattformer som WordPress, Shopify, Wix og flere.

Ja! I dashbordet kan du teste chatboten i sanntid før du publiserer den på nettsiden din. Du kan også bruke demoen på forsiden vår.

Vi kjører en månedlig oppdatering basert på innholdsendringer på nettsiden din. Trenger du å legge til noe kritisk mellom oppdateringene? Ta kontakt, så ordner vi det raskt.

Ja, chatboten forstår og svarer på norsk som standard, men kan også håndtere andre språk. Kontakt oss for flerspråklig konfigurasjon.

Absolutt. Farger, fonter, tekster og posisjon kan tilpasses via data-attributter. Se dokumentasjonen for alle tilgjengelige alternativer.

Trenger du hjelp?

Sliter du med integrasjonen eller har spørsmål? Vi hjelper deg gjerne!

hei@preik.no

← Tilbake til forsiden