Modify PartyKit's landing page

Learn how you can customize and modify an invite's landing page.

What is a PartyKit landing page?

We've explored how in πŸ‘ͺ PartyKit you're able to set it up so players can send their friends an invite for the latter to join the former's game. A PartyKit landing page is simply a page that the invitee (player receiving the invite) lands on after clicking the link. It serves as an introduction to the game (including optional information such as which level and difficulty the inviter is playing on). Below is an example of a landing page:

The landing page for an invite.The landing page for an invite.

The landing page for an invite.

Customizing the landing page

The SDK exposes a few methods that you are able to use to customize the landing page to suit your game. Below is a screenshot that highlights which parts you can customize:

Highlighted, the sections that you're able to customize in the landing page.Highlighted, the sections that you're able to customize in the landing page.

Highlighted, the sections that you're able to customize in the landing page.

  • partyMaxSize: This is the maximum party size you have; this refers to your game party and not Trail's.
  • partySize: This is the current count of players in the in-game party. Note that, non-Trail players (i.e. players that are playing, for example, on Steam and not Trail) will show up as anonymous users in the data. It is up to you how to handle them (whether to include them or not).
  • image1: This allows you to set a custom image to display to the invitee; we recommend customizing this to fit the level or scene the inviter is currently in.
  • text1 and text2: These allow you to provide information to the invitee about the current state of the game. You can set this to show the scene's difficulty level for example.

Each of the above has a label property that you can set up. A label is basically a header that appears just above the data as seen above. Note, both partyMaxSize and partySize appear by default, therefore therefore they have no label.

Now, let's look at how we can customize a landing page in code:

private void UpdateLandingPage() 
{
  // We create a new LandingPageInfoField and start assigning the different elements we want to customize
  var landingPageInfoFields = new PartyKit.LandingPageInfoField[]
  {
    new PartyKit.LandingPageInfoField() { ID = "image1", Label = "Map", Value = "the-gas-craters" },
    new PartyKit.LandingPageInfoField() { ID = "text1", Label = "Level", Value = "The Gas Craters" },
    new PartyKit.LandingPageInfoField() { ID = "text2", Label = "Difficulty", Value = "Extremely hard" },
    new PartyKit.LandingPageInfoField() { ID = "partySize", Label = "", Value = "1" },
    new PartyKit.LandingPageInfoField() { ID = "partyMaxSize", Label = "", Value = "4" }
  };
  
  Restul result = PartyKit.UpdateInviteLandingPageInfo(landingPageInfoFields);

  if (result.IsOk()) {
    Debug.Log("Update landing page info successful!");
  }
  else {
    Debug.LogWarningFormat("Update landing page info failed with reason: " + result);
  }
}

As mentioned in the πŸ‘ͺ PartyKit article, all members should update the landing page (despite the Party Leader being the only value taken into account) in case the leader leaves at any point in time.

🚧

Obtaining the content of the "Value" field.

At the moment, the process is to send the images you want to use on the landing page to your contact at Trail citing that they are for the landing page. Our team will upload them for you and then get back to you with the contents of the Value field for each image that you can use in your code.
In the future, we are planning a more streamlined process that allows you to directly upload and set the content of the Value field on your own.