App Editor

Overview

AccelByte Cloud’s App Editor allows you to apply UI and configuration changes to your apps in the Admin Portal while they are running, eliminating the requirement for rebuilding or redeploying. This feature is divided into two sections: Customization and Feature Flags. Customization allows you to easily modify the appearance and feel of your apps. Whereas menus on the Player Portal, and Login Website can be enabled or disabled using the Feature Flags option. The list of supported apps are:

• Player Portal
• Login Website
• Payment Station
• Legal

NOTE

Because the App Editor is still in early access, its capabilities and functionalities are limited. Some elements, such as customization, may not work properly if you use the Multiple Games Template.

Prerequisites

To use the App Editor, make sure the following conditions are met:

• You have the correct permissions
• You have set up game publishing

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

Set up game publishing

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

• Upload your game (opens new window) using the BuildUtil tool and record the App ID in the App Distribution section
• Set up and publish the Catalog (opens new window)

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 Settings

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

   

   NOTE

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

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

   

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

Page Settings

1. Fill in the Brand Name field with the names you would like to use. The Brand Name displays in the browser title bar on the Player Portal, Login, and Legal websites.

   

   NOTE

   The Launcher installer needs to rebuild before a brand name modification can take effect. Please reach out to AccelByte Support for assistance.

2. Fill the Page Title field with the structure format you would like to use. You can use a combination of variables {pageTitle} / {brandName}, names, or text. The Page Title displays in the browser title bar on the Player Portal, Login, and Legal websites.

   

   NOTE

   If you have questions about this feature or want to learn about its use case, read our FAQ (opens new window).

3. Fill the Copyright Text field with the appropriate data.

   

Logo & Icon Settings

For your company branding, you may upload up to four logos and one favicon to use within your apps. Unless otherwise specified in each respective app, whichever image is chosen as the default logo here will appear in all of your apps. Follow the steps below to configure the logo & icon:

1. Upload up to four images in the Logo Variants section and give a name to each image.

2. Upload your image in the Favicon section to set the favicon.

   

   NOTE

   If you delete alogo from the Admin Portal and it’s currently being used, the default logo will be used in its stead.

When you’re done, click Save Changes.

Configure Global Styles

Global Styles

Global styles are the colors and fonts used throughout the Apps which are:

• Player Portal
• Login Website
• Payment Station
• Legal app

NOTE

Launcher has a Local Style that also consists of color and font for itself. This Local Style is used to provide unique or specific customization for 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 the 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, Global Colors also helps you to make sure that your Apps have a consistent color scheme on all components such as buttons, inputs, backgrounds, etc.

There a two types of implementation for global color that affecting component in the Apps:

• Global Implementation is affecting all Apps section
• Case by case implementation is affecting specific section in the specific Apps

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

1. Global Implemetation:

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
Text Button (non-link)	Default State: Button text: Text Color Hover/Active/Pressed State: Button text: Text Color, Brightness: 85% Disabled State (Non-editable colors): Button text: #687792

Input

Input
Text field	Default state: Label: Text Color, Transparency: 0.65 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: Text Color Input text: Text Color 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
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 & Card Color
Card background	Modal & Card Color
Dropdown	Background: Modal & Card Color Background outline: Overlay Color
Tooltip background	Modal & Card Color
Modal background	Modal & 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

Player Portal Footer

Player Portal Footer
Footer top section background	Modal & Card Color
Footer top section contents	Default state: Text: Text Color Icons: Text Color Hover State: Text: Text Color, Transparency: 0.65 Icons: Text Color, Transparency: 0.65
Footer bottom section background	Background Color
Footer bottom section - Language Selector	Dropdown Select: Text: Text Color, Transparency: 0.65 Icons: Text Color, Transparency: 0.65 Option value dropdown: Text: Text Color, No Transparency Icons: Text Color, No Transparency Background: Modal & Card Color
Footer bottom section - Copyright text	Text: Text Color, Transparency: 0.65 Icons: Text Color, Transparency: 0.65
Footer bottom section - Menu text	Default State: Text: Text Color, Transparency: 0.65 Icons: Text Color, Transparency: 0.65 Hover State: Text: Text Color, No Transparency Icons: Text Color, No Transparency

2. Case by case Implemetation:

   a. Legal App

Legal App Components

Legal App Components
Header Bar	Background Color
Logo	Company Logo
Header with Company Name	Text:Title Text Background: Modal & Card Color
Page Background	Background Color

Document Filter Section

