Skip to main content

Embedding your puzzle

Objectives
  • Learn about embedding.
  • Explore the various embedding options available within the PuzzleMe™ platform.
Prerequisites

This subsection requires some knowledge of HTML. If you'd like to do this on your own but do not know any HTML, MDN Documentation is a good resource for learning and reference as you go through this. Or if you have a team, you could share this with them.

Embedding​

Congratulations on creating your first crossword!

Now that you're familiar with the basics of game creation, let's see how you can share this game on your website. This process of sharing games is known as embedding.

Embedding the puzzle involves getting under the hood of your website, but the process mostly just involves some copy-pasting, so don't worry too much!

Technical Details
Some of PuzzleMe's exciting features such as Multiplayer Mode require a bit more work than just copy-pasting code. For this, please refer to the [technical documentation](/docs/integration/advanced/social-sharing).

Methods of Embedding​

Puzzles can be embedded on your website using these methods:

  1. iframes
  2. JavaScript (JS) Code
  3. WordPress Plugin

1. iframes​

a. Getting the embed code snippet​

Getting the iFrame embed code snippet

  1. On the Preview & Publish page of your puzzle, in the Embed panel, select the iframe embed tab.

  2. In the iframe height field, enter your iframe height (in pixels).

  3. At the bottom right of the Embed panel, click on the Copy button to copy the iframe code snippet to your computer.

b. Adding the embed code snippet​

Adding the iFrame embed code snippet to your webpage

  1. Open your webpage's source HTML file.

  2. Inside the <body> tag, paste the iframe code snippet as desired.

2. JavaScript embed code​

This process is identical to embedding iframes. Instead of using the iframe embed option on the Preview & Publish page, we will use the JS embed option.

Technical Details
None of the embed methods inject HTML directly into the 1st party context.
The JavaScript code injects an iframe into the designated div block at runtime. This means the resulting integration is practically identical under both, iframe and JavaScript embedding.

However, there are differences when we talk about deeper technical integration and customization. For this, please refer to the [custom integration documentation](/docs/integration/advanced/custom/).

a. Getting the embed code snippet​

Getting the JS embed code snippet

  1. On the Preview & Publish Page of your puzzle, in the Embed panel, select the JS embed tab. [Note that this should be auto selected if you've just opened the page.]

  2. In the iframe height field, enter your iframe height (in pixels).

  3. At the bottom right of the Embed panel, click the "Copy" button. This will copy the JavaScript code snippet to your computer.

b. Adding the embed code snippet​

Adding the JS embed code snippet to your webpage

  1. Open your webpage's source HTML file.

  2. Inside the <body> tag, paste the iframe code snippet as desired.

3. WordPress plugin​

Note

This subsection assumes that you have a functioning WordPress website and the ability to load plugins on it.

WordPress Plugins
  • If you run a WordPress instance on your servers, then you're free to install plugins.
  • If you use the official WordPress website to manage and host your WordPress instance, it depends on your account type. Note that plugins can only be installed on paid accounts.

a. Installing the WordPress plugin​

Installing the PuzzleMe WordPress Plugin

  1. Go to your WordPress admin dashboard.

    If your WordPress website is `https://www.sample-website.com/`, then your WP admin dashboard is typically `https://www.sample-website.com/wp-admin/`.

  2. On the left sidebar, hover over the Plugins tab and select Add New Plugin.

  3. On the top right side of the page, a search bar will appear. Here, type in PuzzleMe.

  4. In the search results, PuzzleMe for WordPress should appear. Click the Install Now button.

  5. After the plugin is installed, the Install Now button will change to Activate. Click on it.

  6. In a few seconds, you will be redirected. You should now see the Plugin Activated message at the top of the page.

Activating the PuzzleMe WordPress plugin

b. Getting the embed code snippet​

Getting the WordPress embed code snippet
  1. On the Preview & Publish page of your puzzle, in the Embed panel, select the WordPress tab.
  2. At the bottom right of the Embed panel, click the Copy button. Your WordPress code snippet is now copied to your clipboard.

c. Embedding a Puzzle on a Page/Post​

For demonstration, we'll embed a puzzle on a post, but you can use the same method to embed a puzzle on a page.

Open and edit a WordPress post

  1. On the left sidebar of your WordPress admin Dashboard, click on Posts.

  2. From the list of posts that appear, hover over the target post where you want to embed the puzzle.

  1. Under the post title, as you hover, an Edit button should appear. Click on it.
Adding the WordPress code embed to your post
  1. On your post, create a shortcode block. This can be done by typing /shortcode in a blank slot.
  2. Within the shortcode block, paste the WordPress embed code snippet that you copied from the PuzzleMe dashboard.
  3. Click on Update to save your post. Your puzzle should now be visible on your post!

Embedding Advice​

The implementation resulting from different embedding methods is nearly identical. However, subtle distinctions can affect other features. One particular concern is the persistence of user data: we want to ensure that your users do not have to restart their game from scratch each time they return to your website.

If you're a non-technical user, we advise you to use the JavaScript code embed. This is the ideal option to get the most functionality.

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.