Social Overlay Overview

A tour of the EOS Social Overlay as it appears to users.

8 mins to read

Technology

The Social Overlay uses web technology and is distributed through Content Delivery Networks (CDN) across the globe. This enables us to push new features and fix bugs independently of the Epic Online Services (EOS) SDK version your game is running.

The EOS SDK loads and initializes the Social Overlay, and then the user requests the latest Social Overlay version deployed to our CDNs. The EOS SDK and Social Overlay communicate via a bridge. During initialization, the EOS SDK informs the Social Overlay which features your EOS SDK includes. The EOS SDK also informs the Social Overlay which features you have enabled or disabled.

For rare cases when services are experiencing disruptions, Epic can enable or disable features in the Social Overlay to provide a good user experience during outages. Read more in the Navigation Bar section.

Philosophy On Iteration

Our goal is to provide the best user experience for both developers integrating their games with the Social Overlay and users interacting with it. To provide the best experience for all users, features will be added and adjusted in the future. Expect the core functionality to remain stable overall, but expect the text, look, and feel of the overlay to be improved and polished over time.

Initialization

After the application loads and initializes the Social Overlay, it will display a notification reading: You are now online on the Epic Social Panel. Press the hotkey combination in the notification to open the Social Overlay.

Notification indicating that user has successfully connected

When you open the Social Overlay for the first time, it will display your friends list. If you navigate to another page, close the overlay, then open the overlay, you will be on the last page you opened. This behavior may change in the future to improve the user experience.

Localization

The following table lists all the locales the Social Overlay currently supports:

Locale CodeLanguage
arArabic
deGerman
en-USEnglish (United States)
es-ESSpanish (Spain)
es-MXSpanish (Mexico)
frFrench
itItalian
jaJapanese
koKorean
plPolish
pt-BRPortrugese (Brazil)
ruRussian
thThai
trTurkish
zh-HansChinese [Simplified]
zh-HantChinese [Traditional]

The Social Overlay has various overrides and fallbacks in place to provide the next best locale based on the locale requested by users.

The overlay's navigation bar

The Navigation Bar enables users navigate to the various pages within the Social Overlay. The items listed in the Navigation Bar are primarily determined by the EOS SDK version and the features your project is using.

In rare cases when services are experiencing disruptions, Epic can hide Navigation Bar items. For example, if the Achievements service has disruptions, Epic can hide the Achievements button until the service issue is resolved. This avoids confusion and prevents bad user experiences.

Friends

Overview

The button for friends in the navigation bar

In EOS SDK version 1.6+, the Friends icon appears at the top of the Navigation Bar. The Friends page is also the first page that displays when opening the Social Overlay the first time. Friends is broken up into several sections that each display different information about the user’s friends list.

Status Panel

A status panel displaying a friend's information

The Status Panel shows the following:

  • A colored avatar with the first letter of the user's name.
  • The user's display name.
  • A bell icon which represents if the user has Do Not Disturb mode enabled or not.
  • The user's Joinable state.
    • Joinable means that invites are allowed
    • Not Joinable means that invites are not allowed.

Clicking the Status Panel opens a settings screen where you can toggle your Do Not Disturb status. If Do Not Disturb is enabled, you can get game invites, friend invites, completed achievements, and so on, but you will not receive any notifications.

Filter Friends

Filtering friends with the search bar

This component enables users to filter their complete list of friends. As the user types, the Social Overlay filters out all friends whose display names do not match the user’s input. The substring that matches the user's input is highlighted.

Invitations to Play

The list of invitations sent by friends

The first section of Friends shows incoming invites from the user’s friends. This list is displayed first for convenience and ease of use when receiving and accepting invites, but friends in this list are also shown in the appropriate section in the rest of the friends list.

For each invite, the user can choose one of two actions: Accept or Decline (represented by a button with X icon). After the user clicks one of these buttons, the button may briefly enter a disabled state while the EOS SDK handles the user’s requested action. If an error occurs during either action, an error notification displays.

For invite functionality with the Epic Games Launcher, be sure to map your deployments to your artifacts as well.

