Gobi Stories — Documentation

Gobi Stories is a complete platform for collecting, editing and distributing video stories in a mobile-friendly format. The platform consists of four main areas:

Autopilot

Gobi makes it easy to collect authentic video content from employees and customers. Participants use their own mobile phone — no film crew or app needed.

• Order stories under «New story» in Studio, with ready-made questions for each story type
• Invite participants via SMS or email
• Participants film directly in the browser — each answer becomes a chapter
• We edit and brand the videos — the finished story is delivered in Studio

Gobi Studio

Studio is the administration platform where you order stories with Autopilot, edit videos with AI support, and publish content on websites, in job ads and in emails.

• Order stories with Autopilot — we invite participants via SMS or email
• AI-assisted editing — subtitles, clips, transitions and branding
• Chapter-based format similar to stories on social media
• Copy embed code for publishing on websites

Gobi Story Player

Player is a JavaScript widget you add to your website to display stories. It is cookie-free, WCAG 2.1 AA compliant, and works on all modern browsers.

• Collections — Display multiple stories as clickable bubbles or cards. Click opens fullscreen player.
• Embed — Display a single story as an embedded player directly on the page.
• No cookies or third-party tracking
• WCAG 2.1 AA — subtitles, keyboard navigation and screen readers
• Responsive, mobile-optimized and lazy-loaded

Analytics

Get insights into how your video content performs — completely without cookies or personal tracking.

• Views, watch time and link clicks
• Dashboard per team and per story, with viewer retention per chapter
• Filter by time period to measure campaign impact
• JavaScript events for integration with your own analytics tools

Integrations

Gobi integrates seamlessly with a range of third-party systems:

• ATS systems — Add video stories directly to job listings
• CMS platforms — WordPress, Drupal and other content management systems
• Email marketing — Mailchimp, HubSpot and other platforms

See integration guides for detailed step-by-step instructions.

REST API

Gobi has a REST API that lets you fetch videos, collections and teams programmatically. Useful for building custom integrations, CMS plugins and automated publishing workflows.

Quick start

Add Gobi Stories to your website in under 5 minutes.

Step 1 — Copy the embed code from Studio

Log in to studio.gobistories.com, choose «Website» in the side menu and «Choose stories to embed». Click «Add to Site» and «Copy code» — and you have ready-made code. If you use Collections, you'll find the same «Add to Site» button inside the collection.

Step 2 — Paste the code on your website

Paste the code where you want stories to appear. It works on all websites that support 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>

Replace din-collection-id with the ID you get in Studio. You can also use iFrame — see Add Gobi in the menu for both methods.

Step 3 — Done!

Stories now appear automatically on the website. HR can change stories, colors, size and layout directly from Gobi Studio — without changing the code.

Autopilot

Gobi makes it easy to collect authentic video content from employees and customers. You don't need a film crew — participants use their own mobile phone to film and upload directly.

How it works

Autopilot is designed to be simple for both administrators and participants:

1. Order in Studio — Choose «New story» in the side menu and «Gobi makes the story». Pick a story type, review the questions, add up to 20 participants and set a recording deadline. You get a confirmation by email once the order is placed.
2. Participants are invited — Participants receive invitations via SMS or email with a link to record video.
3. Participants film — Participants open the link on their phone, see the questions one at a time, and film their answers directly in the browser — without installing any app. Each answer becomes a separate chapter in the finished story.
4. Finished story in Studio — We edit the videos and add your branding. You're notified by email when the story is ready, and you'll find it under «Stories» in Studio — ready to adjust and publish.

Question templates

Each Autopilot order uses ready-made questions tailored to the story type — employee testimonial or hiring manager. For a hiring manager story you can paste the link to the job ad, and we suggest questions based on it. Questions are available in Norwegian, English, Swedish and Danish, and you can reorder, remove or add questions before you order.

Participants see the questions one at a time — like a teleprompter — while they film. Each question results in a separate video clip, which automatically becomes a chapter in the finished story.

Invitations via SMS or email

Participants are invited in one of two ways:

The invitations can be customized with the company's branding and custom instructions for what participants should film.

Upload from mobile

Participants don't need to install any app. They open the invitation link in the mobile browser and can:

• Film new video directly in the browser via the camera
• Upload an existing video from the camera roll

