Last Updated: 10/25/2022, 8:53:15 AM

# App Editor

# Overview

App Editor allows you to apply changes to the view and configurations of your Launcher during runtime, meaning that no rebuild or redeployment is needed.

App Editor consists of two sections, Customization and Feature Flags:

  • Customization is used to customize the look and feel of the Launcher. It is also responsible for handling some configurations that will be used in the Launcher.
  • Feature Flag enables or disables features/menus within the Launcher and Player Portal.

NOTE

App Editor is currently in the early access phase so there are limitations within the features and functionalities. At the moment, it can only be used for Launcher customization with the Single Game Template. If you use the Multiple Games Template, some features such as customization, might not work. In a future release of the App Editor, we will include the ability to customize the Player Portal.

App Editor introduces template selection, allowing you to choose a template based on your requirements.

NOTE

We recommend that you don’t change the template in the middle of the customization as this could cause unexpected issues.

  • Single game template can be used if you decide to publish one game to the platform.
  • Multiple games template can be used if you decide to publish more than one game to the platform. This template is still in the development phase.

# Prerequisites

# Permissions

Permissions are used to grant access to specific resources within our services. Your account will automatically have the Super Admin role, which means that you have the following permissions for the App Editor (Customization and Feature flag) in the Admin Portal.

Usage Resource Permission
Access and manage customization ADMIN:NAMESPACE:{namespace}:CONFIG Create, Read, Update, Delete

# Game publishing setup

You must set up game publishing before you can use App Editor.

# Getting Started

# Configure general settings

Follow the steps below to configure the general settings for a single game:

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select Configurations and click on the General Settings tab at the top of the page.

    app-editor

  3. Choose your game template from the Template Config dropdown.

    • Single game template can be used if you want to publish one game to the platform.
    • Multiple games template can be used if you want to publish more than one game to the platform.

    NOTE

    This phase only allows you to configure settings for a Single Game Template as the Multiple Game Template is still in the development phase. Future phases will include multiple game settings.

    app-editor

    NOTE

    We recommend that you don’t change the template in the middle of the customization as this could cause unexpected issues.

  4. Select the App ID from the dropdown menu.

    NOTE

    The App ID field acts as a bridge between the uploaded game binary and the Launcher itself. The App Editor uses it to configure which App ID the user wants to use. If you do not select an App ID, the Launcher will not show any contents.

    app-editor

  5. The fields Installer Link, Launcher Update URL, and User Avatars are filled by default. You can ignore them.

  6. Upload your company logo, if you wish (this is optional). The logo will be visible in both the Launcher and Player Portal.

    app-editor

  7. When you’re done, click Save Changes.

Follow the steps below to configure the Player Portal’s footer.

  1. In the Admin Portal, go to the App Editor section in the left-hand menu.

  2. Select Configurations and click the Player Portal tab at the top of the page.

    app-editor

    The Player Portal Footer Configuration (Optional) page will appear.

  3. Fill in the fields you would like to use.

    app-editor

    • Copyright: Input your copyright name and date.
    • Privacy Policy: Input the URL of your privacy policy.
    • Legal: Input the URL of your legal page.
    • Terms of Use: Input the URL of your terms of use.
    • Additional Link: Use the two Additional Links to add your own custom links if required. Input the visible text name of the link under Label and add the link to the Link field.
  4. When you’re finished, click Save Changes. Your footer will be updated in your Player Portal immediately.

    app-editor

Follow the steps below to configure the social media links for a single game. This setting will apply to both the Player Portal and Launcher.

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select Configurations and click the Social links tab at the top of the page.

    app-editor

  3. Click the Add Social Link button.

  4. The Add Social Link dropdown will appear. Select your intended social media and type the link in the URL field.

    app-editor

  5. Click Add.

  6. Select the apps on which you want the social media to display by switching each toggle to ON or OFF in the Enabled on App column.

NOTE

You can display up to five social media links for each app.

# Select a pre-made Launcher theme

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select Launcher. The Launcher page displays.

    app-editor

  3. Choose the Launcher Theme.

    app-editor

  4. Select on one of the premade themes and then click Choose Theme to select it.

    app-editor

  5. When you’re done, click Choose Theme.

# Customization

Customizing a theme will update the look and feel of the Launcher. You can customize the global styles and content on each page. A preview screen will show the result of any changes you make.

