Theme customization examples

If Skype for Business users have added to their contacts list a set of links to some Pexip VMRs, you can change the avatars that are shown in the contact list to represent those VMRs.

Let's assume that the contact list contains links to Alice's and Bob's personal VMRs, and you want to change the default Pexip avatar so that it shows Alice's and Bob's images respectively instead. To do this, you create a new customized "Alice" theme that contains only Alice's image (saved as presence_avatar_image.jpg) and a new customized "Bob" theme that contains only Bob's image (also saved as presence_avatar_image.jpg). You then apply the "Alice" theme to Alice's personal VMR, and the "Bob" theme to Bob's personal VMR. Now, Skype for Business users will see Alice's and Bob's images as the avatars representing their respective VMRs.

If "theme_version": 2 is not present in a themeconfig.json file at the lowest level of the theme file hierarchy then it is assumed to be a legacy-style theme (see How do I know which files and configuration settings will be used in a particular VMR? for more information).

Therefore, even if you only want to customize a single image or sound file or the vendordata file, you must include in your ZIP upload a themeconfig.json file that contains a "theme_version": 2 switch, if you want to use new-style themes.

{
  "theme_version": 2
}

This example disables the video watermark that is applied to the video stream during a conference:

{
  "theme_version": 2,
  "disable_watermark_icon": true
}

This example changes the background image on 2 of the splash screens. It sets the background of the pin_entry screen to use the background_pin_entry.jpg file and the background of the waiting_for_host screen to use the background_waiting.jpg file.

Make sure that you include the specified background files (background_pin_entry.jpg and background_waiting.jpg in this example) in the theme ZIP file that you upload (at the same folder/directory level as the themeconfig.json file).

{
  "theme_version": 2,
  "splash_screens": {
    "screens": {
      "pin_entry": {
        "background": {"path": "background_pin_entry.jpg"}
        },
      "waiting_for_host": {
        "background": {"path": "background_waiting.jpg"}
        }
      }
    }
}

You can specify a default color for all text elements by adding a text_color setting to the themeconfig.json file, for example adding "text_color": "0xff0000" would make all text elements red by default.

Note that the text_color setting is not in the default themeconfig.json file.

This example sets the default color to green:

{
  "theme_version": 2,
  "text_color": "0x00ff00
}

This example changes the text shown on the splash screens. It sets the text associated with the please_enter_pin label (which is used on the pin_entry screen) to "Please enter the access code" and the text associated with the waiting_for_host label (which is used on the waiting_for_host screen) to "Waiting for the meeting to start". See Text overlays (labels) for a full list of the default text labels and the screens with which they are associated.

{
  "theme_version": 2,
  "splash_screens": {
    "labels": {
      "please_enter_pin": "Please enter the access code",
      "waiting_for_host": "Waiting for the meeting to start"
      }
    }
}

This example combines the previous two examples and shows how to change the background image and text on specific splash screens:

{
  "theme_version": 2,
  "splash_screens": {
    "screens": {
      "pin_entry": {
        "background": {"path": "background_pin_entry.jpg"}
        },
      "waiting_for_host": {
        "background": {"path": "background_waiting.jpg"}
        }
      }
    "labels": {
      "please_enter_pin": "Please enter the access code",
      "waiting_for_host": "Waiting for the meeting to start"
      }
    }
}

If you define elements for a splash screen, whatever you specify will completely replace all of the default icon and text elements for that screen. For example, if you want to add a new line of text to a screen, your elements object for that screen must define the original (default) icon and text as well as your new text.

This example adds an extra text element (colored red) to a splash screen. It defines a new label welcome_part2 with some associated text, and then applies that label to the welcome screen.

Note that icon_welcome.svg and the existing welcome label are also specified. For a vertical layout the elements must be specified in the order in which you want them to be stacked and you should also consider the offset_y value (the y-axis coordinate relative to the element above).

