Gobi Stories — Dokumentasjon

Gobi Stories er en komplett plattform for å samle inn, redigere og distribuere videostories i et mobilvennlig format. Plattformen består av fire hovedområder:

Innsamling

Gobi gjør det enkelt å samle inn autentisk videoinnhold fra ansatte og kunder. Deltakerne bruker sin egen mobiltelefon — ingen filmcrew eller app nødvendig.

• Opprett et prosjekt med ferdige spørsmålsmaler
• Inviter deltakere via SMS eller e-post
• Deltakerne filmer direkte i nettleseren — hvert svar blir et kapittel
• Videoene dukker opp i Studio, klare for redigering

Gobi Studio

Studio er administrasjonsplattformen der du oppretter prosjekter, inviterer ansatte til å filme, redigerer videoer med AI-støtte, og publiserer innholdet via Collections.

• Opprett prosjekter og inviter deltakere via SMS og e-post
• AI-assistert redigering — undertekster, klipp, overganger og merkevare
• Kapittelbasert format lik stories på sosiale medier
• Kopier embed-kode for publisering på nettsider

Gobi Story Player

Player er en JavaScript-widget du legger til på nettsiden din for å vise stories. Den er cookiefri, WCAG 2.1 AA-kompatibel, og fungerer på alle moderne nettlesere.

• Collections — Vis flere stories som klikkbare bobler eller kort. Klikk åpner fullskjerm-spiller.
• Embed — Vis én enkelt story som en innebygd spiller direkte på siden.
• Ingen cookies eller tredjepartssporing
• WCAG 2.1 AA — teksting, tastaturnavigasjon og skjermlesere
• Responsiv, mobiloptimalisert og lazy-loadet

Analytics

Få innsikt i hvordan videoinnholdet ditt presterer — helt uten cookies eller personsporing.

• Visninger, fullføringsrate og visningstid
• Dashboard per collection og per story
• Filtrer på tidsperiode for å måle kampanjeeffekt
• JavaScript-events for integrasjon med egne analyseverktøy

Integrasjoner

Gobi integreres sømløst med en rekke tredjepartssystemer:

• ATS-systemer — Legg inn videostories direkte i stillingsannonser
• CMS-plattformer — WordPress, Drupal og andre innholdsstyringssystemer
• E-postmarkedsføring — Mailchimp, HubSpot og andre plattformer

Se integrasjonsguider for detaljerte steg-for-steg-instruksjoner.

REST API

Gobi har et REST API som lar deg hente videoer, collections og teams programmatisk. Nyttig for å bygge egne integrasjoner, CMS-plugins og automatiserte publiseringsflyter.

Hurtigstart

Legg til Gobi Stories på nettsiden din på under 5 minutter.

Steg 1 — Kopier embed-koden fra Studio

Logg inn på studio.gobistories.com, åpne en collection, og klikk «Embed». Kodebyggeren gir deg ferdig kode — bare kopier den.

Steg 2 — Lim inn koden på nettsiden

Lim inn koden der du vil at stories skal vises. Det fungerer på alle nettsider som støtter HTML.

<script src="https://widget.gobistories.com/gwi/6" async
  onload="gobi.discover()"></script>

<div class="gobi-collection"
  data-gobi-collection-id="din-collection-id">
</div>

Bytt ut din-collection-id med ID-en du får i Studio. Du kan også bruke iFrame — se Legg til Gobi i menyen for begge metodene.

Steg 3 — Ferdig!

Stories vises nå automatisk på nettsiden. HR kan endre stories, farger, størrelse og layout direkte fra Gobi Studio — uten å endre koden.

Innsamling

Gobi gjør det enkelt å samle inn autentisk videoinnhold fra ansatte og kunder. Du trenger ingen filmcrew — deltakerne bruker sin egen mobiltelefon til å filme og laste opp direkte.

Slik fungerer det

Innsamlingsprosessen i Gobi er designet for å være enkel for både administrator og deltaker:

