Unity: WebGL Add a Share Button

Creating and releasing a game is already a big achievement! But without strong media support it will most likely stay unnoticed to the masses. One of the easiest and cheapest ways to get some attention is to engage with the existing group of users and let them invite new ones. That can be achieved by adding a Share button. In this tutorial I’ll show you how to add one to your WebGL game.

Spoiler alert — it is harder than it sounds.

Prerequisites

I’m using Unity 2021.2.13. This tutorial will re-use the code from my previous one — Unity: Create your own Wordle in under 24 hours. Make sure to check it beforehand.

As always, project sources are available at GitHub, find the link at the end of the page.

There are 2 parts in this tutorial: Preparation and JavaScript bridging.

Part 1. Preparation

We will start off by checking how the sharing functionality works in Wordle. We can see that the behavior is different for mobile and desktop devices:

• For desktop the results are only copied to clipboard
• For mobile the native browser Share popup is shown

There is no copying of results on the Mobile version of original Wordle. Nevertheless, I decided to keep it for our clone version.

At this point the scope of changes is clear, so let’s create a Share button first. Just like in the original game, we will add the button on the Statistics screen:

Then, we will create a public Share method in the Statistics script and attach it to the button:

Lastly, we will implement the Share method. For now it will simply outprint the results in Debug.Log. It will require both the final result line number and the colors of each line’s cells that will be used to match one of the following emojis: 🟩, 🟨, ⬜

The Line script will be extended to provide the color of each cell:

Also, the previously created ErrorPopup script has been renamed to PopupModal.

If you run the game now, finish a level and copy the results from the Unity console you will see the following:

Note! I encourage you to check the changeset at Github.

Now the groundwork is done, let’s see if Unity supports Clipboard functionality.
One of the first code snippets found on the Internet will be this one: GUIUtility.systemCopyBuffer = valueToCopy;. Whilst it works fine for Editor (and presumably for Mobile) it doesn’t work for WebGL games.

Next result you will most likely stumble upon will be using a TextEditor:

Same story here — it works in Editor, but WebGL doesn’t support it.

And finally, you will find a couple of plugins that add Copy’n’Paste capabilities, but after looking at some of them I decided that it will be easier to write my own implementation.

That’s where we will look into a way to call “Native” code from Unity. In the WebGL case we will be using JavaScript.

Part 2. JavaScript bridging

In order to access js code from C# we will need to create a new js script with jslib extension and place it under a Plugins folder. Also, the file should have a predefined structure, such as:

Please, refer to the official documentation for more details.

Let’s create a new JS file — share.jslib where we will declare a CopyToClipboardAndShare function responsible for copying and sharing.

• As with everything else in the JS world, there are multiple ways to copy the data to the clipboard. In order to get the maximum coverage we will use modern Navigator Clipboard API with the fallback to textArea
• In order to trigger the share popup on mobile devices we will use Navigator Share API. Identifying the mobile device is not an easy task and the approach here relies on the user_agent string

Lastly, with the help of DllImport we will call that method in the Statistic script:

If you run the game using the Build And Run button now and press the Share button the text will be copied to the clipboard. And if you deploy the game to your server and run it from the mobile device you will see the share popup.

Afterwards

Well done finishing the tutorial! Now you know how to add a WebGL specific share button to your game.

Should you have any questions please leave them in the comments section below.

The project source files can be found at this GitHub repository. Check this commit for all the changes applied in scope of this tutorial.

You can check it all in action in Categorle, a variant where you are guessing a word 4–7 letters long in a given category.

For the most comprehensive list of Wordle-like games and resources online be sure to check out this page.

Support

If you like the content you read and want to support the author — thank you very much!
Here is my Ethereum wallet for tips:
0xB34C2BcE674104a7ca1ECEbF76d21fE1099132F0