Skip to main content

Using custom parameters

Objective

Understand how to use custom parameters to modify the appearance and enable/disable specific features on your embedded puzzles

You can unlock advanced features, modify several default settings and configurations in the puzzle player, and change the appearance of your puzzles by using custom parameters while embedding the puzzles.

  • Each of these parameters take a key and a value. The key and the value are separated by an equals sign. For example, to collect names of puzzle solvers, the parameter key is name and its value is 1. Thus, the parameter will be written in the format name=1
  • You can use multiple parameters in a single puzzle or picker embed. When multiple parameters are used, they are separated using an ampersand (&) sign. For example, when using both the name=1 and embed=1 parameters, they will be jointly specified as name=1&email=1 .

JS embed code​

In JS embed code, the custom parameters can be specified using the data-embedparams attribute, as part of the div with the class pm-embed-div . The parameters value must be enclosed within double quotes, and it should NOT start with an ampersand (&) . Whenever using custom parameters with JS embed code, always add the embed=js parameter to the embed code too.

Below is an example of a JS embed code, where parameters for collecting name and email are enabled. 

<!-- Include the CryptoJS library for hashing the user id before sending it to the PuzzleMe server. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<!-- Include the javascript library for embedding this puzzle. -->
<script id="pm-script" src="https://puzzleme.amuselabs.com/pmm/js/puzzleme-embed.js"></script>
<!-- Specify the Amuse Labs server name from where the puzzles will be served -->
<script>
PM_Config.PM_BasePath = "https://puzzleme.amuselabs.com/pmm/";
</script>
<!-- Specifies the puzzle to be embedded on the page. If you want to render multiple games on your page then you can copy paste it multiple times. -->
<div class="pm-embed-div" data-id="17b356c8" data-set="demo" data-puzzleType="crossword" data-height="700px" data-embedparams="name=1&email=1&embed=1"></div>

Important

Do not add the parameters as part of the data-puzzleType, data-set or data-id in attributes in the embed code. Please use only the data-embedparams attribute.

WordPress plugin​

In the WordPress shortcode, the custom parameters can be specified using the embedparams attribute. The parameters value must be enclosed within double quotes, and it should NOT start with an ampersand (&) .

Below is an example of a WordPress shortcode, where parameters for collecting name and email are enabled. 

[puzzleme set="demo" id="17b356c8" type="crossword" embedparams="name=1&email=1"]
Important

Do not add the parameters as part of the puzzle type, set or id in attributes in the shortcode. This is an unsupported workaround and future updates to our WordPress plugin might break your embeds. Please use only the embedparams attribute.

Please also do not place the parameters outside the shortcode body.

iframe embed​

When using iFrame embed, the custom parameters can be appended at the end of the src attribute of the iframe HTML element. The parameters should be placed inside the closing double quotes for the src attribute. No spaces must be present between the value of the src attribute and the custom parameters. They should be separated using an ampersand (&).

Below is an example of an iframe embed, where parameters for collecting name and email are enabled.

<iframe height="700px" width="700px" allow="web-share; fullscreen" style="border:none; width: 100% !important; position: static;display: block !important; margin: 0 !important;" src="https://puzzleme.amuselabs.com/pmm/crossword?id=17b356c8&set=demo&embed=1&name=1&email=1" aria-label="Puzzle Me"> </iframe>

When using a direct link, the custom parameters can be appended at the end of the puzzle URL. No spaces must be present between the puzzle URL and the custom parameters. They should be separated using an ampersand (&).

Below is an example of a direct puzzle link, where parameters for collecting name and email are enabled.

https://puzzleme.amuselabs.com/pmm/crossword?id=17b356c8&set=demo&embed=1&name=1&email=1