1. Opprett et prosjekt — Logg inn i Gobi Studio og opprett et nytt prosjekt. Gi det et navn og velg en ferdig spørsmålsmal. Spørsmålene vises som en teleprompter når deltakerne filmer.
2. Inviter deltakere — Send invitasjoner via SMS eller e-post direkte fra Studio. Deltakerne mottar en lenke for å spille inn video.
3. Deltakerne filmer — Deltakerne åpner lenken på mobilen, ser spørsmålene ett om gangen, og filmer svarene sine direkte i nettleseren — uten å installere noen app. Hvert svar blir et eget kapittel i den ferdige storyen.
4. Rediger i Studio — Når videoene er lastet opp, dukker de opp i prosjektet ditt i Studio, klare for redigering og publisering.

Spørsmålsmaler

Når du oppretter et prosjekt, velger du en spørsmålsmal — et ferdig sett med spørsmål tilpasset et bestemt formål.

Deltakerne ser spørsmålene étt om gangen — som en teleprompter — mens de filmer. Hvert spørsmål resulterer i et eget videoklipp, som automatisk blir et kapittel i den ferdige storyen.

Invitasjoner via SMS og e-post

Du kan invitere deltakere på to måter fra Gobi Studio:

Invitasjonene kan tilpasses med bedriftens merkevare og egne instruksjoner for hva deltakerne skal filme.

Opplasting fra mobil

Deltakerne trenger ikke å installere noen app. De åpner invitasjonslenken i mobilnettleseren og kan:

• Filme ny video direkte i nettleseren via kameraet
• Laste opp en eksisterende video fra kamerarullen

Opplastingen er optimalisert for mobile enheter og fungerer på både iOS og Android. Deltakerne får tydelige instruksjoner gjennom hele prosessen.

Administrer innsendt innhold

I Studio ser du alle innsendte videoer samlet i prosjektet. Herfra kan du:

• Se gjennom og godkjenne innsendte videoer
• Sortere og organisere innholdet
• Sende påminnelser til deltakere som ikke har filmet ennå
• Gå videre til redigering i Studio

Studio — redigering

Gobi Studio gir deg kraftige redigeringsverktøy for å skape profesjonelt videoinnhold — uten behov for ekstern programvare eller teknisk kompetanse.

Redigeringsverktøy

Studio tilbyr en komplett pakke med verktøy for å bearbeide videoer:

AI-undertekster

Gobi har en innebygd AI-drevet undertekstfunksjon som automatisk transkriberer og legger til undertekster på videoene dine. Dette forbedrer både tilgjengeligheten og engasjementet.

• Automatisk transkripsjon — AI-en transkriberer tale til tekst på sekunder
• Flerspråklig — Støtter undertekster på flere språk, inkludert norsk, engelsk og svensk
• Redigerbar — Du kan redigere og korrigere undertekstene manuelt i Studio
• WCAG-kompatibel — Sikrer at innholdet er tilgjengelig for alle, inkludert brukere med nedsatt hørsel

Kapitler

En av Gobis mest sentrale funksjoner er muligheten til å dele videoer inn i kapitler — lik stories på sosiale medier. Seerne navigerer mellom kapitlene ved å trykke frem eller tilbake, som gjør innholdet interaktivt.

Kapitler gjør det mulig å:

• Strukturere lengre innhold i korte, engasjerende segmenter
• La seeren navigere til det som er relevant for dem
• Øke gjennomsnittlig visningstid gjennom interaktivt format
• Fortelle mer komplekse historier steg for steg

Merkevare

Gobi Studio lar deg innlemme bedriftens merkevarelementer i videoene. Under Innstillinger → Merkevare i Studio kan du konfigurere:

• Logo — Vises i videoene og i playeren for å forsterke bedriftens identitet
• Farger — Tilpass playerens fargetema til bedriftens profil (boblekant, bakgrunn, knapper)
• Font — Velg skrifttype for undertekster og titler