Upload is optimized for mobile devices and works on both iOS and Android. Participants receive clear instructions throughout the process.

Follow your order

Once you've ordered, we take care of the rest:

• Participants receive an invitation with instructions, and reminders are sent automatically to those who haven't filmed yet
• You're kept updated by email along the way — for example when the deadline is approaching
• The finished story appears under «Stories» in Studio, where you can make changes before publishing

Studio — editing

Gobi Studio gives you powerful editing tools for creating professional video content — without the need for external software or technical expertise.

Organization and teams

Your content in Gobi is organized on two levels: an organization and one or more teams. A team is the workspace where you collect and work with stories — everything you do in Studio happens inside a team.

Here’s how they fit together:

• An organization can have multiple teams — how many is determined by your subscription.
• You’re a member of the organization, and separately a member of one or more teams within it. A user can have access to some teams without having access to all of them.
• Each team has its own members and roles.
• Each story belongs to one specific team.

Separate teams are useful for organizing stories by department, brand or location, and for controlling who has access to what.

Editing tools

Studio offers a complete suite of tools for processing videos:

AI subtitles

Gobi has a built-in AI-powered subtitle feature that automatically transcribes and adds subtitles to your videos. This improves both accessibility and engagement.

• Automatic transcription — The AI transcribes speech to text in seconds
• Multilingual — Supports subtitles in multiple languages, including Norwegian, English and Swedish
• Editable — You can edit and correct the subtitles manually in Studio, and customize font, color and position
• Three tracks — In addition to regular subtitles, each story can have closed captions («Closed captions») and audio description («Video descriptions»)
• WCAG compliant — Ensures the content is accessible to everyone, including users with hearing impairments

Chapters

One of Gobi's most central features is the ability to divide videos into chapters — similar to stories on social media. Viewers navigate between chapters by tapping forward or back, making the content interactive.

Chapters make it possible to:

• Structure longer content into short, engaging segments
• Let the viewer navigate to what is relevant to them
• Increase average watch time through interactive format
• Tell more complex stories step by step

Branding

Gobi Studio lets you incorporate your company's brand elements into the videos. Under Admin console → Branding (in the user menu, for organization owners) you can set your logo and brand colors — or import the colors automatically from your website:

• Logo — Displayed in videos and in the player to reinforce the company's identity
• Colors — Customize the player's color theme to match the company's profile (bubble border, background, buttons)
• Font — Upload custom fonts to the asset library and use them in subtitles and text

This ensures that all video content is consistent with the company's visual identity, wherever it is displayed.

Publishing

When the video is edited, click «Create story» (or «Update story» for later changes). Then you can:

• Get the embed code under «Website» in the side menu, or group several stories in a Collection
• Download the video — with or without burned-in subtitles — for use on social media
• Distribute via integrations to ATS systems and CMS platforms
• Share in email campaigns via Mailchimp, HubSpot and similar

Story Player

Gobi Story Player is a widget that displays your video content on websites, career pages and in job listings. The player is cookie-free, WCAG 2.1 AA compliant, and works on all modern browsers.

Bubbles and cards

With Collections (dynamic widget) you can display stories in two different layouts. When a visitor clicks on a bubble or card, the video opens in a fullscreen player with chapter navigation.

Bubbles

Sara

Erik

Lina

Circular bubbles in a horizontal row — like stories on Instagram. Best for career pages and job listings where you want to show multiple employee stories compactly.

Cards

Rectangular cards in a grid — provides more space for titles and cover images. Best for overview pages, blogs and article lists.

Two integration methods

You can add stories to your website in two ways:

Customize appearance

Customize the player to your platform, website, job listing or career page. Logo and brand colors are set under Admin console → Branding, while size, colors and layout for each placement are chosen where you get the code («Website» or «Collections»):

• Logo — Displayed in videos and in the player to reinforce the company's identity
• Colors — Customize color theme on bubble border, background and buttons
• Font — Use custom fonts in subtitles and titles
• Size — Adjust the size of bubbles and cards
• Layout — Choose between bubbles and cards, adjust order and quantity

Changes are published automatically — you don't need to update the code on the website.

Accessibility

Gobi Story Player meets WCAG 2.1 AA and is built for universal design:

• AI subtitles — Automatically generated subtitles on all videos
• Keyboard navigation — Full support for keyboard navigation
• Screen readers — ARIA markup and semantic HTML
• Responsive — Automatically adapts to all screen sizes

Cookie-free — no consent required

The player uses no cookies or third-party tracking. This means:

• No personal data is collected from viewers
• Videos are shown to 100% of visitors — without being blocked by cookie consent
• Fully GDPR compliant

Analytics

Gobi gives you insight into how your video content performs. All data is collected without cookies or personal tracking — in full compliance with GDPR.

Key metrics

The following metrics are available in Gobi Studio:

Dashboard in Studio

In Gobi Studio you'll find an analytics dashboard that gives you an overview of:

• Team statistics — Active stories, views, view time, average views per story and link clicks across all content
• Per story — Drill down to individual stories, with figures per chapter and how many viewers stay on
• Time period — Filter data by time period to identify trends and measure campaign impact

Events in Player

For developers who want to integrate with their own analytics tools, Gobi Player offers JavaScript events:

// Listen for Player events
gobi.on('story:viewed', (data) => {
  // Send to analytics or update UI
  analytics.track('video_viewed', { storyId: data.storyId });
});

gobi.on('story:completed', (data) => {
  // Use completionRate to measure engagement
  analytics.track('video_completed', { rate: data.completionRate });
});

// Embedded Player events
new gobi.Player({
  container: '#player',
  storyId: 'din-story-id',
  on: {
    videoPlay: () => { /* video started */ },
    videoPause: () => { /* video paused */ },
    videoComplete: () => { /* video completed */ },
    clipChange: () => { /* chapter changed */ },
  },
});

Privacy

Gobi Analytics is built with privacy in mind:

• No cookies or third-party tracking
• No personal data is collected from viewers
• Can be excluded from cookie consent
• Fully GDPR compliant — Story Player henter ingen personlige data

Add Gobi

Add Gobi Stories to your website with a few lines of code. Choose the integration method and widget type that best suits your needs.

Step 1 — Choose integration method

Step 2 — Choose widget type

Script Embed

Script Embed is the recommended way to add Gobi to your website. You add a small script that loads the Gobi player natively on the page — which provides the best performance and most flexibility.

Dynamic widget — Collections (recommended)

A Collection is Gobi's publishing widget. Once added to the website, HR can control everything from Gobi Studio — change stories, colors, size and order — without involving developers.

Paste the following code where you want stories to appear. Replace data-gobi-collection-id with your collection ID from 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>

Each collection can also be given an optional tag (max 64 characters) in Studio. Instead of tying your embed code to one specific collection ID, you can point at the tag — Gobi then shows whichever collection is currently marked with it. That lets marketing swap which collection is live under a tag without changing the code on the website.

Static widget — Display specific stories

With a static widget you choose which stories are displayed directly in the code. Perfect for pages where the content rarely changes. To change the content you need to update the code.

Replace data-gobi-stories with your story ID from 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>

Embedded player

Use gobi.Player() to embed a single story directly in the page flow — without bubbles or popup. Perfect for product pages, articles and landing pages.

Basic usage

<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() {
        // Video has started playing
      },
      videoComplete: function() {
        // Video has finished playing
      },
    },
  });
</script>

Player options

Events

Listen for events with on object. Event callbacks receive the chapter index as the first parameter.

Removing the player

You can remove an embedded player to free up resources:

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

// Remove the player when it is no longer needed
player.destroy();

Configuration

Detailed reference for configuring Gobi bubbles and cards via data attributes, JavaScript options and CSS.

gobi.discover()

Use gobi.discover() to automatically find and render all elements with the class gobi-stories in the DOM. Configure with data attributes on the HTML element:

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

With custom titles per story

You can set title and thumbnail per story with child elements:

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

Global options via discover()

You can also send global options to gobi.discover():

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

Data attributes

All options can be set as data attributes in kebab-case on the HTML element:

JavaScript options (gobi.Bubbles)

When you use gobi.Bubbles(), options are passed as an object in camelCase:

Title styling

These options apply both as data attributes (kebab-case) and JavaScript options (camelCase):

CSS overrides

You can override Gobi styles directly with CSS:

/* Change size of bubbles */
.gobi-bubble {
  width: 80px !important;
  height: 80px !important;
}

