Web development is not my favorite thing, so my Unity WebGL game pages are pretty minimalist. This also makes them great for anyone looking to get started quickly!
For a preview of what we’re talking about, you can check out the Truce game page for an example of early alpha game while the A Broken Heart page has all the necessary download links (and skips the email request).
Get the Hierarchy Right
Design your page according to the priority of each of the elements. The main focus should be on the game with peripheral calls to actions for players to get more information or share with their friends
My design is easy to set-up, re-usable, and doesn’t distract from the game, but lacks visual appeal. I encourage you to make your page your own with layout changes, a custom background, logos, or any other else to make it look better. If you want to share your pages back here, that’d be awesome. For now, let’s get to it.
Features
To see exactly how I set-up all these features, you can view the source page on one of my games. You won’t be able to tell from the source, but it’s actually built from a php template to speed up the process. I’m happy to share it if there’s interest.
Sharing and Email
This is a big one and super easy to do. Emails are a great way to to keep your audience engaged if your game isn’t available yet. It’s a direct connection to your audience, keeps them engaged leading up to release, and may be a channel for you to feedback.
If you have a steam page, link it. Personally, as a player and a game creator, I would rather have a steam page ready, so players can add the game to a wishlist right away.
Sharing options are important as well. Self-promotion can be hard. The best way around it? Get other people to share for you! You may not get many shares, but you should be ready for them!
I use a script from Sumo.me. They’ll give you a script to add to the end of your web page. After doing that, you just need to select the features you want to use.
The free plan is sufficient to access all the features shown on my game pages. Once you’re set-up with an account, go to Forms -> List Builder to set up a subscription bar (the last option in Form Type) or choose another option like pop up if that’s your style. For social, go to Social -> Share -> Settings drag and drop the services you want to display.
By default, Unity WebGL absorbs all keyboard input, so your email sign up won’t work. Check out this quick fix to get it all working together properly.
MetaData: Look Good in Those Shares
Now that players can share your game, make sure it looks good in those shares. Set up the og: (Facebook) and twitter: tags with a title, description, image url, and any other data you want to add (like fb app id or twitter profile). You can check the Truce game page for an example. Once you’ve added them, test them using Facebook Share Debugger and Twitter Card Validator.
Handle All Audience Types: Don’t Forget the Press
So you’ve handled your gamers. They can play your game, subscribe for updates, and share it with their friends. All set? Not quite.
There’s a few more cases you want to handle. What if a member of the press sees your game? Add a link to your presskit. What if someone wants more? Let them explore more with a link to your main studio page. And you might as well throw a privacy policy in there for good measure. (And you will need to add a bit of legal text to use Google Play and Apple App store logos.)
Make it Easy for the Player to Play
Now, you’ve got a few extra bells and whistles, but don’t forget your core goal. Make sure the you don’t distract from your game and everything still works
Summary
All set! Not bad at all. If this article helped, you’d like to share improvements, or you want to show off your own game page, leave a comment and I’ll check it out.
Be First to Comment