Dette sikrer at alt videoinnhold er konsistent med bedriftens visuelle identitet, uansett hvor det vises.

Publisering

Når videoen er redigert, publiserer du den via en Collection — Gobis publiseringswidget. Derfra kan du:

• Kopiere embed-koden for å vise videoene på nettsiden din
• Distribuere via integrasjoner til ATS-systemer og CMS-plattformer
• Dele i e-postkampanjer via Mailchimp, HubSpot og lignende

Story Player

Gobi Story Player er en widget som viser videoinnholdet ditt på nettsider, karrieresider og i stillingsannonser. Playeren er cookiefri, WCAG 2.1 AA-kompatibel, og fungerer på alle moderne nettlesere.

Bobler og kort

Med Collections (dynamisk widget) kan du vise stories i to ulike layouts. Når en besøkende klikker på en boble eller et kort, åpnes videoen i en fullskjerm-spiller med kapittelnavigasjon.

Bubbles

Sara

Erik

Lina

Sirkulære bobler i en horisontal rad — som stories på Instagram. Best for karrieresider og stillingsannonser der du vil vise flere ansatthistorier kompakt.

Cards

Om oss

Møt teamet

Rektangulære kort i et grid — gir mer plass til titler og coverbilde. Best for oversiktssider, blogger og artikkellister.

To integrasjonsmetoder

Du kan legge til stories på nettsiden din på to måter:

Tilpass utseendet

Tilpass playeren til din plattform, nettside, stillingsannonse eller karriereside. Alt styres fra Gobi Studio under Innstillinger → Merkevare:

• Logo — Vises i videoene og i playeren for å forsterke bedriftens identitet
• Farger — Tilpass fargetema på boblekant, bakgrunn og knapper
• Font — Velg skrifttype for undertekster og titler
• Størrelse — Juster størrelsen på bobler og kort
• Layout — Velg mellom bobler og kort, juster rekkefølge og antall

Endringer publiseres automatisk — du trenger ikke å oppdatere koden på nettsiden.

Tilgjengelighet

Gobi Story Player oppfyller WCAG 2.1 AA og er bygget for universell utforming:

• AI-teksting — Automatisk genererte undertekster på alle videoer
• Tastaturnavigasjon — Full støtte for navigasjon med tastatur
• Skjermlesere — ARIA-merking og semantisk HTML
• Responsiv — Tilpasser seg automatisk alle skjermstørrelser

Cookiefri — ingen samtykke nødvendig

Playeren bruker ingen cookies eller tredjepartssporing. Det betyr:

• Ingen personopplysninger samles inn fra seerne
• Videoene vises for 100 % av besøkende — uten å bli blokkert av cookie-samtykke
• Fullt GDPR-kompatibelt

Analytics

Gobi gir deg innsikt i hvordan videoinnholdet ditt presterer. Alle data samles inn uten cookies eller personsporing — i full overenstemmelse med GDPR.

Nøkkeltall

Følgende målinger er tilgjengelige i Gobi Studio:

Dashboard i Studio

I Gobi Studio finner du et analytics-dashboard som gir deg oversikt over:

• Samlet statistikk — Totale visninger, gjennomsnittlig fullføringsrate og visningstid på tvers av alt innhold
• Per collection — Se hvordan hver collection presterer og sammenlign på tvers
• Per story — Drill ned til individuelle stories for detaljert innsikt om hvilke videoer som engasjerer mest
• Tidsperiode — Filtrer data på tidsperiode for å identifisere trender og måle effekt av kampanjer

Events i Player

For utviklere som ønsker å integrere med egne analyseverktøy, tilbyr Gobi Player JavaScript-events:

// Lytt på Player-events
gobi.on('story:viewed', (data) => {
  // Send til analytics eller oppdater UI
  analytics.track('video_viewed', { storyId: data.storyId });
});

gobi.on('story:completed', (data) => {
  // Bruk completionRate til å måle engasjement
  analytics.track('video_completed', { rate: data.completionRate });
});

