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:

Collection

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.

• Create a project with ready-made question templates
• Invite participants via SMS or email
• Participants film directly in the browser — each answer becomes a chapter
• Videos appear in Studio, ready for editing

Gobi Studio

Studio is the administration platform where you create projects, invite employees to film, edit videos with AI support, and publish content via Collections.

• Create projects and invite participants via SMS and 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, completion rate and watch time
• Dashboard per collection and per story
• 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, open a collection, and click «Embed». The code builder gives you ready-made code — just copy it.

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.

Collection

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

The collection process in Gobi is designed to be simple for both administrators and participants:

1. Create a project — Log in to Gobi Studio and create a new project. Give it a name and choose a ready-made question template. The questions are displayed as a teleprompter when participants film.
2. Invite participants — Send invitations via SMS or email directly from Studio. Participants receive 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. Edit in Studio — When the videos are uploaded, they appear in your project in Studio, ready for editing and publishing.

Question templates

When you create a project, you choose a question template — a ready-made set of questions tailored to a specific purpose.

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

You can invite participants in two ways from Gobi Studio:

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.

Manage submitted content

In Studio you can see all submitted videos collected in the project. From here you can:

• Review and approve submitted videos
• Sort and organize the content
• Send reminders to participants who haven't filmed yet
• Proceed to editing in Studio

Studio — editing

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

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
• 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 Settings → Branding in Studio you can configure:

• 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 — Choose font for subtitles and titles

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

Publishing

When the video is edited, you publish it via a Collection — Gobi's publishing widget. From there you can:

• Copy the embed code to display the videos on your website
• 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

About us

Meet the team

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. Everything is controlled from Gobi Studio under Settings → Branding:

• 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 — Choose font for 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:

• Aggregate statistics — Total views, average completion rate and watch time across all content
• Per collection — See how each collection performs and compare across them
• Per story — Drill down to individual stories for detailed insight into which videos engage the most
• 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>

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

Troubleshooting

Bubbles not showing

Check the browser console for error messages. Verify that the story IDs are correct and that the script is loading.

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 (see CSP section above).

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

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.