/* Customize the border color */
.gobi-bubble--active {
  border-color: #8FD5A6 !important;
}

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

Filtering

You can filter stories in a collection with data-gobi-filter:

<!-- Filter by specific category -->
<div class="gobi-stories"
  data-gobi-stories="karriereside"
  data-gobi-filter="category:frontend">
</div>

Advanced

Advanced integration methods for full programmatic control over the Gobi player.

gobi.Bubbles() — Programmatic setup

For full kontroll kan du opprette bobler programmatisk med JavaScript. Se Configuration 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: 'Our culture' },
      { id: 'another-key', title: 'Meet the team' },
    ],
    bubbleSize: '120px',
    color: '#8FD5A6',
  });
</script>

Open stories programmatically

These functions let you open and render stories without using embed code:

Controller

The callback functions receive a controller object with the following properties:

openPopup

Opens a story immediately:

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

renderPopups

Preload stories and open them later with the controller:

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

renderBubbles

Display bubbles with programmatic control:

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

discover with controller

Use discover() and save the controller for later use:

var gobiController;

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

// Use the controller in event handlers
document.querySelector('#open-story').addEventListener('click', function() {
  gobiController.openPopup('story-id');
});

NPM package

Install Gobi as an npm package for use in modern JavaScript projects:

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

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

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

Browser support

Gobi supports the following browsers:

• Chrome — Full support
• Firefox — Full support
• Safari — Full support
• Opera — Full support
• Internet Explorer — Limited functionality, but users can still view stories

Content Security Policy (CSP)

If your website uses strict CSP headers, you need to allow the following sources:

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/;

iFrame Embed

iFrame Embed lets you display Gobi stories in places where JavaScript is not allowed — for example in email clients, certain CMSs, and third-party platforms with strict security restrictions.

When should you use iFrame?

Use iFrame when you cannot add JavaScript to the page. In all other cases we recommend Script Embed, which provides better performance and more configuration options.

Dynamic widget — Collections (recommended)

Display a dynamic collection that updates automatically from Gobi Studio. HR can change stories, colors and order without changing the code.

Replace the collection ID in the src URL with your collection ID from Studio:

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

Static widget — Display specific stories

Display specific stories by setting the story ID and settings directly in the URL. To change which stories are shown, you need to update the URL in the code.

Replace stories parameter with your story ID from 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 parameters for static widget

Customize the appearance of the static iFrame widget with parameters in the URL:

Limitations

Compared with Script Embed, iFrame has some limitations:

• No JavaScript events or callbacks
• Limited appearance customization
• Somewhat slower loading than script-based integration
• Requires allowfullscreen for fullscreen viewing

Content Security Policy

If your website uses strict CSP headers, you need to allow the following sources:

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/;

Troubleshooting

Common issues and solutions when using Gobi on your website.

Script Embed

Bubbles not showing

If bubbles aren’t appearing on the page, go through the following steps:

• Open the browser console (right-click → Inspect → Console) and look for error messages. Any loading errors or missing resources will appear here.
• Verify the script is loaded — in the console, type gobi and press Enter. If you get an object back, the script is loaded correctly. If you get undefined, the script hasn’t loaded — check that <script src="https://widget.gobistories.com/gwi/6"> exists in your HTML.
• Check the div element exists in the DOM — open the Elements tab in DevTools and search for gobi-stories or gobi-collection. The div must be present in the HTML when the script runs.
• Verify the story IDs — check that the value in data-gobi-stories or data-gobi-collection-id matches the ID from Gobi Studio.
• Check loading order — if you’re using onload="gobi.discover()", the div element must already exist in the DOM when the script finishes loading. Place the div before the script tag, or use the async attribute.

CSP errors

If you see «Refused to load media» or similar errors, you need to update your CSP headers to include blob: as well as the Gobi domains. Add the following to your CSP header:

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/;

Scrolling issue

If the page scrolls when you open a story, it may be because the html element has set height: 100%. Switch to min-height: 100% to fix this.

iFrame Embed

iFrame not showing content

Check the following:

• Wrong collection tag or story ID in the URL
• iFrame blocked by Content Security Policy
• Missing allowfullscreen attribute

Page scrolls to top when a story opens

This is usually caused by the height styling on the <html> tag. Replace height with min-height to fix the issue.