// Embedded Player events
new gobi.Player({
  container: '#player',
  storyId: 'din-story-id',
  on: {
    videoPlay: () => { /* video startet */ },
    videoPause: () => { /* video pauset */ },
    videoComplete: () => { /* video fullført */ },
    clipChange: () => { /* kapittel byttet */ },
  },
});

Personvern

Gobi Analytics er bygget med personvern i fokus:

• Ingen cookies eller tredjepartssporing
• Ingen personopplysninger samles inn fra seerne
• Kan utelates fra samtykke til informasjonskapsler
• Fullt GDPR-kompatibelt — Story Player henter ingen personlige data

Legg til Gobi

Legg inn Gobi Stories på nettsiden din med noen få linjer kode. Velg integrasjonsmetode og widgettype som passer best for ditt behov.

Steg 1 — Velg integrasjonsmetode

Steg 2 — Velg widgettype

Script Embed

Script Embed er den anbefalte måten å legge til Gobi på nettsiden din. Du legger til et lite script som laster Gobi-spilleren nativt inn på siden — noe som gir best ytelse og mest fleksibilitet.

Dynamisk widget — Collections (anbefalt)

En Collection er Gobis publiseringswidget. Når den er lagt til på nettsiden, kan HR styre alt fra Gobi Studio — endre stories, farger, størrelse og rekkefølge — uten å involvere utviklere.

Lim inn følgende kode der du vil at stories skal vises. Bytt ut data-gobi-collection-id med din collection-ID fra Studio:

<script src="https://widget.gobistories.com/gwi/6" async
  onload="gobi.discover()"></script>

<div class="gobi-collection"
  data-gobi-collection-id="din-collection-id">
</div>

Statisk widget — Vis spesifikke stories

Med en statisk widget velger du hvilke stories som vises direkte i koden. Perfekt for sider der innholdet sjelden endres. For å endre innholdet må du oppdatere koden.

Bytt ut data-gobi-stories med din story-ID fra Studio:

<script src="https://widget.gobistories.com/gwi/6" async
  onload="gobi.discover()"></script>

<div class="gobi-stories"
  data-gobi-stories="din-story-id"
  data-gobi-color="#60538C"
  data-gobi-bubble-size="160px"
  data-gobi-animated-bubble="true"
  data-gobi-wrap="true"
  data-gobi-show-play-icon="true"
  data-gobi-title-font-color="#333333"
  data-gobi-title-font-size="15px"
  data-gobi-title-font-weight="300"
  data-gobi-inherit-text-font-family="true">
</div>

Innebygd spiller

Bruk gobi.Player() for å legge inn en enkelt story direkte i sideflyten — uten bobler eller popup. Perfekt for produktsider, artikler og landingssider.

Grunnleggende bruk

<script src="https://widget.gobistories.com/gwi/6"></script>

<div id="player-container"></div>

<script>
  new gobi.Player({
    container: '#player-container',
    storyId: 'din-story-key',
    width: 320,
    on: {
      videoPlay: function() {
        // Videoen har startet avspilling
      },
      videoComplete: function() {
        // Videoen er ferdig avspilt
      },
    },
  });
</script>

Player-opsjoner

Events

Lytt på hendelser med on-objektet. Event-callbacks mottar kapittelindeksen som første parameter.

Fjerne spilleren

Du kan fjerne en innebygd spiller for å frigjøre ressurser:

var player = new gobi.Player({
  container: '#player-container',
  storyId: 'story-key',
});

// Fjern spilleren når den ikke trengs lenger
player.destroy();

Konfigurasjon

Detaljert referanse for å konfigurere Gobi-bobler og -kort via data-attributter, JavaScript-opsjoner og CSS.

gobi.discover()

Bruk gobi.discover() for å automatisk finne og rendre alle elementer med klassen gobi-stories i DOM-en. Konfigurer med data-attributter på HTML-elementet:

<div class="gobi-stories"
  data-gobi-stories="story-id another-story-id"
  data-gobi-bubble-size="120px"
  data-gobi-color="#8FD5A6">
