Streampixel Documentation
  • Resources
    • Quick Start Guide
      • Register & Sign In
      • Prepare your Unreal Engine project for Windows
      • Configuring Your Project
      • Uploading Your Build
      • Sharing & Embedding
      • Resolution Settings
      • Codec Settings
      • Mouse Settings
      • Custom Loading UI
      • Security Control
      • Analytics Feature
      • Additional Settings
    • Custom Integration Guide
      • Setting up your Frontend
        • Basic Iframe Integeration
        • Frontend and Application Communication
        • Stream States
        • Stream Control Commands
      • Sample Code for HTML and React
      • Blueprint Setup for Sending and Receiving JSON Messages from the Frontend in Unreal Engine
    • Additional Unreal Engine Features
      • Playing Media Files
  • Frequently Asked Questions
Powered by GitBook
On this page
  • Overview
  • What it does?
  • Why It Matters
  • Key Options & Features
  • How to Use
  • Tips & Best Practices
  • Advanced Customization
  1. Resources
  2. Quick Start Guide

Custom Loading UI

Dashboard - Getting Started

Overview

The Custom Loading UI feature allows you to personalize your project’s loading experience, delivering a branded and engaging touch while users wait for their session to begin. This guide outlines the available customization options and how to use them effectively.

What it does?

The Custom Loading UI module enables you to:

  • Upload a custom logo to be displayed during the loading process.

  • Add a splash screen (image or short video) to enhance visual appeal.

  • Set the position of your logo on the screen (Top Left, Top Right, Bottom Left, Bottom Right).

  • Choose the loading animation style (Text Only or Throbber).

  • Customize loading messages for each stage of the connection and setup process.

Why It Matters

Customizing your loading UI helps you:

  • Deliver a branded experience right from the first interaction.

  • Keep users engaged with custom visuals and messages during load times.

  • Communicate progress and reassure users with tailored messages.

  • Differentiate your project and create a memorable first impression.

Key Options & Features

1. Custom Logo

  • Supported formats: JPG, PNG, GIF

  • Max file size: 500KB

  • Logo Position: Select from Top Left, Top Right, Bottom Left, or Bottom Right.

  • This logo will be shown throughout the loading process and the stream session, reinforcing your brand.

2. Splash Screen

  • Supported formats: JPG, PNG, GIF, MP4 (for short videos)

  • Max file size: 1MB

  • A splash screen appears during loading, allowing you to display marketing images, intro videos, or brand visuals.

3. Loading Animation Style

  • Choose between Text Only or Throbber (animated spinner).

  • Preview your selection in real-time on the dashboard.

4. Custom Loading Messages

  • Display custom messages at each stage of the loading process:

    • Connecting to Server

    • Launching Experience

    • Finalizing Setup

  • These messages can be used to inform, entertain, or guide users as the session initializes.

  • Easily reset to default at any time.

How to Use

  • Navigate to the Loading UI tab in your project dashboard.

  • Upload your custom logo and choose its position.

  • Upload a splash screen (image or video) for a personalized loading screen.

  • Select your preferred animation style.

  • Edit the loading messages to fit your brand tone or keep users informed.

  • Click Save to apply changes or Reset to Default to revert.

Tips & Best Practices

  • Use high-contrast logos and splash screens for the best visibility.

  • Keep file sizes within limits for optimal loading speed.

  • Short, friendly loading messages improve user experience.

  • If using video for splash screens, keep it under 5 seconds for minimal impact on load times.

Advanced Customization

PreviousMouse SettingsNextSecurity Control

Last updated 13 days ago

If you’re looking for a more tailored loading experience, you can always refer to our . This guide provides step-by-step instructions and sample code for developers who want to go beyond the dashboard options and fully customize the loading UI through code.

Custom Integration Guide