There are two ways to publish the changes you make to a theme:

  1. Save as draft The changes are saved in the browser’s local storage. The changes will not be reflected in Launcher.
  2. Save & Publish The changes are saved in the browser’s local storage and will be reflected in the Launcher.

NOTE

The Autosave feature is set to save your theme to the browser's local storage every five minutes.

# Global styles

Global styles are the colors and fonts used throughout the Launcher. You can change these to suit your own style.

  • Global Colors affect the primary, secondary, text, overlay, background, card, and modal colors. The components that you can change are listed in the following tables.
  • Global Font affects the font style and size of title and body text.

# Global Colors

You can use the Global Colors feature to apply a new color to the components on multiple pages at once. In addition to streamlining your workflow, the Global Colors feature also helps you to make sure that your Launcher has a consistent color scheme on all components such as buttons, inputs, backgrounds, etc.

You can change the global colors for the components listed in the tables below:

Buttons
Buttons
Primary button Default state
Button background: Primary Color
Button text: Text Color

Hover/active/pressed state
Button background: Primary Color, Brightness: 85%
Button text: Text Color, Brightness: 85%

Disabled state (non-editable colors)
Button background: #687792
Button text: #B8BFCD
Outlined button Default state
Button outline: Text Color
Button text: Text Color

Hover/active/pressed state
Button outline: Text Color, Brightness: 85%
Button text: Text Color, Brightness: 85%

Disabled state (non-editable colors)
Button outline: #687792
Button text: #687792
Ghost button Default state
Button background: Text Color, Transparency: 0
Button text: Text Color

Hover/active/pressed state
Button background: Text Color, Transparency: 0.2
Button text: Text Color, Brightness: 85%

Disabled state (non-editable colors)
Button background: #687792, Transparency: 0.2
Button text: #687792
Input
Input
Text field Default state
Label: Text Color
Input background: Background Color
Input outline: Text Color, Transparency: 0.65
Input placeholder: Text Color, Transparency: 0.45

Focused state
Label: Text Color
Input background: Background Color
Input outline: Primary Color
Input text: Text Color, Transparency: 0.45

Filled state
Label: Text Color
Input background: Background Color
Input outline: Text Color
Input text: Text Color

Disabled state (non-editable colors)
Label: #687792
Input background: #232831
Input outline: #687792
Input text: #4C576B

Error state (partly non-editable colors)
Label: Text Color
Input background: Background Color
Input outline: #FF5252
Input text: Text Color
Helper text: #FF5252
Checkbox, radio, and toggle Default/inactive state
Label: Text Color
Input background: Text Color

Hover state
Label: Text Color
Input background: Text Color
Input outline: Primary Color

Active/selected state
Label: Text Color
Input background: Text Color
Input active: Primary Color
Input outline: Primary Color

Disabled state (non-editable colors)
Label: #687792
Input background: #232831
Input active: #4C576B
Input outline: #687792
Dropdown list Default state
Text: Text Color
Icons: Text Color
Background: Text Color, Transparency: 0

Hover/active/pressed state
Text: Text Color
Icons: Text Color
Background: Primary Color

Disabled state (non-editable colors)
Text: #687792
Icons: #687792
Background: N/A
Top navigation bar
Top navigation bar
Navbar background Background Color, Transparency: 0.65
Navbar contents Default state
Text: Text Color
Icons: Text Color

Hover state
Text: Text Color, Transparency: 0.65
Icons: Text Color, Transparency: 0.65

Disabled state (non-editable colors)
Text: #687792
Icons: #687792
Elevated components
Elevated components
Modal background Modal and Card Color
Card background Modal and Card Color
Dropdown Background: Modal and Card Color
Background outline: Overlay Color
Tooltip background Modal and Card Color
Modal background Modal and Card Color
Download components
Download components
Download bar Active state
Label: Text Color
Completed bar: Primary Color
Uncompleted bar: Text Color, Transparency: 0.65
Download information texts: Text Color

Paused state
Label: Text Color
Completed bar: #687792
Uncompleted bar: Text Color, Transparency: 0.65
Download information texts: Text Color
Social links
Social links
Social icons Default state
Icon: Secondary Color
Background: Overlay Color

Hover/selected state
Icon: Secondary Color, Brightness: 85%
Background: Overlay Color
Label: Text Color, Transparency: 0.65
Background
Background
Background Background Color
Overlays Overlay Color, Transparency: 0.85