Document Filter Section
Country & language selection fields	Default State: Label: Text Color Input background: Background Color Input outline: Text Color, Transparency: 0.65 Input placeholderL Text Color, Transparency: 0.45 Focused 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
Document Filter Accordion Title	Label: Text Color
Document Filter list	Default State: Label: Text Color, Transparency: 0.65 Label Text: Body Text Hover State: Label: Text Color Label Text: Body Text Selected State: Label: Primary Color Label Text: Body Text

Document Navigator Section

Document Navigator Section
Document Navigator title	Label: Text Color, Transparency: 0.65 Label Text: Body Text
Document Navigator list	Default State: Label: Text Color, Transparency: 0.65 Label Text: Body Text Hover State: Label: Text Color Label Text: Body Text Selected State: Label: Primary Color Label Text: Body Text

Footer

Footer
Footer Row	Text: Body Text Background: Modal & Card Color
Copyright text	Label: Text Color, Transparency: 0.65
Empty State contents	Title: Body Text Title Color: Text Color Description: Body Text Description Color: Text Color, Transparency: 0.65

b. My Account Player Portal

My Account

My Account
Background	Background Color

Sidebar

Sidebar
Sidebar Background	Modal & Card Color
Sidebar Navigation	Default State: Link label color: Text Color Active State: Link label color: Text Color Active Arrow Icon: Text Color, Transparency: 0.65 Active indicator: Primary Color Background color: Primary Color, Transparency: 0.45

Account Sub Page

Account Sub Page
Account Sub Page Background	Background Color
Account Sub Page Main Header	Title text: Text Color Separator: Text Color, Transparency: 0.45

c. Store Player Portal

Store

Store
Store Background	Background Color
Store Page Header	Title text: Text Color
Store Tab Menu	Default state: Menu label: Text Color, Transparency: 0.65 Menu icon: Text Color, Transparency: 0.65 Active state: Menu label: Text Color Menu icon: Text Color Active indicator: Primary Color

Store Grid Item

Store Grid Item
Store Grid Item background	Default state: Background Color: Modal & Card Color, Transparency: 0.0 Hover state: Background Color: Modal & Card Color
Store Grid Item Title	Text Color
Store Grid Item Payment Option - discountedPrice	Text Color
Store Grid Item Payment Option - price	Text Color, Transparency: 0.45
Store Grid Item Payment Option - discountLabel	Background Color: Primary Color, Transparency: 0.45 Discount label: Text Color

d. Store Catalog Detail Player Portal

Store Catalog Details

Store Catalog Detail
Breadcrumbs	Parent label: Text Color Icon: Text Color Current label: Text Color, Transparency: 0.65

Catalog Overview

Catalog Overview
Catalog Overview Heading	Text Color
Catalog Overview Content	Text Color, Transparency: 0.65
Catalog Title Widget	Text Color
Catalog Purchase Widget - Payable price	Text Color
Catalog Purchase Widget - Payable price virtual	Secondary Color
Catalog Purchase Widget - Payable price strikethrough	Text Color, Transparency: 0.45
Catalog Purchase Widget - Payable price discountLabel	Background Color: Primary Color, Transparency: 0.45 Discount label: Text Color
Catalog Purchase Widget - Purchase Button	Primary Color

Detail Widget

Detail Widget
Gallery Slider button prev/next	Icon: Text Color Background: Overlay Color, Transparency: 0.45
Game Detail Info title	Text Color, Transparency: 0.65
Game Detail Info content	Text Color

Media Banner

Media Banner
Media Banner Overlay	Radial Gradient: Overlay Color, Transparency: 0.65 to Transparency: 0.0
Media Banner Title	Text Color
Media Banner Description	Text Color
Read More	Primary Color
Requirement title	Text Color
Requirement tabs	Default state: Menu label: Text Color, Transparency: 0.65 Active state: Menu label: Text Color Active indicator: Primary Color
Requirement item list - label	Text Color
Requirement item - title	Text Color, Transparency: 0.65
Requirement item - content	Text Color

System Requirement

System Requirement
Widget background	Modal & Card Color

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 Configurations and click the Global Styles tab at the top of page

   

3. Update the Global Colors based on your preferences and which area you’d like to change.

   

4. Click Save Changes

5. If you want to apply the global color to the Launcher as well, untick the Launcher checkbox.

   

6. When you’re sure everything is all set, click Apply Global Style to update your changes in all apps.

Global Fonts

You can use the Global Font feature to apply a new font to the Title and Body text on multiple pages at once. You can also use your favorite font families from Google Fonts if you’d like!