</div>

<script src="https://widget.gobistories.com/gwi/6" async
  onload="gobi.discover()"></script>

Med egne titler per story

Du kan sette tittel og thumbnail per story med child-elementer:

<div class="gobi-stories">
  <div data-gobi-story="story-id"
    data-gobi-title="Om oss"
    data-gobi-thumbnail-url="https://example.com/thumb.jpg">
  </div>
  <div data-gobi-story="another-id"
    data-gobi-title="Vårt team">
  </div>
</div>

Globale opsjoner via discover()

Du kan også sende globale opsjoner til gobi.discover():

gobi.discover({
  bubbleSize: '120px',
  color: 'blue',
});

Data-attributter

Alle opsjoner kan settes som data-attributter i kebab-case på HTML-elementet:

JavaScript-opsjoner (gobi.Bubbles)

Når du bruker gobi.Bubbles(), sendes opsjonene som et objekt i camelCase:

Tittelstyling

Disse opsjonene gjelder både som data-attributter (kebab-case) og JavaScript-opsjoner (camelCase):

CSS-overstyring

Du kan overstyre Gobi-stiler direkte med CSS:

/* Endre størrelse på bobler */
.gobi-bubble {
  width: 80px !important;
  height: 80px !important;
}

/* Tilpass fargen på border */
.gobi-bubble--active {
  border-color: #8FD5A6 !important;
}

/* Juster kortbredde */
.gobi-card {
  max-width: 240px !important;
}

Filtrering

Du kan filtrere stories i en collection med data-gobi-filter:

<!-- Filtrer på spesifikk kategori -->
<div class="gobi-stories"
  data-gobi-stories="karriereside"
  data-gobi-filter="category:frontend">
</div>

Avansert

Avanserte integrasjonsmetoder for full programmatisk kontroll over Gobi-spilleren.

gobi.Bubbles() — Programmatisk oppsett

For full kontroll kan du opprette bobler programmatisk med JavaScript. Se Konfigurasjon for alle tilgjengelige opsjoner.

<script src="https://widget.gobistories.com/gwi/6"></script>

<div id="container"></div>

<script>
  new gobi.Bubbles({
    container: '#container',
    stories: [
      { id: 'story-key', title: 'Vår kultur' },
      { id: 'another-key', title: 'Møt teamet' },
    ],
    bubbleSize: '120px',
    color: '#8FD5A6',
  });
</script>

Åpne stories programmatisk

Disse funksjonene lar deg åpne og rendre stories uten å bruke embed-kode:

Controller

Callback-funksjonene mottar et controller-objekt med følgende egenskaper:

openPopup

Åpner en story umiddelbart:

gobi.openPopup('din-story-key');

renderPopups

Forlast stories og åpne dem senere med controlleren:

gobi.renderPopups({
  stories: [{ id: 'story-id' }],
}, function(controller) {
  controller.openPopup('story-id');
});

renderBubbles

Vis bobler med programmatisk kontroll:

gobi.renderBubbles({
  container: '#gobi-container',
  stories: [{ id: 'story-id' }],
}, function(controller) {
  controller.openPopup('story-id');
});

discover med controller

Bruk discover() og lagre controlleren for senere bruk:

var gobiController;

gobi.discover({}, function(controller) {
  gobiController = controller;
});

// Bruk controlleren i event handlers
document.querySelector('#open-story').addEventListener('click', function() {
  gobiController.openPopup('story-id');
});

NPM-pakke

Installer Gobi som en npm-pakke for bruk i moderne JavaScript-prosjekter:

npm install --save @gobistories/gobi-web-integration

import { Bubbles } from '@gobistories/gobi-web-integration';

new Bubbles({
  container: '#container',
  bubbleSize: '200px',
});

Nettleserstøtte

Gobi støtter følgende nettlesere:

• Chrome — Full støtte
• Firefox — Full støtte
• Safari — Full støtte
• Opera — Full støtte
• Internet Explorer — Begrenset funksjonalitet, men brukere kan fortsatt se stories

