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. After creating your puzzle, click the Preview button.
  2. On the Preview page, click the Publish button in the top bar.
  3. On the Publish page, select the Embed tab.
  4. Ensure the iframe embed sub-tab is selected.
  5. Adjust the iframe height field if needed (in pixels).
  6. Click the Copy button at the bottom right to copy the iframe code snippet.

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 where you want the puzzle to appear.

2. JavaScript embed code​

This process is similar to embedding iframes, but you select the JS embed option on the Publish page.

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. After creating your puzzle, click the Preview button.
  2. On the Preview page, click the Publish button in the top bar.
  3. On the Publish page, select the Embed tab.
  4. Select the JS embed sub-tab.
  5. Click the Copy button at the bottom right to copy the JavaScript code snippet.
  6. Adjust the height field if needed in the copied code snippet (in pixels).

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 JS code snippet where you want the puzzle to appear.

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. After creating your puzzle, click the Preview button.
  2. On the Preview page, click the Publish button in the top bar.
  3. On the Publish page, select the WordPress tab.
  4. Click the Copy button at the bottom right. Your WordPress shortcode snippet is now copied.

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.