GameBus Stories

Overview

GameBus Stories lets you build, edit, and publish interactive stories. A story is made of connected parts. Each part plays a video and can optionally show an interactive overlay, such as an announcement or quiz.

Branching rules decide which part plays next. This lets a story continue linearly, branch based on quiz answers, or combine both approaches.

Core Concepts

Anthology

An anthology is a list of stories that are played in sequence.

Story

A story is the full interactive experience a viewer plays through.

Part

A part is one step in a story. Every part has a required background layer and can have an optional foreground layer.

Parts are connected with branching logic, which decides which part plays after the current part.

Part Layers

Background Layer

The background layer is required. It is currently always a video.

Supported video sources are:

• .m3u8 stream URLs
• YouTube URLs

Foreground Layer

The foreground layer is optional and appears on top of the video.

Stories currently supports these foreground types:

• Announcement: Displays a title and/or message at a chosen moment during the video. Use announcements for instructions, reminders, and short explanations.
• Quiz: Asks the viewer one or more questions. Quiz answers can also control branching, for example sending a viewer to a different part based on an answer.

Branching Rules

Branching rules make a story interactive instead of purely linear.

Default Branching

Each part can define a default next part. This part starts automatically when the current video finishes.

Use default branching when the story should continue without requiring viewer input.

Example: Part A finishes, then Part B starts.

Quiz-Based Branching

If a part contains a quiz, the next part can be selected based on the viewer's answers.

Quiz branching can use rules such as:

• If the answer to Question 1 is Yes, go to Part C.
• If the answer to Question 1 is Yes and the answer to Question 2 is No, go to Part D.

Quiz rules are evaluated when the quiz is completed. You can also define a fallback part for answers that do not match any specific rule.

Getting Started

1. Create an account.
2. Log in and open the editor.
3. Go to My Stories.
4. Create an empty story, select an existing story, or upload a story YAML file.

Creating Stories

In the story editor, a story is displayed as a canvas of cards. Each card represents one part.

You can:

• drag parts around to organize the layout;
• drag a connector from one part to another to define what plays next;
• drag a connector into empty space to create a new part automatically;
• delete parts or connections by selecting the element and pressing Backspace.

Configuring a Part

Each part can contain:

1. Video background. Select a video from the story video library. You can optionally trim it with the slider by choosing a start and end time.
2. Foreground overlay. Add an announcement or quiz. You can choose when the overlay appears by dragging the star icon on the slider.
3. Quiz branching rules. If the part contains a quiz, configure which part should play next for matching answers.

To edit branching rules for the quiz in the current part, click the cog icon next to the selected quiz name.

Reusable Story Assets

Before building all parts, define the reusable assets for the story in Settings.

Story Settings

Story settings include:

• story name
• story reference
• publication status

Videos

Stories have a video library. Videos are referenced through URLs.

Supported video sources are:

• .m3u8 stream URLs
• YouTube URLs

A video can also have a poster or thumbnail. Posters are only shown before the first part starts, so they do not interrupt the story flow.

Announcements

Announcements are reusable templates with translations. They can include a title, a message, or both.

Quizzes

Quizzes are reusable templates. You can add questions, define answer options, and reorder them.

Display Orientation

A story can support multiple display orientations:

• portrait: aspect ratio 16:9, usually the default for mobile-first designs
• landscape: aspect ratio 9:16
• square: aspect ratio 1:1

When adding videos or thumbnails, choose an orientation next to the URL field: Default, Portrait, Landscape, or Square.

The default value is the fallback when a specific orientation is not provided. The player first looks for the requested orientation, then falls back to default, and then to portrait.

In practice, if you only fill in default, that source is used everywhere until you add orientation-specific variants.

Translations

When editing story, announcement, or quiz text, the editor shows language-aware input fields. Select a language from the language dropdown, then enter text for that language. Switch the dropdown to add another language for the same field.

Translations apply to:

• story name in Story Settings
• announcement title and message
• quiz questions and answers

The default value is the fallback when a specific language is not provided. The player first looks for the requested language, then falls back to default, and then to English.

In practice, if you only fill in default, that text is used everywhere until you add language-specific variants.

Embedding Stories

The public story player is designed to be embedded through an iframe. The player body is transparent, and the player sends a postMessage event to the parent page when the story completes.

Example iframe:

<iframe
  id="story"
  title="Story"
  frameborder="0"
  style="overflow:hidden;height:100%;width:100%"
  height="100%"
  width="100%"
  src="{src}"
  sandbox="allow-scripts allow-same-origin allow-presentation"
  allow="autoplay; encrypted-media; picture-in-picture; fullscreen; accelerometer; gyroscope; compute-pressure"
>
</iframe>

Example completion listener:

export class StoryEvent {
  isCompleted: boolean;
  start: Date;
  end: Date;
  watchTime: number;
  watchTimePercentage: number;
}

const allowedOrigins = ['http://localhost:5174', 'https://stories.example.com'];

window.addEventListener('message', (event: MessageEvent) => {
  if (!allowedOrigins.includes(event.origin)) {
    return;
  }

  const story = event.data as StoryEvent;
});

Player URL Options

The player can choose display orientation and language from the embed URL.

Orientation

Add an orientation path segment to force a layout. Supported values are portrait, landscape, and square.

Example: /square forces the square layout.

Language

Add a language code as a path segment to choose a language.

Example: /nl selects Dutch.