Skip to main content

Rebranding / White labeling your world

info

This feature is currently in beta version. We are looking for your feedback.

You can customize WorkAdventure to put your own brand in value. Use the rebranding (or white label) features to:

  • Replace WorkAdventure logos with your own logos
  • Use your own domain name (instead of play.workadventu.re)
  • Customize all the meta tags of WorkAdventure

Rebranding settings are located in the World edition pop-up.

Using a custom domain

DNS setup

In order to use a custom domain for your WorkAdventure world, you will first need to have a dedicated domain or sub-domain for WorkAdventure.

You need administrator access to your registrar's DNS settings to configure the domain name properly.

Log into your registrar account.

Assuming your domain name is example.com and you want to create a world.example.com, you will need to create a new CNAME record, whose value will be whitelabel.workadventu.re..

Your settings will probably look like this:

Host nameTypeTTLData
worldCNAME1Hwhitelabel.workadventu.re.
caution

The final dot in whitelabel.workadventu.re. is important. Do not forget it!

Domain configuration

When the DNS configuration is done, go to your WorkAdventure account, in the world edition page, and head to the "White Label / Rebranding" section.

Screenshot of the domain setup

URL structure

When your custom domain is configured, the URL of your rooms will look like this:

https://world.example.com/@/[anything you want]

The /@/ part in the URL is compulsory. The rest of the path can be configured freely in the "slug" field of the room. The slug can contain "/" characters.

Pro tip

In order to have the same exits in your test setup and your production setup, we advise you to use the name of the map file as the slug. So if your map file name is castle.tmj, you can use castle.tmj as the slug of your room to have the same exitUrl in testing and in production.

Common questions

Can I host WorkAdventure in a path of an existing domain?

No, you cannot host your world in a sub-path of an existing domain. For instance, if your website is hosted at https://www.example.com, you cannot host your world at https://www.example.com/world/. You can however create a dedicated domain at https://world.example.com

Can I link a domain to several worlds?

Only one world can be linked to one domain, and conversely, only one domain can be used for one world.

Customize legals

You can find on the application several links to terms of use, privacy policy and cookie policy, you can choose to hide the links or replace them with your legal documents.

By default, we display our legal information:

Customize graphical assets

Most graphical assets of WorkAdventure can be modified from the World edition pop-up in the admin dashboard.

Next to your world name, click on the pencil icon. A popup will open. Go to the "Graphical assets" section:

Screenshot of the "edit your world" - Graphical Assets section

You can replace the following assets:

Color on woka scene, name scene and loading sceneScreenshot of the loading scene:
Screenshot of the loading scene
Screenshot of the woka scene:
WorkAdventure color on woka scene
Screenshot of the name scene:
WorkAdventure color on name scene
Logo to be used on the authentication pageWorkAdventure logo setting in the authentication login for white label.
Square logo to be used to toggle menu on the game pageSquare logo to be used to toggle menu on the game page.
Background image of the authentication (replaces the black background)Image of authentication page setting for WorkAdventure white label
Logo displayed on the loading screenImage of loading screen setting for WorkAdventure white label
Logo displayed on the loading screen of the co-website in the gameImage of loading co-website setting for WorkAdventure white label
Logo displayed on the "Enter your name" pageImage of start scene setting for WorkAdventure white label
Image displayed on the error pageImage of error page setting for WorkAdventure white label
Image displayed on the waiting pageImage of waiting page setting for WorkAdventure white label

Customize icons

Most woka scenes icons (images) of WorkAdventure can be modified from the World edition pop-up in the admin dashboard.

Next to your world name, click on the pencil icon. A popup will open. Go to the "Woka Customize Scene Icon" section:

Image of all customize settings for scenes icons.
Screenshot of the "edit your world" - Customize Woka Scenes Icon

Customize meta tags

To customize all the SEO of your WorkAdventure, go to your WorkAdventure account, in the world edition page, in the "White Label / Rebranding" section and at the "Meta tags" sub-section.

Website meta tags

Favicons

info

A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs.

To customize all the favicons of WorkAdventure you need to follow those steps :

  1. Select a size in the selector. Screenshot of the "edit your world" - Selector of size of favicons.Screenshot of the "edit your world" - All size of favicons.
  2. Click on the import button. Screenshot of the "edit your world" - A size of favicon.
  3. Repeat this for each size of favicon.

Meta title

info

A meta title, also known as a title tag, refers to the text that is displayed on search engine result pages and browser tabs to indicate the topic of a webpage.

Meta description

info

The meta description is an HTML tag that summarizes the webpage's content. It's the snippet of text, often around 160 characters long, that appears under your page title in search engine result pages.

Screenshot of Google result of "WorkAdventure" - Example for meta title and description.

Meta card image

info

“Meta images” are branded images that appear when a user shares an article or page from a website. They are vital to a brand's appearance and success on social media and beyond, but are often overlooked in the web design and development processes – even by the world's biggest brands.

Screenshot of the card result for "WorkAdventure" on social media - Example for meta customization

PWA meta tags

Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps. PWAs provide a number of advantages to users — including being installable, progressively enhanced, responsively designed, re-engageable, linkable, discoverable, network independent, and secure.

Manifest icons

info

An application icon is a unique image used to represent an app on a user's device.

To customize all the manifest icons of WorkAdventure you need to follow those steps :

  1. Select a size in the selector.
    Image of the selector to select a size of manifest icon.
    Screenshot of the "edit your world" - Selector of size of manifest icons
    Image of the selector to select a size of manifest icon.
    Screenshot of the "edit your world" - All size of manifest icons
  2. Click on the import button.
    Image of the new size of manifest icon to upload.
    Screenshot of the "edit your world" - A size of manifest icons
  3. Repeat this for each size of manifest icon.

Application name

The name (maximum of 45 characters) is the primary identifier of the extension and is a required field.

Application short name

The short_name (maximum of 12 characters recommended) is a short version of the extension's name. It is an optional field and if not specified, the name will be used, though it will likely be truncated. The short name is typically used where there is insufficient space to display the full name.

Main theme color

The theme color is a hint from your PWA that tells the browser what color to tint UI elements such as the address bar.