Referral program

A referral program is a method of attracting new users, where existing users invite their friends to the Web Shop via a special link. As a result, all participants of the program receive rewards, which increases their loyalty and motivation to continue interacting with Web Shop.

The referral program allows influencers and clan leaders to promote the Web Shop to their benefit and that of their subscribers. Invitees receive a reward for their first purchase, thus increasing the number of engaged users purchasing from the Web Shop.

• Providing as rewards one or several items of the following types:
  • virtual currency
  • virtual item
  • bundle with items
• Customization of the referral program widget.
• Generation of referral links.
• Changing the selected referral program for the invitee, before they make their first purchase.

• There can only be one referral program in the project.
• Users cannot invite themselves.

Inviting user flow

1. The inviting user goes to Web Shop.
2. The inviting user logs in or registers on the site.
3. The inviting user opens the referral program widget and reads the program’s conditions.
4. The inviting user gets the referral link in the widget.
5. The inviting user shares the link with the invitee.
6. The invitee follows the link and fulfills the program’s condition.
7. The inviting user opens the referral program widget and clicks the button to receive the reward.

Invitee flow

1. The invitee receives a referral link with a description of the program’s conditions and rewards.
2. The invitee goes to Web Shop via the referral link.
3. The invitee registers in the Web Shop.
4. The invitee makes the first purchase in the Web Shop.
5. The invitee receives the reward.

How to get it

Creating a referral program

1. Open your project in Publisher Account.
2. Click Store in the side menu.
3. In the Live-ops and promotion tools pane, click:
   • Connect — if you don’t have promotions or rewards.
   • Configure – if you previously connected promotions or rewards.

4. On the Referral program tab, click Create referral program.
5. Set the necessary parameters:
   • Specify the name of the referral program
   • Enter the description

6. Click Next.
7. Add rewards that the inviting users and invitees will receive:
   • To add a reward for the inviting user, in the Reward for inviting players section, specify the SKUs of the items and their quantity.
   • To add a reward for the invitees, in the Reward for invitees section, specify the SKUs of the items and their quantity.

8. Click Next.
9. Check the description of the referral program and click Create.

10. To activate the referral program, set the Referral program toggle to the on position.

After setting up the referral program, you can create and customize the widget.

Widget setup

1. On the referral program page, click Go to customizer.

2. Set up widget components for a set of states. To make the widget match the design of the game and site, you can customize it and configure the following characteristics:
   • a set of interface elements
   • colours of interface elements
   • button texts and headers considering localization
   • font type, color, and size

In the widget settings, you can also customise the content of the frequently asked questions block for the referral program in accordance with the specifics of your game.

3. Set up localization. All widget texts are translated into the project languages specified in Publisher Account in Project settings > General settings > Project languages section.
   To change the default translations, click on the text twice and enter your own.
4. Click Publish.
5. Copy the widget code in the opened window and add it to your website.

After adding the widget code to the site, the button to open the widget will be displayed on the page:

Adding widget code to your site

1. Open your project in Publisher Account.
2. Click Site Builder in the side menu.
3. In the Sites section, select your site and click Open Site builder.
4. Click Add Block.
5. Select Custom code block.
6. Add the referral program widget code.

Setting up authorization

If you use your own site interface, you need to implement functionality for user authorization in the widget on your side.

The authorization in the widget is carried out through the authorization on the site where the widget is embedded.

There are 2 scenarios depending on where the user authorizes — on the site or in the widget:

• If the user authorizes on the site, you need to pass the user’s authorization token to the widget using the onTokenChange() method. When the user logs out of the system, pass null as the method parameter.

• If the user authorizes through the widget, the widget will call the requestAuth function passed to it during initialization. In response, the site should return the user’s authorization token.

window.XESApi.init({
requestAuth: requestAuth,
token: getToken()
})

The widget API provides a set of functions and methods for authenticating a user in the widget:

How to make changes

Making changes to referral program settings

• change the list of items that are provided as rewards
• change descriptions

1. Go to created referral program.
2. Click Edit.

3. Update text or item SKUs.
4. Click Save.

After saving the changes, users will see the updated program conditions and receive new rewards.

Rewards that users have already received before the conditions update will not change.

Re-publication of the widget is not required after updating the conditions.

Making changes to the widget settings

1. Go to the widget settings.
2. Make the necessary changes.
3. Click Publish.

Widget states

The referral program widget can have different states depending on the type of user — inviting or invitee, user’s authorization status, fulfilment of program conditions.

The set of widget components includes interface elements for different states. You can configure components when setting up the widget.

Button to open the widget:

State	Description	Who it’s displayed to	Components that can be edited	Image
View details	Engaging the user to participate in the program.	Authorized users who are not yet participating in the program.	Background and text colours. Text of the widget open button and view details button text.
Waiting for authorization	Encouraging the user to log in through the widget.	Unauthorised users who have followed the referral link.	Background and text colours. Button texts.
Waiting for the first purchase	Encouraging the user to make the first purchase.	Users who have followed the referral link and logged in to the site.	Background and text colours. Button texts.
Receiving a reward	Encouraging the user to receive a reward.	Inviting users whose friends have met the program conditions, and they can receive a reward.	Background and text colours. Button texts.
Closing the widget	The widget is open, the button has turned into a × icon.	Authorized users who have opened the widget details.	Background and text colours. Button colour.
Default	The widget is closed.	Users who have closed the widget.	Background and text colours. Button text.

Widget page for the inviting user:

Description	Who it’s displayed to	Components that can be edited	Image
Referral program details. Button for sending the referral link. List of rewards with statuses: Claimed — reward for the invitee has been received. In progress — invitee has logged in to the site, but has not yet made a purchase. Claim — invitee has logged in to the site and made the first purchase. The inviting user can receive a reward.	An authorized inviting user, whose friend followed the referral link and logged in to the site.	Background and text colours. Widget text, button texts.
Frequently asked questions section	An authorized inviting user who clicked the program information button.	Adding and removing blocks with questions. Background and text colors. Content of questions and answers.

Widget page for the invitee:

Description	Who it’s displayed to	Components that can be edited	Image
The widget text encourages to make a purchase on the site. After making a purchase, the user is shown a notification about receiving a bonus.	Users who have followed the referral link and logged in.	Background and text colors. Widget text, button texts.