NOTE

We only support Google Fonts for the web font at the moment.

To change the global fonts, follow the steps below:

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

2. Select Configurations and click the Global Styles tab at the top of page

   

3. Select the Global Font items based on your preferences

   

4. To add a font from Google Fonts, choose Use custom web fonts.

5. Copy the code of your preferred font from Google Fonts and assign it to the Title and/or Body Text field, depending on whether you want the change to affect only text titles or body.

   

6. Click Save Changes

7. If you want to apply the global font to the Launcher as well, untick the Launchercheckbox on the Override Styles confirmation box that appears.

   

8. When you’re sure everything is all set, click Apply Global Styleto update your changes in all apps.

Configure Social Media Links

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.

   

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.

   

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

To ease your launcher customization, we provide a pre-made Launcher theme that can be used directly if you don’t want to customize the launcher color one by one.

Follow the steps below for able to use the pre-made theme for a single game. This setting will only apply to the Launcher.

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.

   

3. Choose the LauncherTheme.

   

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

   

Launcher Customization

You can customize a theme to update the look and feel of the Launcher. Customizing allows you to change both the Launcher local 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 and will not be reflected in the Launcher.
2. Save and publishThe 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.

Launcher also has two ways of customizing color and font:

1. Global Style, where you customize the Launcher styling from the Global Style section of the Configuration menu
2. Local Style, where you customize the Launcher styling using customization that specifically only applies to the Launcher only.

Global Styles

The following steps will guide you through applying global colors and global fonts for Launcher

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.

   

3. Switch the Use Local Styles toggle into the off state.

   

4. In the preview, it will directly apply the Global Style customization from the Configuration menu

   

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

   

Local Styles

Local Styles enables you to customize the Launcher’s colors and fonts.

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

Local Styles Colors

You can use the Local Style Colors feature to apply a unique and custom color to Launcher’s components on multiple pages at once. Local Style Colors not only streamlines your process, but it also ensures that Launcher has a consistent color scheme across all components such as buttons, inputs orbackgrounds.

You can change the Local Style 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
Text Button (non-link)	Default State: Button text: Text Color Hover/Active/Pressed State: Button text: Text Color, Brightness: 85% Disabled State (Non-editable colors): Button text: #687792

Input

Input
Text field	Default state: Label: Text Color, Transparency: 0.65 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: Text Color Input text: Text Color 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
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 & Card Color
Card background	Modal & Card Color
Dropdown	Background: Modal & Card Color Background outline: Overlay Color
Tooltip background	Modal & Card Color
Modal background	Modal & 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 Local Style colors:

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.

   

3. Switch ON the Use Local Styles toggle.

   

4. Go to the Color panel section and update the Colors based on your preferences and the areas you’d like to change.

   

5. Click Save Edits.

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

   

Local Style Font

Follow the steps below to set the Local Style font:

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.

   

3. Switch ON the Use Local Styles toggle.

   

4. Go to the Font panel section and update the Font items based on your preferences.

   

5. Click Save Edits.

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

   

Launcher Contents

App Editor pushes your creativity even further by allowing you to personalize specific areas in 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 will be displayed.

   

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

   

4. Select Login.

   

5. On the right sidebar, edit the Login pop-up content based on your preferences.

   

6. Here you can also upload a background image and add a background overlay. To add a background overlay, tick 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’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.

   

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

   

4. Select Main.

   

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

   

6. Choose Footer Logo based on your preference.

   

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

   

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

   

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

   

Non-Customizeable page

You can check the result of Global Style or Launcher Local Style customization in the different state or page in the Launcher through the preview page.

Non-Customizeable pages consist of:

1. Game page
2. Store page
3. Account page
4. Setting page

The following steps guide you through the checklist of pages on the Non-customizeable 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.

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

   

4. Select your Non-Customizable page preference

   

5. Here, you’ll see a list of states or sub-pages to display on the Launcher.

   

6. Select your intended sub-pages preview.

   

Player Portal Customization

You can customize the look and feel of the Player Portal, such as the home page redirection, footer configuration or logo on each page. For better visualization, a preview screen will show the result of any changes you make.

Page Setting Configuration

Page Setting Configuration lets you disable the home page. Instead, you can set the home page redirection URL and site brand URL on Player Portal.

Follow the steps below to configure the Player Portal page setting:

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

2. Select Player Portal. The Player Portal page will be displayed.

   

