Skip to main content

Social Play and sharing

Objective

Learn about PuzzleMe's social features - collaborative multiplayer solving and social media sharing - and understand how to implement them for custom integrations.

What is Social Play?​

Social Play is PuzzleMe's collaborative multiplayer feature that allows multiple users to solve puzzles together in real-time. It's perfect for team-building activities, educational settings, or simply enjoying puzzles with friends and family.

How Social Play works​

  • Real-time collaboration: Up to 4 players can solve the same puzzle simultaneously
  • Live updates: See each player's progress and contributions in real-time
  • Shared experience: All players see the same puzzle state and can contribute to solving it
  • Two modes available:
    • Code-based social play: Players join using a shared code
    • Link-based social play: Players join using a direct link (more advanced features)
Social play limits

PuzzleMe's social play feature currently supports up to 4 players simultaneously. While this covers most use cases, we can accommodate larger groups upon request. If you need support for more than 4 players, please contact us.

What is Social Sharing?​

Social Sharing allows players to share their puzzle scores and achievements on social media platforms with a single click. This feature helps increase engagement and can bring new players to your puzzles.

How Social Sharing works​

  • Multiple platforms: Share to Facebook, X (Twitter), WhatsApp, or copy to clipboard
  • Customizable messages: Configure share messages with placeholders for puzzle details
  • Two sharing options:
    • Share puzzle: Share the puzzle itself to invite others to play
    • Share results: Share completion time and score after finishing a puzzle
  • Automatic integration: Works seamlessly with JavaScript embed and WordPress plugin

Where sharing appears​

Social sharing options appear in two locations:

  • Hamburger menu: Available throughout the puzzle-solving experience
  • Completion modal: Appears after finishing a puzzle
note

If you are using our JavaScript embed code or WordPress plugin, then social sharing and social play is automatically handled for you. The technical implementation described in this section is only needed for custom iframe integrations.

The technical challenge​

Major browsers such as Safari, Chrome, and Firefox have been tightening their security policies recently. These security updates disallow a third party iframe (such as the PuzzleMe™ iframe) from reading the complete URL of the host page where the iframe is embedded. PuzzleMe needs the host page URL when users share a game on social media from within the iframe, or invite friends to join them in a game. It also needs this URL to open a deep link to a game. A deep link is a link that bypasses the games picker and directly opens a specific game.

To fix this problem, the host page needs to provide the URL of the puzzle page to the PuzzleMe iframe, along with the deep link parameters (which are typically a puzzle id to identify a specific puzzle, or a play id for an invitee to join a specific session). This can be done using some modifications to the embed code using JavaScript.

The solution​

The following parameters need to be appended to the iframe URL at the time of loading the puzzle. These parameters are case sensitive.

src​

The src parameter takes the URL encoded version of the full URL of your puzzle page. For example, if the puzzle is embedded on the page

https://www.newyorker.com/puzzles-and-games-dept/mini-crossword/2024/04/11

then the encoded value of the URL becomes

https%3A%2F%2Fwww.newyorker.com%2Fpuzzles-and-games-dept%2Fmini-crossword%2F2024%2F04%2F11

Please include only the full URL path, and do not include any query parameters (such as UTM parameters), or fragments (internal links denoted using #) in the value of the src parameter.

Here is an example embed code, where the src parameter is properly implemented. Note that the fully formed URL is a part of the iframe element's src.

<iframe src="https://cdn3.amuselabs.com/tny/crossword?id=35b6026b&set=tny-weekly&embed=1&compact=1&maxCols=2&src=http%3A%2F%2Fwww.newyorker.com%2Fpuzzles-and-games-dept%2Fmini-crossword%2F2024%2F04%2F11" style="height: 666px;"></iframe>

playId​

The playId parameter should be appended only if your puzzle page is loaded, with a playId parameter present in the URL query parameters. An example URL is

http://www.newyorker.com/puzzles-and-games-dept/mini-crossword/2024/04/11?id=35b6026b&set=tny-weekly&puzzleType=crossword&playId=01856353-5c38-4739-b803-c2c8df8e585d

id​

note

The id parameter should be embedded only if you are embedding a picker. If you are embedding a single puzzle, then you do not not need to explicitly check for the id parameter in the URL. It is already present in the original puzzle embed code.

The id parameter should be appended only if your puzzle page is loaded, with a id parameter present in the URL query parameters.

Points to remember​

  1. Your JavaScript should fully construct the iframe URL, with the src, playId and id (wherever applicable), before loading the puzzle iframe. The HTML on the page for the PuzzleMe iframe should not contain a src attribute before this JavaScript is run, and no other JavaScript code should set it. Otherwise, it will cause a double load of the iframe, slowing down the page and causing issues with accurate billing.
  2. You can use JavaScript to check if the playId or id parameter is present in the URL, by reading the contents of window.location.href (MDN documentation) .
  3. If the id or playId parameter is absent in the URL or contains an empty value, then do not append it to the iframe URL.

Table of contents