Playing <App Name>

A list of friends currently playing a game

The second section of Friends lists friends playing the same game as the local user. The Social Overlay determines which friends belong in this section by comparing the user’s app ID to friends’ app IDs. If matched, the friend will appear in this section of friends list.

The user always appears at the top of this list, and has the YOU label at the end of their display name. If the user is in a group with other friends, they will be overlaid on top of one another and do not have actions (see Same Group Friends ).

This section is sorted in the following order:

  1. You (current user)
  2. Same Group Friends, by display name, in alphabetical order
  3. Other Friends, by display name, in alphabetical order.

Same Group Friends

Friends playing a game together in the same group

Friends in the same group as the user (for example, if they are in the same party or the same game session) will be listed here and appear clumped together representing their friend group. Unlike other friends listed in this section, these users do not have actions.

Friend Playing Game

A friend playing a game by themselves, without any group

Friends that are not in your group will fill the rest of your Playing friends section. Two action buttons will display beside each user name: Join and Invite.

The Join button is disabled if the friend is not currently in a joinable state.

The Invite button is disabled if the friend is not allowing invites.

After the user takes action, both buttons may be disabled while EOS SDK handles the requested action. If an error occurs during either action, an error notification will be emitted.

Other Friends

A list of friends that do not meet previous criteria

The last section of the friends list is the user’s friends who did not meet the previous criteria. This includes, but is not limited to, friends playing other games, friends sitting in the Launcher, and friends who are currently offline.

This section is sorted in the following order:

  1. Friend's Presence State
    1. Online
    2. Away
    3. Extended Away
    4. Offline
  2. Display name, in alphabetical order

Achievements

Overview

If using Achievements in EOS SDK version 1.7+, the following icon will be added to the Navigation Bar, which navigates the user to the Achievements section.

The button for achievements in the navigation bar

The Achievements page lists all achievements associated with your game and with the user’s progress.

Total Progress

Bar showing progress for all achievements within a game

This component shows the total number of completed achievements compared to the total number of achievements.

Filter Achievements

This component will allow the user to filter the complete list of achievements. As the user types, the Social Overlay filters out all achievement Title and Description fields that do not match the user’s input.

Achievement Types

In Progress

Progress for a single achievement

In-Progress achievements are the first set of achievements to show in the list. This type of achievement displays the following:

  • Locked icon
  • Locked title
  • Locked description
  • Progress bar with % to completion

If the icon is not set or fails to load, the following icon will display by default:

Progress for an achievement with no icon set

Completed

Widget showing a completed achievement

Completed achievements are the second set of achievements to show in the list. This type of achievement displays the following:

  • Unlocked icon
  • Unlocked title
  • Unlocked description

If the icon is not set or fails to load, the following icon will display by default:

Achievement complete widget with no icon set

Locked

An achievement that has not yet been completed

Locked achievements are the third set of achievements to show in the list. This type of achievement displays the following:

  • Locked icon
  • Locked title (with lock icon suffix)
  • Locked description

If the icon is not set or fails to load, the following icon will display by default:

A locked achievement with no icon set

Hidden

An achievement that is currently hidden from the user

Hidden achievements are the last set of achievements to show in the list. This type of achievement displays the following:

  • Locked icon
  • Localized Hidden Achievement title

If the icon is not set or fails to load, the following icon will display by default:

A hidden achievement with no icon set

Notifications

Types of Notifications

Ready

Notification that displays when the social overlay is initialized

The Ready notification displays when the Social Overlay fully initializes and is ready to open.

Game Invite

Notification that displays when you are invited to a game

The Game Invite notification displays when a user’s friend has invited them to play a game.

Achievement Completed

Notification that displays when an achievement is completed

The Achievement Completed notification displays when a user earns an achievement.

The same fallback rules from Achievement Types apply to the icon in this notification.

Achievement complete notification with no icon set

Error

Error notification

The Error notification displays when the user makes a request and an error occurs. The notification attempts to provide context and supply a localized error message but can fall back to a generic localized error message.