About WorkAdventure maps

Opening a website when walking on the map

On your map, you can define special zones. When a player will pass over these zones, a website will open (as an iframe on the right side of the screen)

In order to create a zone that opens websites:

  • You must create a specific layer.
  • In layer properties, you MUST add a "openWebsite" property (of type "string"). The value of the property is the URL of the website to open (the URL must start with "https://")
A website can explicitly forbid another website from loading it in an iFrame using the X-Frame-Options HTTP header.

Integrating a Youtube video

A common use case is to use openWebsite to open a Youtube video.

The global Youtube page cannot be embedded into an iFrame (it has the X-Frame-Options HTTP header).

To embed a Youtube video, be sure to use the "embed" link. You can get this link be clicking "Share > Embed" in Youtube.

Find the URL of your video in the "embed Video" HTML snippet on Youtube
Put this URL in the "openWebsite" property

Triggering of the "open website" action

By default, the iFrame will open when a user enters the zone defined on the map.

It is however possible to trigger the iFrame only on user action. You can do this with the openWebsiteTrigger property.

If you set openWebsiteTrigger: onaction, when the user walks on the layer, an alert message will be displayed at the bottom of the screen:

The iFrame will only open if the user clicks Space

Setting the iFrame "allow" attribute

By default, iFrames have limited rights in browsers. For instance, they cannot put their content in fullscreen, they cannot start your webcam, etc...

If you want to grant additional access rights to your iFrame, you should use the openWebsitePolicy property. The value of this property will be directly used for the allow atttribute of your iFrame.

For instance, if you want an iFrame to be able to go in fullscreen, you will use the property openWebsitePolicy: fullscreen

The generated iFrame will have the allow attribute set to: <iframe allow="fullscreen">

Opening a Jitsi meet when walking on the map

On your map, you can define special zones (meeting rooms) that will trigger the opening of a Jitsi meet. When a player will pass over these zones, a Jitsi meet will open (as an iframe on the right side of the screen)

In order to create Jitsi meet zones:

  • You must create a specific layer.
  • In layer properties, you MUST add a "jitsiRoom" property (of type "string"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with the name of the instance of the map (so that different instances of the map have different rooms)

Triggering of the "Jitsi meet" action

By default, Jitsi meet will open when a user enters the zone defined on the map.

It is however possible to trigger Jitsi only on user action. You can do this with the jitsiTrigger property.

If you set jitsiTrigger: onaction, when the user walks on the layer, an alert message will be displayed at the bottom of the screen:

Jitsi meet will only open if the user clicks Space

Customizing your "Jitsi meet"

Your Jitsi meet experience can be customized using Jitsi specific config options. The jitsiConfig and jitsiInterfaceConfig properties can be used on the Jitsi layer to change the way Jitsi looks and behaves. Those 2 properties are accepting a JSON string.

For instance, use jitsiConfig: { "startWithAudioMuted": true } to automatically mute the microphone when someone enters a room. Or use jitsiInterfaceConfig: { "DEFAULT_BACKGROUND": "#77ee77" } to change the background color of Jitsi.

The jitsiConfig property will override the Jitsi config.js file

The jitsiInterfaceConfig property will override the Jitsi interface_config.js file

If your customizations are not working:
  • First, check that the JSON you are entering is valid. Take a look at the console in your browser. If the JSON string is invalid, you should see a warning.
  • Then, check that the JSON you are using is matching the version of Jitsi used.

Making a "silent" zone

On your map, you can define special silent zones where nobody is allowed to talk. In these zones, users will not speak to each others, even if they are next to each others.

In order to create a silent zone:

  • You must create a specific layer.
  • In layer properties, you MUST add a boolean "silent" property. If the silent property is checked, the users are entering the silent zone when they walk on any tile of the layer.

Playing sounds or background music

Your map can define special zones where a sound or background music will automatically be played.

In order to create a zone that triggers sounds/music:

  • You must create a specific layer.
  • In layer properties, you MUST add a "playAudio" property. The value of the property is a URL to an MP3 file that will be played. The URL can be relative to the URL of the map.
If you want to play the sound in a loop (useful for background noise/music), use the "playAudioLoop" property instead.
< Entries and exits Animations >