Social Overlay Overview

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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 Achievements page lists all achievements associated with your game and with the user’s progress.

This component shows the total number of completed achievements compared to the total number of 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.

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:

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:

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:

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:

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

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

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.

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.