The following steps will guide you through changing the global colors:

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select Launcher. The Launcher page displays.

    app-editor

  3. Go to the Global Styles section and update the Global Colors based on your preferences and which area you’d like to change.

    app-editor

  4. Click Save Edits. When you’re sure everything is all set, click Save and Publish to update your changes in the Launcher.

    app-editor

# Global Font

Follow the steps below to set the global font:

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select Launcher. The Launcher page displays.

    app-editor

  3. In the Launcher Customize page, go to the Global Styles section.

  4. Update the Global Font items based on your preferences.

    app-editor

  5. Update the Global Font items based on your preferences.

    app-editor

  6. Click Save Edits.

  7. Click Save & Publish.

# Contents

Customizing content is used to customize a specific area which only exists in each menu. At the moment only two pages can be customized, the Login page and the Game page.

# Login page

Use the steps below to customize the Login page:

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select Launcher. The Launcher page displays.

    app-editor

  3. Scroll down to the Pages section and click it to expand the section.

    app-editor

  4. Select Login.

    app-editor

  5. On the right sidebar, open the Content tab and edit the content based on your preferences.

  6. Here you can upload a background image and add a background overlay. To add a background overlay, click the Add Background Overlay option and adjust the overlay based on your preferences.

  7. When you’ve completed the steps, click Save Edits and then click Save & Publish.

# Main page

The following steps guide you through customizing the Main page:

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select Launcher. The Launcher page will be displayed.

    app-editor

  3. On the Launcher Customize page, expand the Pages section.

    app-editor

  4. Select Main.

    app-editor

  5. On the right sidebar, edit theGame Title based on your preferences.

  6. Here you can upload a background image or background overlay. To add a background overlay, click the Add Background Overlay option and adjust the overlay based on your preferences.

  7. To change or remove the background image, click Replace Image or Remove Image in the upload image panel

  8. When you’re done, click Save Edits then click Save & Publish.

# Game page

The following steps guide you through customizing the Game page:

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select Launcher. The Launcher page displays.

    app-editor

  3. On the Launcher Customize page, expand the Pages section.

    app-editor

  4. Select Game.

    app-editor

  5. Here, you’ll see a list of installation states to display on the Launcher. Select your intended installation status.

NOTE

The installation states are non-customizable and follow the global style customization.

# Versioning

App Editor versioning is a feature that detects and handles conflict resolution within the App Editor. It notifies you if there’s a conflict between changes made to the local and remote version of configs.

Type of config Description
Local This is saved in the draft in your browser’s local storage
Remote This is saved to the cloud, and will be updated if you publish your changes

When the versioning conflict happens, a modal tells you that there is a newer version of the config and that your current version will be overwritten by the latest one.

The modal will display if there is a conflict when you do either of the following:

# Reload the App Editor page

If you reload or reopen the Editor page but someone else has published customization changes with a higher version, the Newer version is detected modal will display to warn you.

In this modal, you can choose to:

  • Keep Local Changes - your version will be bumped and you keep your local customization.
  • Use Remote Changes - your version will be bumped and you will use the customization from the remote (cloud). Your local customization will be overwritten by the newer version.

app-editor

# Publish the changes

When you click the Save Edits button in the top right corner of the Customize Theme screen, the Save & Publish modal displays to allow you to choose what to do with the changes.

  • To save the remote changes and overwrite your local changes, click the Use Configuration button.
  • To lose the remote changes and save your local changes:
    • Type PUBLISH in the field.
    • Click the Publish button.

app-editor

# Feature Flags

Feature flags allow you to disable features with a single switch. This feature can be used for the Launcher and Player Portal. The tool itself consists of two sections, App flags and Experimental flags:

  • App flagsallow you to flag which features are visible in the Launcher and Player Portal.
  • Experimental flags are used for Accelbyte internal development purposes. This feature is not available.

Make changes to app flags as by following the steps below:

  1. In the Admin Portal, go to the App Editor section in the menu on the left.

  2. Select **Configuration. The Configuration page will be displayed.

  3. Select Feature flags tab

    app-editor

  4. If you want to change the app flags for Launcher, go to the Launcher section.

    app-editor

  5. If you want to change the app flags for Player Portal, scroll down to the Player Portal section.

    app-editor

  6. In the App flagsmenu, find the feature you want to flag.

    app-editor

  7. Use the toggle to switch the activation status of the flag.

  8. When you’re done, refresh the Launcher or Player Portal in order to see the changes.