3. Click Disable Player Portal home page checkbox and type the redirection URL or site brand URL you would like to use instead.

   

   

   • Redirection URL: Input the URL of your home page redirection.
   • Site Brand URL (Optional): Input the URL of your site brand redirection

4. Click Save Changes. Your home page redirection will be updated in your Player Portal immediately.

   

Player Portal Footer Configuration

In the Player Portal Footer Configuration, you candisplay hyperlinks for privacy policy, legal, terms of use and any additional links. This setting only applies to Player Portal.

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 Player Portal. The Player Portal page will be displayed.

   

   The Player Portal Footer Configuration page will appear.

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

   

   • 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 needed. Input the visible text name of the link under Label and add the link to the Link field.

4. Click Save Changes.

   

Player Portal Contents

You can check the result of Global Style customization in the Player through this preview and setup Company Logo.

The following steps will guide you changes Company Logo on Player Portal:

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

2. Select Player Portal. The Player Portal page will be displayed and then click the Preview button.

   

3. Player Portal Preview page will be displayed.

   

4. Expand the right sidebar

   

5. Choose Header Logo & Footer Logo based on your preference.

   

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

   

Non-Customizeable page

You can check the result of Global Style customization in the different pages in the Player Portal through this preview page.

Non-Customizeable page are consist of:

1. Store page
2. Account page

The following steps guide you through the checklist of pages on the Non-customizeable page:

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

2. Select Player Portal. The Player Portal page will be displayed and then click the Preview button.

   

3. On the Player Portal Customize page, expand the Pages section.

   

4. Select your Non-Customizable page preference.

   

5. Here, you’ll see a list of states or sub-pages to display on the Player Portal.

   

6. Select your intended sub-pages preview.

   

Login Website

Third-Party Login Configuration

Third-Party Login Configuration lets you provide login choices from Third-party platforms on the Login Website.

NOTE

This feature only determines which Third-party login methods appear on the Login Website. If you have yet to set up Third-party login integrations or would like to add more, read Third-party Platform Integration.

To add Third-party login choices, follow the steps below:

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

2. Select Login Website.

   Login Website Configuration screen will be displayed.

   

3. In the Third-Party Login Platform menu, find the login methods that you would like to expose in the Login Website.

   

4. Use the toggle to switch the visibility status of the Third-Party Login methods.

   

5. When you’re done, refresh the Login Website in order to see the changes.

Login Website Contents

Login Website sub-menu provides a way to set up your company logo as well as view the results of the Global Style customization for the app by clicking the Previewbutton in the upper-right corner.

To change the logo on the Login Website, follow the steps below:

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

2. Select Login Website.

   Login Website Configuration page will be displayed and then click Preview button.

   

3. Login Website Preview page will be displayed.

   

4. Expand the right sidebar.

   

5. Choose Header Logo based on your preference

   

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

   

Login page

The following steps will guide you through checklist of states within the Login Website:

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

2. Select Login Website.

   Login Website Configuration page will be displayed and then click Previewbutton.

   

3. Login Website Preview page will be displayed.

   

4. On the Login Website Preview page, expand the Pages section.

   Here, you’ll see a list of IAM screen to display on the Login Website.

   

5. Select your intended screen

   

Payment Station

You can check the result of Global Style customization in the different pages in the Payment Station through this preview page.

NOTE

The Payment Station pages are non-customizable and follow the global style customization.

The following steps will guide you to see Payment Station preview:

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

2. Select Payment Station.

   The Payment Station page will be displayed.

   

3. Switch between Launcher and Player Portal view.

   

The following steps guide you through the checklist of pages on the Non-customizeable page:

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

2. Select Payment Station. The Payment Station page will be displayed.

   

3. On the Payment Station Preview page, expand the Pages section.

   

4. Select Payment Station.

   

5. Here, you’ll see a list of sub-pages to display on the Payment Station.

   

6. Select your intended sub-pages preview.

   

Twitch Drop Integration

Twitch Drop integration enables you to activate the manual claim flow for Twitch Drop items in the Player Portal and customize the page's look and feel (e.g., the logo, colors, and background). Players manually trigger Twitch Drop item claiming through the Player Portal and get items granted to their entitlement.

Prerequisites

Before you enable Twitch Drop integration, ensure you configure the following:

• Register your organization (opens new window) with Twitch Developer

• 3rd-party login config (opens new window) and configure Twitch login

• 3rd-party store integration (opens new window) and configure Twitch store integration

• Create a Twitch application for drops (opens new window) and configure drop settings

