Skip to main content

Series picker

Objectives
  • Get familiar with the series embed component, referred to as the picker.
  • Explore the different picker styles available.
  • See how the picker can be embedded on your website.
  • Learn more about the picker's progress tracking feature.
Demo of the PuzzleMe™ series feature. The series embed component is called the picker.

Introduction​

The picker is what we call the series embed. This is a component that you can place on your website for your audience to interact with and access all the puzzles and games inside of a series.

Some of the key features of the picker are:

  1. Allows the player to browse through all published puzzles within a series
  2. Enable the player to track their progress over time across multiple puzzles within a series[1]
  3. Facilitate scheduled publication of puzzles straight from the PuzzleMe dashboard

These features can be used creatively to curate an exciting player experience for your audience.

On tracking progress across puzzles, over time
This feature is enabled by default on every series picker. However, the default implementation is not the most effective solution. Read more here.

Picker styles​

Styling and theming for the picker is limited to 4 options:

  1. Publication Date and Title / Author
  2. Puzzle Title, "by" Author, and Subtitle
  3. Publication Date and Author
  4. Puzzle Title and Publication Date

You can view these options by going to the PuzzleMe dashboard and selecting the "Series Embed" button on the Series Panel. On the left side of the page, you'll see a dropdown for picker style which lists the options stated above.

Picker style dropdown.
Style 1: Publication Date and Title / Author
Style 2: Puzzle Title, "by" Author, and Subtitle
Style 3: Publication Date and Author
Style 4: Puzzle Title and Publication Date

Embedding the picker​

The process for embedding the picker is identical to the process of embedding a puzzle, with the exception that the embed code has to be obtained from the "Series Embed" button on the dashboard rather than the "Preview and Publish" button for individual puzzles.

Getting embed code for the series picker.
The remaining process is identical to the process for embedding a single puzzle.

Tracking progress across puzzles in a series​

Tracking puzzle progress within a series

PuzzleMe supports progress tracking across puzzles within a series. This feature is supported out of the box, but the implementation is not robust due to technical constraints on the web. Moreover, the effectiveness of the implementation is contingent on the embedding method used.

If you do not have technical expertise, we recommend you use the JS Embed method for embedding your puzzles and series pickers. Although even this is not perfect, it is more robust than the iFrame embed.

The most robust implementation requires significant technical competence. If you have an engineering team, please refer them to this guide for the implementation details.

Technical Details
Out of the box, PuzzleMe's user data persistence is achieved through the use of cookies that are placed in the end user's browser, with a copy resting on PuzzleMe's server. The effectiveness of this implementation varies between the iFrame Embed method and the JS Embed method.

Under the iFrame embed method, PuzzleMe's cookies are considered as 3rd party cookies by the browser. Browsers are increasingly restricting 3rd party cookies due to securtiy reasons. As a result, user data persistence support will be dropped entirely for the iFrame embed in the near future.

Under the JS embed method, PuzzleMe's cookies are considered as 1st party cookies by the browser. This is more robust compared to the iFrames, but there are limitations:
1. What if the user logs in from a different browser, or a different device?
2. What if the user clears their cookies/cache?

In both these cases, the user loses their progress since cookies do not persist across browsers or devices.

If the Partner maintains some type of user system on their own website, then PuzzleMe can offer user data persistence across browsers and devices. For more details on this, please refer to the technical documentation.