Content Security Policy (CSP)

Hvis nettstedet ditt bruker strenge CSP-headere, må du tillate følgende kilder:

script-src 'self' https://widget.gobistories.com/;
connect-src 'self' https://api.gobistories.com/;
media-src 'self' blob: https://res.cloudinary.com/gobi-technologies-as/;
img-src 'self' blob: https://res.cloudinary.com/gobi-technologies-as/;
frame-src 'self' https://player.gobistories.com/;

Feilsøking

Bobler vises ikke

Sjekk nettleserkonsollen for feilmeldinger. Kontroller at story-ID-ene er korrekte og at scriptet lastes.

CSP-feil

Hvis du ser «Refused to load media» eller lignende feil, må du oppdatere CSP-headerne dine til å inkludere blob: samt Gobi-domenene (se CSP-seksjonen over).

Scrolling-problem

Hvis siden scroller når du åpner en story, kan det skyldes at html-elementet har satt height: 100%. Bytt til min-height: 100% for å løse dette.

iFrame Embed

iFrame Embed lar deg vise Gobi-stories på steder der JavaScript ikke er tillatt — for eksempel i e-postklienter, enkelte CMS-er, og tredjepartsplattformer med strenge sikkerhetsbegrensninger.

Når bør du bruke iFrame?

Bruk iFrame når du ikke kan legge til JavaScript på siden. I alle andre tilfeller anbefaler vi Script Embed, som gir bedre ytelse og flere konfigurasjonsvalg.

Dynamisk widget — Collections (anbefalt)

Vis en dynamisk collection som oppdateres automatisk fra Gobi Studio. HR kan endre stories, farger og rekkefølge uten å endre koden.

Bytt ut collection-ID-en i src-URL-en med din collection-ID fra Studio:

<iframe
  style="width:100%; height:380px"
  scrolling="no"
  frameborder="0"
  src="https://player.gobistories.com/collection-iframe/din-collection-id"
  allowfullscreen
></iframe>

Statisk widget — Vis spesifikke stories

Vis bestemte stories ved å sette story-ID og innstillinger direkte i URL-en. For å endre hvilke stories som vises, må du oppdatere URL-en i koden.

Bytt ut stories-parameteren med din story-ID fra Studio:

<iframe
  style="width:100%; height:450px"
  scrolling="no"
  frameborder="0"
  src="https://player.gobistories.com/bubbles-iframe?stories=din-story-id&color=%2360538C&bubbleSize=160px&animatedBubble=true&wrap=true&showPlayIcon=true&titleFontColor=%23333333&titleFontSize=15px&titleFontWeight=300"
  allowfullscreen
></iframe>

URL-parametere for statisk widget

Tilpass utseendet på den statiske iFrame-widgeten med parametere i URL-en:

Begrensninger

Sammenlignet med Script Embed har iFrame noen begrensninger:

• Ingen JavaScript-events eller callbacks
• Begrenset tilpasning av utseendet
• Noe tregere lasting enn script-basert integrasjon
• Krever allowfullscreen for fullskjermvisning

Content Security Policy

Hvis nettstedet ditt bruker strenge CSP-headere, må du tillate følgende kilder:

frame-src 'self' https://player.gobistories.com/;
script-src 'self' https://widget.gobistories.com/;
connect-src 'self' https://api.gobistories.com/;
media-src 'self' blob: https://res.cloudinary.com/gobi-technologies-as/;
img-src 'self' blob: https://res.cloudinary.com/gobi-technologies-as/;

Feilsøking

iFrame viser ikke innhold

Sjekk følgende:

• Feil collection-tag eller story-ID i URL-en
• iFrame blokkert av Content Security Policy
• Manglende allowfullscreen-attributt

Siden scroller til toppen når en story åpnes

Dette skyldes vanligvis height-styling på <html>-taggen. Erstatt height med min-height for å løse problemet.