Rules and requirements for customized themes

We recommend using the Pexip branding portal (https://webapp2-branding.pexip.io/) to customize your themes. The portal provides an easy way to change the text, images, splash screen layouts and some of the settings that are used in themes, and it generates a ZIP file that you can upload via the Administrator interface. Note that you cannot change the audio files via the branding portal.

If you want to manually customize your own themes, or have more advanced customization requirements, the following sections list the complete set of audio, configuration, endpoint data image and custom layout files that can be used to configure each theme. They include the requirements for each of those files, including how to manage video watermarking, content classifications, and information on which files are relevant to themes used by Call Routing Rules.

Theme ZIP file

When creating or editing a theme, you upload a single ZIP file containing your own customized version of one or more of the files described here. The ZIP file does not need to contain the complete set of files or settings, just the files or settings that you want to use in place of, or as an extension to, those from the default Base theme.

If, for example, you are replacing one of the default background JPGs, icon SVG files or audio files, then you should ensure that you use the same file name as the file you are replacing. If you are using additional background or icon files that you are applying to a subset of screens, then you must also include those new files in your ZIP file.

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.

If any errors are reported when trying to upload your own manually-created ZIP file, such as "Invalid file in theme: themeconfig.json", you must fix the errors and then try to upload the ZIP file again. Any errors in the themeconfig.json are typically due to invalid JSON structures, such as missing commas between any key value pairs, or having a comma after the last key value pair in any object. Graphics file related errors are typically caused by incorrect image resolutions or using an invalid filename.

Audio (sound) files

You can replace any of the audio files by using your own version of the file in your customized theme. You must use the same file name as the file you are replacing. All audio files must be:

  • .WAV format
  • RIFF (little-endian) data, WAVE audio, Microsoft PCM, 16 bit, mono 48000 Hz

Points to note:

  • mono and 48000Hz are essential - audio files that do not meet these requirements will fail to upload.
  • The volume level of the audio recording is important - use the default Pexip Infinity prompts as a guide.
  • Some endpoints may take a few seconds after a call connects before they are able to receive audio. For this reason, we have included a 2-second pause at the start of any audio files that may be played when a user first connects to Pexip Infinity. We recommend that you include a similar pause; use the default Pexip Infinity files as a guide.

If you have used the Pexip branding portal to generate your theme ZIP file and you also want to customize the audio prompts (you cannot currently customize the audio files via the branding portal), then you must add your customized audio (wav) files to the ZIP file generated by the branding portal.

The following table lists the default audio files and their content, which is contained within the Base theme:

Theme configuration file (themeconfig.json)

The themeconfig.json file is the theme's primary configuration file. It is a JSON dictionary that specifies the background and layout of the splash screens used when joining a conference (such as the Welcome screen and PIN entry screens), specifies which image files are used, and controls some of the features and overlays that are used within a conference. It does not control any of the audio (sound) elements of the theme.

Whenever you include a themeconfig.json file in your customized theme, it must contain: "theme_version": 2. If it does not contain this setting, then it is assumed to be a legacy-style theme (see Legacy themes file requirements for more information).

If any settings within your customized themeconfig.json file are not specified, Pexip Infinity will simply use the equivalent setting from the Base theme or use default behavior. For example, if the only thing you want to customize from the default settings is to disable watermarks, then your themeconfig.json file only needs to contain the disable_watermark_icon setting (in addition to "theme_version": 2). See How do I know which files and configuration settings will be used in a particular VMR? and Theme customization examples for more information.

Here is the default (Base theme) contents of themeconfig.json:

{
    "dtmf_conference_control_commands": {
        "*6": "toggle_self_mute",
        "*7": "toggle_lock",
        "*5": "toggle_guest_mute",
        "*4": "toggle_pres_in_mix",
        "*9": "toggle_multiscreen",
        "*8": "cycle_layout",
        "##": "end_conference"
    },
    "dtmf_allowed_layouts": ["1:7", "ac", "1:21", "2:21", "2x2", "3x3", "4x4", "5x5", "1:0", "1:33"],
    "plus_n_indicator_text_color": "0xFFFFFF",
    "recording_indicator_text": "Recording",
    "conference_locked_indicator_text": "Conference locked",
    "test_call_service_media_delay": 2,
    "disable_streaming_indicator": false,
    "disable_conference_locked_indicator": false,
    "streaming_indicator_text": "Streaming enabled",
    "public_streaming_indicator_text": "Public streaming enabled",
    "enable_dtmf_conference_control": true,
    "disable_watermark_icon": false,
    "disable_watermark_mute_icon": true,
    "plus_n_indicator_bg_color": "0x323232",
    "test_call_service_disconnect_timeout": 10,
    "theme_version": 2,
    "conference_unlocked_indicator_text": "Conference unlocked",
    "conference_locked_indicator_n_waiting_text": "{number_of_waiting_participants} waiting for host",
    "transcribing_indicator_text": "Transcribing"
}

The default settings within the Base themeconfig.json file are described below. Note that the Base file does not contain any text overlay or splash screen layout controls, but you can add your own controls to your customized file — as described in this topic — to override the default behavior.

The themeconfig.json file must be UTF-8 encoded, therefore when editing the file you should use a UTF-8 capable editor. We recommend that you do not use Notepad on Windows computers.

Endpoint data (vendordata.json)

The vendordata.json file contains information about videoconferencing endpoints from different manufacturers.

It is used to determine whether a specific endpoint is a single-screen or two-screen device (unless the endpoint explicitly signals to Pexip Infinity how many screens it has). This information is used when determining if presentation content could be sent as part of the layout mix when using Adaptive Composition or the Teams-like layout, and if multiscreen participant display is supported:

  • Single screen endpoints:

    • Presentation content may be sent as part of the layout mix, or as a separate presentation stream.
    • Multiscreen participant display is not available.
  • Dual screen endpoints:

    • Presentation content is always sent as a separate presentation stream.
    • Multiscreen participant display is available for the supported layouts.

      For H.323 endpoints, the vendordata.json file cannot identify the number of screens (single or dual) and the endpoint cannot explicitly signal how many screens it has, thus they cannot use multiscreen participant display by default. Multiscreen participant display can only be enabled by sending a *9 (toggle to multiscreen) DTMF command to the conference. See Using a DTMF keypad to control a conference and Determining if an endpoint has single or multiple screens for more information.

See Receiving the presentation stream as part of the layout mix (Adaptive Composition) and Multiscreen participant display for more information.

It is also used for Google Meet audio denoising interoperability to configure a list of endpoints that perform their own in-built denoising. See Configuring Pexip Infinity as a Google Meet gateway for more information.

The default vendordata.json file is shown below:

{
    "endpoints_by_display_count": {
        "1": [
            "Cisco-Board",
            "Cisco-DX",
            "Cisco-Desk",
            "Cisco-EX60",
            "Cisco-EX90",
            "Cisco-MX200",
            "Cisco-MX300",
            "Cisco-RoomKitMini",
            "Cisco-SX10",
            "TANDBERG/257",
            "Yealink VC200",
            "PolycomRealPresenceTrio",
            "PolycomStudioX30",
            "Polycom (HDX 4000",
            "Polycom (HDX 4500",
            "Polycom (HDX 6000"
        ],
        "2": []
	},
	"built_in_denoising": [
	]
}

The JSON dictionary in the file contains:

  • An endpoints_by_display_count object, which contains two further objects:

    • "1": this contains an array of names of single screen endpoints (the absence of a closing bracket for the HDX device names is deliberate).
    • "2": this contains an array of names of dual screen endpoints (this array is empty by default).
  • A built_in_denoising object that contains an array (empty by default) of endpoints that perform their own built-in audio denoising. This information is currently used for Google Meet interoperability only.

The endpoint names used in the arrays are those that are contained in the user agent string used by the endpoint, and can be seen in the Vendor field when viewing participant status information.

Pexip intends to maintain and update this file as appropriate in future software versions, however you may amend the contents of the arrays and provide your own vendordata.json file as part of a custom theme upload and then apply that theme to your platform, VMRs or rules in the normal way to override the default behavior. Ensure that you do not break the syntax of the JSON file; when adding endpoints to the empty arrays follow the format of the existing "1" (single screen endpoints) object.

The vendordata.json file must be UTF-8 encoded, therefore when editing the file you should use a UTF-8 capable editor. We recommend that you do not use Notepad on Windows computers.

Note that if you submit your own vendordata.json file you must also include (as a minimum) in your ZIP upload a themeconfig.json file that contains a "theme_version": 2 switch.

Customizing the splash screens

The splash screens are used when joining a conference (such as to capture a PIN), using a Virtual Reception or the Test Call Service, or to display an error such as insufficient licenses. Each splash screen consists of a background JPG file plus other SVG images and text that are overlaid onto the background image.

The themeconfig.json file offers a lot of flexibility when customizing the appearance of the splash screens. You can override the default background image, graphics and text elements that are used on each splash screen, and modify where those elements are positioned. Each splash screen can be configured by specifying a splash_screens object and associated elements within your themeconfig.json file, as described below.

Background image

By default the Base theme contains 2 background files:

File name Image size (width, height) Content in Base theme Notes
background.jpg 1920 x 1080 pixels
JPG (RGB mode only)
The background image used by default on all splash screens except for those used by the Test Call Service.
background_test_call.jpg 1920 x 1080 pixels
JPG (RGB mode only)
The background image (a black screen) used by default on the Test Call Service splash screens.

You can replace either of these files with your own versions, or you have the flexibility to specify an alternative file to use on a specific splash screen. Ensure that the images display acceptably on both 16:9 endpoints and 4:3 endpoints (if applicable). For example, the original 1920 x 1080 pixel (16:9) images may have approximately 240 pixels cropped from both the left and right sides when displayed as 4:3. You should therefore check that any details on the far left or far right of the image are visible in both formats; for this reason we recommend keeping the image fairly central.

To specify an alternative file, use the background element to define the override and the path element to define the file to use. The filename must begin with "background". For example, to use an alternative background for the pin_entry splash screen:

{
  "splash_screens": {
    "screens": {
      "pin_entry": {
        "background": {"path": "background_pin_entry.jpg"},
		...

Make sure that you include the specified background file (background_pin_entry.jpg in this example) in the theme ZIP file that you upload.

Alternatively, instead of specifying a path you can define a color, e.g. "background": {"color": "0x323232"}

Splash screens

The following table lists the splash screens that you can configure within a theme. It describes when that screen is shown and shows its default appearance. It also identifies the screen key to use in a screens object if you want to override the default behavior, and the default icon image and text label elements used on that screen.

All of the screens used when joining a conference use background.jpg as the default background image. The Test Call Service uses background_test_call.jpg during the call.

Default element configuration for each screen

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.

Therefore it is useful to know how the icons and text elements are positioned on each splash screen by default.

Text overlays (labels)

The labels object is referenced by every text element that is overlaid onto a splash screen and is used to define the actual text displayed to users. For example:

"splash_screens": {
  "labels": {
    "welcome": "Welcome",
    "connecting": "Connecting",
    "timeout": "Time exceeded",
    ...

The keys (e.g. "timeout") are used in text elements and the associated values (e.g. "Time exceeded") are the text strings that are shown on the screen. The text content can include \n newlines if you require multi-line capability (newlines must be explicitly used and are never applied automatically). On some splash screens, strings may also reference some predefined variables, such as "{conference_name}" which is used in the virtual_reception_connecting screen.

The default font size is 66px and the default color is 0xffffffff (white, defined in ARGB hexadecimal notation).

Note that the default text labels are not contained within the Base theme's themeconfig.json file that you can download from the Management Node, but you can override the default settings by adding the relevant labels into your own themeconfig.json file. The following table contains the default keys, the default text string for each key, and the screen in which that key is used:

Splash screen elements (to control the size and position of text/graphics)

When customizing a splash screen you can define elements to control the appearance and position of images and text on that specific screen. The default screen layout and offsets are shown in this diagram (right).

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. See Default element configuration for each screen for more information and Adding an extra text element to a splash screen for a worked example.

The following example shows the JSON structure for how you can define an icon and text type element for a splash screen (the welcome screen in this example). All width, height and offset positions are measured in pixels.

{
  "theme_version": 2,
  "splash_screens": {
    "screens": {
      "welcome": {
        "elements": [
          {
            "type": "icon",
            "path": "icon_welcome.svg",
            "offset_y": 300,
            ...
          },
          {
            "type": "text",
            "label": "welcome",
            "font_size": 66,
            ...
          }
        ],
        ...

The full set of keys that you can specify for each element type are described below.

Icon elements (for SVG files used on splash screens)

Icons are the SVG files that are overlaid onto a splash screen. They can be configured by the icon element, which controls the position and scale (size) of the SVG file, and which file to use.

To change the color of an SVG image, see Changing the color of the SVG image.

Text elements

You have full control over the positioning and style of a text string by using a text element. All measurements are in pixels. The default font for the in-conference display of participant names is Roboto (which cannot be changed), or if that is not available for the character set, Noto Sans. All other overlay text (splash screen text and in-conference messages) uses GT Pressura Light and this can be changed by using a customized theme. For example (and showing the default values for non-test-call conferences):

PIN digits element

The pin_digits element is a special element to render up to 20 icons (each 42x42 pixels by default) on 2 lines, and is only used for PIN entry on the pin_entry screen. For example (showing the default values):

Vertical and free form layouts

The splash screens support 2 types of layout: vertical (the default) and free form. Layouts are specified by the layout_type entry in the screen specification object.

Helper lines

To aid development, debugging and theme creation, you can display gridlines for a given splash screen by using the helper_lines object. Helper lines are added on top of the background and under the icons, text and other elements.

Overlay SVG image files used on splash screens when joining a conference

When creating your own SVG image files for use on the splash screens, do not use tools such as Adobe Photoshop or Illustrator to convert JPG or PNG files into SVG format as they typically create complex files/paths that are resource-intensive to render, or in some cases may render incorrectly.

  • Use a vector drawing program that uses SVG as its primary format, such as Inkscape.
  • Do not create a single complex path — use multiple paths instead.

Changing the color of the SVG image

The color in an SVG file is typically controlled by a fill property defined within the file itself. Most of the SVG images used in the Base Pexip theme are white (fill="#FFFFFF").

To change the color of an SVG image you can edit the SVG file in a simple text editor such as Notepad, and change the fill color as required. For example to change the color to red, you would specify fill="#ff0000".

Indicator graphics used within an ongoing conference

The following graphics may be used during a conference. The SVG indicators are rendered on top of a dark gray background (the color is 0x7f323232, where 7f is the alpha channel which makes the background slightly transparent). The gray background is not part of the actual SVG image itself and it cannot be customized. If you use your own customized SVG images, ensure that they look appropriate when displayed on sizes from 20x20px to 48x48px, and are recognizable when displayed as 12x12px for participants that use very low resolutions.

If you are using a theme to customize gateway calls only, then you only need to consider a subset of these images, as indicated in the table below.

Video watermarking

Video watermarking overlays a small transparent image/logo onto the main speaker video during a conference (VMRs and Virtual Auditoriums). The logo watermarks are never added to calls placed via the Infinity Gateway, but the "Your mic has been muted" watermark icon can be overlaid on gateway calls. You can change the watermark images or disable watermarking completely.

  • The default logo watermark is a white "Pexip" logo (shown here against a blue background) and is enabled by default.

  • The default "Your mic has been muted" watermark is and is disabled by default.

Content classifications

When content classifications are configured in a theme, the specified classification text is overlaid (similar to a watermark) onto the video layout and splash screens during a conference. It is displayed in white text on a dark background by default, but the colors can be customized. In classic layouts it is positioned at the top of the screen, and in Adaptive Composition it is placed in the bottom-right corner.

  • Classification indicators are text only.
  • They are not included in the base theme. You must create and upload your own theme that includes your classification text strings.
  • You cannot configure the position, font or size of the message.

Custom layouts

You can design your own layouts and use them in the same way as the standard layouts and example custom layouts that are shipped by default.

Each layout is specified through a JSON file that must be included in your theme package.

A customlayouts license is required to upload your own custom layout files.

By using this feature, Pexip may reserve its right to waive at least some of the obligations stated in paragraph 9 of your Service Provider Agreement related to this feature.

Designing the layout

The layout is designed via a grid of up to 10x10 cells. Within the grid you define up to 16 slots, which are used to display video participants or a presentation stream. A slot can occupy multiple cells i.e. the number of cells in the slot controls the size of the participant/presentation stream within that slot. The NxN grid and each slot must be a square dimension i.e. the same number of vertical and horizontal cells, to cater for a 16:9 aspect ratio.

The example image above shows a grid size of 4x4 (thus with 16 grid cells). This layout has 2 slots for video/presentation streams that are defined on the 4x4 grid, where 4 grid cells are used to define a single slot "1" and similarly 4 grid cells for slot "2". The 4 grid cells at the top and the 4 cells at the bottom are unused.

The layout must follow these rules:

  • Slots cannot overlap each other.
  • The maximum number of slots (i.e. video participants plus a presentation stream) that can be defined is 16.
  • Any grid cells that are not used as slots will just be empty space in the layout (and display the background color).
  • The grid size can be a maximum of 10x10.
  • The grid size must be a square dimension, i.e. number of rows = number of columns.

Using the layout

After loading a layout as part of a theme, you can use them in the same way as the standard layouts that are shipped by default. Note that:

  • The VMR (or the relevant conference service / gateway call) must have access to the theme that contains the custom layout. The layouts included in themes follow the standard theme inheritance rules.
  • You refer to the custom layout via its specified name in the JSON file.
  • You may want to consider adding the custom layout name to the dtmf_allowed_layouts list in the associated themeconfig.json file to enable DTMF cycling for that layout.
  • You do not have to import or specify any related SVG file for the custom layout. The system generates the appropriate SVG file automatically and provides it to the Connect web app for use on the Meeting layout tab.

Note that the base theme contains three example custom layouts (one_main_twelve_around, two_mains_eight_around and one_main_nine_around).

Layout designer tool

You can use our layout designer tool to create and maintain your own custom layouts, or configure them manually as described below. You can use the tool to:

  • Load in existing layout files to edit and view layouts.
  • Validate a layout file.
  • Design new layouts from scratch visually with visual validation.
  • Export the designed layouts into a JSON file.
  • Export an SVG image of the layout (although this is not required by Pexip Infinity or the Connect web app).

Ensure that you select the appropriate Pexip Infinity version when using the layout designer.

Manually creating a custom layout file

Each custom layout file must be named with a prefix of "custom_layout_" and be in a .json format, for example custom_layout_mylayout.json.

The JSON file has the following primary fields:

Field name Description
name

This is the name of the layout and is what is used to refer to the layout throughout the system, in API calls and in the Administrator interface.

It is a string which is limited to a maximum of 50 alphanumeric and "_" characters and no spaces.

modes This is a list of dictionaries that define the basic layout for displaying video participants. It must contain at least one valid mode. See below for more details.
pres_modes This is an optional list of dictionaries that define the layout when a presentation is in progress and the layout is including the presentation content in the layout mix. See below for more details.
remove_self This is an optional boolean that controls whether "self view" is part of the layout mix. It is true by default (i.e. self view is removed from the mix, as per all of the standard layouts).
background_color

This is an optional string that defines the background color for the layout in RGB hexadecimal notation in the format #nnnnnn, for example:

"background_color": "#fffff0"

This is the basic schema:

{
    "name": string,
    "modes": [<basic mode>],
    "pres_modes": [<presentation mode>],
    "remove_self": bool,
    "background_color": string
}

Layout modes (basic and presentation)

A layout contains one or more modes. You must define one set of modes ("modes") for the basic layout (where there are only other video participants), and you can optionally define a set of modes for when a presentation is in progress ("pres_modes") and you want to include the presentation in the layout mix.

Each mode is defined for a minimum and maximum number of participants, and is used to determine how the layout is built as video participants are included or removed from the video mix, or when presentation content is received. For example, the basic Adaptive Composition layout has 4 modes: full screen with 1 slot (used when there is just 1 active video participant), side by side 2 slots (2 participants), 2+3 slots (3-5 participants), and finally 2+3+7 slots (6-12 participants).

When defining presentation modes, the presentation stream is always displayed as the 1st participant, and it then follows the same rules as a basic layout.

A mode dictionary has the following fields:

Field name Description
grid_size Specifies the size (number of cells) of the grid. It is a tuple of integer values where both integers must be the same and a maximum of 10x10.
constraints A dictionary containing min_slots and max_slots, where min_slots and max_slots are in the range 1-16 inclusive and min_slots <= max_slots.
slots

A list of slot dictionaries and must have the same number of slots as max_slots.

The slots fill the layout in the order they are defined in the list. Each slot contains the following fields (mandatory unless stated otherwise):

start_x The x coordinate on the grid where to place the top left corner of the slot.
start_y

The y coordinate on the grid where to place the top left corner of the slot.

Note that coordinates start from the top-left of the grid, where the top-leftmost grid cell has coordinates x=0 and y=0.

width An integer of the number of grid cells to span this slot across (width and height are the same, as the slots are all 16:9 aspect ratio).
is_speaker_slot

Optional field. A slot can be defined as a speaker slot which means active speakers based on voice activity will be put in these slots. If multiple slots are defined as speaker slots, the people speaking in those slots won’t swap around unless someone outside the speaker slot speaks. By default, the first slot is the speaker slot if this field is not specified.

Multiple speaker slots must be defined in consecutive order and the first slot must be a speaker slot.

is_presentation_slot

This field only applies to presentation modes.

The first slot in a presentation mode must contain: "is_presentation_slot": true

Only one slot (the first slot) can be set to true, and the field is optional (i.e. false) in every other slot.

slot_padding Optional field. This is a float value between 0 and 0.1 determining the spacing between slots. Default=0.001.

This is the mode dictionary schema:

{
    "grid_size": [int, int],
    "constraints": {
        "min_slots": int,
        "max_slots": int
    },
    "slots": [
        {
            "start_x": int,
            "start_y": int,
            "width": int,
            "is_speaker_slot": bool,
            "is_presentation_slot": bool
        }
    ],
    "slot_padding": float
}

Examples and default custom layouts

The base theme includes three custom layouts by default which are provided below as examples to show how to create the JSON layout file.

Large main speaker and up to 12 other participants

File name: custom_layout_one_main_twelve_around.json

Layout name: one_main_twelve_around

This layout has 2 modes: the first mode is for when there is 1 participant to display, the second mode is for 2-13 participants. (The image below is from our layout designer tool).

It is configured via the following JSON file:

Copy to clipboard
{
"name": "one_main_twelve_around",
"modes": [
{
"grid_size": [1, 1],
"slots": [
{
"start_x": 0,
"start_y": 0,
"width": 1
}
],
"constraints": {
"min_slots": 1,
"max_slots": 1
}
},
{
"grid_size": [4, 4],
"slots": [
{
"start_x": 1,
"start_y": 1,
"width": 2
},
{
"start_x": 0,
"start_y": 0,
"width": 1

},
{
"start_x": 1,
"start_y": 0,
"width": 1

},
{
"start_x": 2,
"start_y": 0,
"width": 1

},
{
"start_x": 3,
"start_y": 0,
"width": 1

},
{
"start_x": 0,
"start_y": 1,
"width": 1

},
{
"start_x": 3,
"start_y": 1,
"width": 1

},
{
"start_x": 0,
"start_y": 2,
"width": 1

},
{
"start_x": 3,
"start_y": 2,
"width": 1

},
{
"start_x": 0,
"start_y": 3,
"width": 1

},
{
"start_x": 1,
"start_y": 3,
"width": 1

},
{
"start_x": 2,
"start_y": 3,
"width": 1

},
{
"start_x": 3,
"start_y": 3,
"width": 1

}

],
"constraints": {
"min_slots": 2,
"max_slots": 13
}
}
]
}

Two main speakers and up to 8 other participants

File name: custom_layout_two_mains_eight_around.json

Layout name: two_mains_eight_around

This layout has 3 modes: the first mode is for when there is 1 participant to display, the second mode is for 2 participants, and the third mode is for 3-10 participants. (The image below is from our layout designer tool).

It is configured via the following JSON file:

Copy to clipboard
{
"name": "two_mains_eight_around",
"modes": [
{
"grid_size": [1, 1],
"slots": [
{
"start_x": 0,
"start_y": 0,
"width": 1
}
],
"constraints": {
"min_slots": 1,
"max_slots": 1
}
},
{
"grid_size": [4, 4],
"slots": [
{
"start_x": 0,
"start_y": 1,
"width": 2,
"is_speaker_slot": true
},
{
"start_x": 2,
"start_y": 1,
"width": 2,
"is_speaker_slot": true
}
],
"constraints": {
"min_slots": 2,
"max_slots": 2
}
},
{
"grid_size": [4, 4],
"slots": [
{
"start_x": 0,
"start_y": 1,
"width": 2,
"is_speaker_slot": true
},
{
"start_x": 2,
"start_y": 1,
"width": 2,
"is_speaker_slot": true
},
{
"start_x": 0,
"start_y": 0,
"width": 1
},
{
"start_x": 1,
"start_y": 0,
"width": 1
},
{
"start_x": 2,
"start_y": 0,
"width": 1
},
{
"start_x": 3,
"start_y": 0,
"width": 1
},
{
"start_x": 0,
"start_y": 3,
"width": 1
},
{
"start_x": 1,
"start_y": 3,
"width": 1
},
{
"start_x": 2,
"start_y": 3,
"width": 1
},
{
"start_x": 3,
"start_y": 3,
"width": 1
}
],
"constraints": {
"min_slots": 3,
"max_slots": 10
}
}
]
}

One main speaker and up to 9 other participants, with presentation in mix support

File name: custom_layout_one_main_nine_around.json

Layout name: one_main_nine_around

This layout supports showing the presentation stream as part of the layout mix. It has:

  • 4 basic modes: the first mode is for when there is 1 participant to display, the second mode is for 2-5 participants, the third mode is for 6 participants, and the fourth mode is for 7-10 participants.
  • 4 presentation modes: the first mode is for when there is only one video stream to display (just the presentation stream, and no participant video streams), the second mode is for 2-5 video streams (presentation and participants), the third mode is for 6 streams, and the fourth mode is for 7-10 streams.

(The image below is from our layout designer tool).

It is configured via the following JSON file:

Copy to clipboard
{
"name": "one_main_nine_around",
"modes": [
{
"grid_size": [1, 1],
"slot_padding": 0.001,
"slots": [
{
"start_x": 0,
"start_y": 0,
"width": 1
}
],
"constraints": {
"min_slots": 1,
"max_slots": 1
}
},
{
"grid_size": [10, 10],
"slot_padding": 0.001,
"slots": [
{
"start_x": 2,
"start_y": 1,
"width": 8
},
{
"start_x": 0,
"start_y": 1,
"width": 2
},
{
"start_x": 0,
"start_y": 3,
"width": 2
},
{
"start_x": 0,
"start_y": 5,
"width": 2
},
{
"start_x": 0,
"start_y": 7,
"width": 2
}
],
"constraints": {
"min_slots": 2,
"max_slots": 5
}
},
{
"grid_size": [10, 10],
"slot_padding": 0.001,
"slots": [
{
"start_x": 2,
"start_y": 1,
"width": 8
},
{
"start_x": 0,
"start_y": 0,
"width": 2
},
{
"start_x": 0,
"start_y": 2,
"width": 2
},
{
"start_x": 0,
"start_y": 4,
"width": 2
},
{
"start_x": 0,
"start_y": 6,
"width": 2
},
{
"start_x": 0,
"start_y": 8,
"width": 2
}
],
"constraints": {
"min_slots": 6,
"max_slots": 6
}
},
{
"grid_size": [5, 5],
"slot_padding": 0.001,
"slots": [
{
"start_x": 1,
"start_y": 0,
"width": 4
},
{
"start_x": 0,
"start_y": 0,
"width": 1
},
{
"start_x": 0,
"start_y": 1,
"width": 1
},
{
"start_x": 0,
"start_y": 2,
"width": 1
},
{
"start_x": 0,
"start_y": 3,
"width": 1
},
{
"start_x": 0,
"start_y": 4,
"width": 1
},
{
"start_x": 1,
"start_y": 4,
"width": 1
},
{
"start_x": 2,
"start_y": 4,
"width": 1
},
{
"start_x": 3,
"start_y": 4,
"width": 1
},
{
"start_x": 4,
"start_y": 4,
"width": 1
}
],
"constraints": {
"min_slots": 7,
"max_slots": 10
}
}
],
"pres_modes": [
{
"grid_size": [1, 1],
"slot_padding": 0.001,
"slots": [
{
"start_x": 0,
"start_y": 0,
"width": 1,
"is_presentation_slot": true
}
],
"constraints": {
"min_slots": 1,
"max_slots": 1
}
},
{
"grid_size": [10, 10],
"slot_padding": 0.001,
"slots": [
{
"start_x": 2,
"start_y": 1,
"width": 8,
"is_presentation_slot": true
},
{
"start_x": 0,
"start_y": 1,
"width": 2
},
{
"start_x": 0,
"start_y": 3,
"width": 2
},
{
"start_x": 0,
"start_y": 5,
"width": 2
},
{
"start_x": 0,
"start_y": 7,
"width": 2
}
],
"constraints": {
"min_slots": 2,
"max_slots": 5
}
},
{
"grid_size": [10, 10],
"slot_padding": 0.001,
"slots": [
{
"start_x": 2,
"start_y": 1,
"width": 8,
"is_presentation_slot": true
},
{
"start_x": 0,
"start_y": 0,
"width": 2
},
{
"start_x": 0,
"start_y": 2,
"width": 2
},
{
"start_x": 0,
"start_y": 4,
"width": 2
},
{
"start_x": 0,
"start_y": 6,
"width": 2
},
{
"start_x": 0,
"start_y": 8,
"width": 2
}
],
"constraints": {
"min_slots": 6,
"max_slots": 6
}
},
{
"grid_size": [5, 5],
"slot_padding": 0.001,
"slots": [
{
"start_x": 1,
"start_y": 0,
"width": 4,
"is_presentation_slot": true
},
{
"start_x": 0,
"start_y": 0,
"width": 1
},
{
"start_x": 0,
"start_y": 1,
"width": 1
},
{
"start_x": 0,
"start_y": 2,
"width": 1
},
{
"start_x": 0,
"start_y": 3,
"width": 1
},
{
"start_x": 0,
"start_y": 4,
"width": 1
},
{
"start_x": 1,
"start_y": 4,
"width": 1
},
{
"start_x": 2,
"start_y": 4,
"width": 1
},
{
"start_x": 3,
"start_y": 4,
"width": 1
},
{
"start_x": 4,
"start_y": 4,
"width": 1
}
],
"constraints": {
"min_slots": 7,
"max_slots": 10
}
}
]
}

Themes used by Call Routing Rules (gateway calls)

You can assign a theme to a Call Routing Rule. Only a subset of the theme's image files are used when they are applied to an Infinity Gateway call. Thus, you only need to customize a subset of the files for any themes that are only assigned to one or more Call Routing Rules. The various tables on this page indicate, where appropriate, which image files are used in gateway calls.

Also, other than for Google Meet and Microsoft Teams integration scenarios, the audio files are not used in themes assigned to Call Routing Rules.