{
  "theme_version": 2,
  "splash_screens": {
     "labels": {
      "welcome_part2": "There are no other participants in the conference"
      },
    "screens": {
      "welcome": {
        "elements": [
          {"type": "icon", "path": "icon_welcome.svg", "offset_y": 200},
          {"type": "text", "label": "welcome", "offset_y": 100},      
          {
            "type": "text",
            "label": "welcome_part2",
            "offset_y": 20,
            "color": "0xFF0000"
          }
        ]
      }
    }
  }
}

If you define elements for a splash screen, whatever you specify will completely replace all of the default icon and text elements for that screen. For example, if you want to add a new line of text to a screen, your elements object for that screen must define the original (default) icon and text as well as your new text.

This example removes the text element from the welcome screen, but includes the definition for the icon image to ensure that it remains in place.

{
  "theme_version": 2,
  "splash_screens": {
    "screens": {
      "welcome": {
        "elements": [
          {"type": "icon", "path": "icon_welcome.svg"}
        ]
      }
    }
  }
}

This example removes all icon and text elements from the welcome screen (and leaves only the default background image).

{
  "theme_version": 2,
  "splash_screens": {
    "screens": {
      "welcome": {
        "elements": []
      }
    }
  }
}

Example use of helper lines on the error_invalid_license screen:

{
  "splash_screens": {
    "screens": {
      "error_invalid_license": {
        "helper_lines": {
          "horizontal": [300, 350, 432, 678],
          "vertical": [660, 960, 1260]
        }
        ...

This example shows the layout of the test_call_complete screen (these are the actual values that are used by default):

{
  "theme_version": 2,
  "splash_screens": { 
    "screens": {
      "test_call_complete": {
        "layout_type": "free_form",
        "background": {"path": "background_test_call.jpg"},
        "elements": [
          {
            "type": "text",
            "label": "test_call_complete",
            "height": 300,
            "offset_y": 361,
            "offset_x": 308,
            "align": "left",
            "font_size": 50
          },
          {
            "type": "icon",
            "path": "icon_test_call_complete.svg",
            "offset_x": 1259,
            "offset_y": 305,
            "height": 386,
            "width": 380
          },
          {
            "type": "icon",
            "path": "icon_inactive_page.svg",
            "offset_x": 872,
            "offset_y": 985,
            "width": 16,
            "height": 16
          },
          {
            "type": "icon",
            "path": "icon_inactive_page.svg",
            "offset_x": 952,
            "offset_y": 985,
            "width": 16,
            "height": 16
          },
          {
            "type": "icon",
            "path": "icon_active_page.svg",
            "offset_x": 1032,
            "offset_y": 985,
            "width": 16,
            "height": 16
          }
        ]
      }
    }
  }
}

Remember that if you define elements for a splash screen they will complete replace all of the default icon and text elements for that screen. Therefore if you want to modify, or add new configuration items such as color to these elements your elements object for that screen must define all of the original (default) icon and text values, as well as your new or modified values.

This example rearranges the position of the welcome splash screen's icon and text. It moves the existing welcome label towards the top of the screen (y=100), increases the size to 70px and changes its color to green. It then places the existing icon_welcome.svg icon under the label (y=0, remember this is the offset from the element above) and changes its height to 400px.

{
  "theme_version": 2,
  "splash_screens": {
    "screens": {
      "welcome": {
        "elements": [
          {
            "type": "text",
            "label": "welcome",
            "offset_y": 100,
            "font_size": 70,
            "color": "0x00FF00"
          },
          {
            "type": "icon",
            "path": "icon_welcome.svg",
            "height": 400,
            "offset_y": 0
          }
        ]
      }
    }
  }
}

Low-level, almost imperceptible background noise is added to the audio mix in conferences. This can be disabled by updating your theme configuration — either the default theme, or just in themes applied to specific services. Note that comfort noise is not sent towards Google Meet or Microsoft Teams meetings.

To disable comfort noise you need to insert the setting:
"disable_comfort_noise": true
into your themeconfig.json file.

For example, to disable comfort noise, and to ensure that new style themes continue to be used, your themeconfig.json file would contain:

{
  "theme_version": 2,
  "disable_comfort_noise": true
}