• Creating store (opens new window) and and store item (opens new window) for Twitch Drop reward

  TIP

  To integrate the item with Twitch Drop, set the 3rd-Party Store Integration field to Twitch when creating the store item.

• Configuring Twitch Drop reward (opens new window) in Twitch developer console

  TIP

  The reward id on the Twitch developer console is a combination of {namespace}-{SKU No.}.

Creating IAM Client ID

To enable the Twitch Drop feature, create a public ClientId in the publisher/game namespace where you configure the reward. Follow the create a client guide (opens new window) to create the IAM Client ID, and add this as the redirect URL:

• https://{playerportal_base_url}/twitch-drops/claim
• https://{playerportal_base_url}/twitch-drops/claim?step=reclaim

TIP

• You will also need to add https://{playerportal_base_url}/twitch-drops/claim?step=reclaim into your Twitch application OAuth Redirect URLs in the Twitch Dev Console.
• To enable Twitch Drop for multiple games, create the IAM ClientId in each game namespace where you configure rewards.
• If you're using Twitch Drop widget outside of AB Player Portal, ensure you register the Twitch Drop Widget redirect URL to your website client in AB Admin Portal, and Twitch application Oauth Redirect URLs in the Twitch Dev Console.

Customizing the UI

Follow these steps to customize the Twitch Drop UI in the Player Portal:

1. Before you begin, ensure you've authorized the Admin Portal and selected the Publisher namespace. Go to App Editor > Twitch Drop

   

2. Input the Twitch game info.

   

   TIP

   • Input the namespace where you configure the reward store item.
   • Input the IAM Client ID you created previously
   • Input the Twitch Game Id from the Twitch Dev Console.
   • Enable Twitch Drop for multiple games by clicking Add more.
   • If you configure multiple Game Ids and Game Names, the Player Portal displays a select box for players to choose their Game before claiming the Drop items.

3. Add a Streamer Info link so players can view the streamer schedule.

   TIP

   Adding the Streamer info link is optional; leave the input empty by disabling the Show View Streams Button.

   

4. You can also upload a background image and add a background overlay. To add a background overlay, click Enable Overlay. You can also make adjustments to the overlay based on your preferences.

   TIP

   The font family and color follow the global UI configuration.

   

5. Click Save Changes on the top right of the page to finish the configuration.

   

Enabling Twitch Drop in the Player Portal

Follow the steps below to enable Twitch Drop in the Player Portal:

1. Before beginning, ensure you have authorization to the Admin Portal and select the Publisher namespace. Go to App Editor > Configurations > Feature Flags > App Flags.

   

2. In the Player Portal section, enable or disable the Twitch Drop feature.

   

To get more information about customizing the Twitch Drop UI, refer to the UI Editor documentation.

Once you have enabled the Twitch Drop feature, you can access it through the AccelByte Player Portal under the Events menu in the page header.

Legal

Legal Contents

You can check the result of Global Style customization in the Legal through this preview as well as set up your company logo.

To change your company logo on the Legal page, follow the steps below:

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

2. Select Legal. Legal Preview page will be displayed.

   

3. Expand the right sidebar.

   

4. Choose the Header Logo based on your preferences.

   

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

   

Legal page

The following steps will guide you through checklist of pages within the Legal:

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

2. Select Legal. Legal Preview page will be displayed.

   

3. On the Legal Customize page, expand the Pages section. Here, you’ll see a list of Legal pages to display on the Legal.

   

4. Select your intended screen.

   

Versioning

The App Editor’s 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 a versioning conflict occurs, a modal will tell 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 appear 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 and a 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 storage (cloud). Your local customization will be overwritten by the newer version.

  

Publish the changes

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

1. Tosavethe remote changes and overwrite your local changes, click the Use Configurationbutton.

2. To lose the remote changes and save your local changes:

   • Type PUBLISHin the field.
   • Click the Publish button.

   

Feature Flags

Feature flags allow you to disable features with a single switch. This feature can be used for the Launcher, Player Portal, and Login Website. This feature or **App flags,**allow you to flag which features are visible in the Launcher, Player Portal, or Login Website.

Make changes to app flags to enable or disable a feature 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 the Feature flags tab

   

4. If you want to change the app flags for Launcher, click Launcher to expand the launcher section.

   

5. If you want to change the app flags for Player Portal, click Player Portal to expand the Player Portal section.

   

6. If you want to change the app flags for Login Website, click Login Website to expand the Login Website section.

   

7. In the App flags content menu, find the feature you want to flag.

   

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

   

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