Branding TrueConf Server сonferences

You’ve probably thought of how to add uniqueness to your conferences. If you are reading this article, you are on the right track. Here, we’ll explain how TrueConf conferences can be customized.

Branding application background

You can set a custom image for the background displayed during a conference or call. To do it, go to Settings → Appearance → Video area background.

Here, you can upload two types of backgrounds: either an image or a solid-color background. To upload a file, click  and select it on your device.

Branding conference and guest pages

By default, the guest page and conference page are styled uniformly according to TrueConf guidelines; however, you can change the style of some elements without breaking the overall design. TrueConf Server enables you to customize the guest page in two ways: simple and complex.

Simple way – replacing a company logo

You can change the company logo displayed on web pages. To learn more about this feature, check out our documentation.

Complex way – full-scale customization of web pages

So that you do not have to make immediate changes in the files of the video conferencing server deployed in production, we recommend using a browser extension which allows embedding user-defined styles; for example, you may try something like User CSS for Google Chrome.

Introduction

How to find the required element:

1. Open the web page of your server.
2. Right click on an element that you want to edit and select Inspect.
3. You will open the developer tools where you can find the HTML code and the element you clicked will be automatically selected.
4. Hover the mouse over an HTML tag and the corresponding section on the web page will be highlighted.

To edit an element, you will need to use the corresponding CSS selectors: class names, tags, and so forth. For example, the div tag which is highlighted on the picture above has a class named router-container main-background. Later, we will use this value to customize the page. To get a better idea of User CSS, let us take a look at a simple example like changing the text color for the greeting Welcome to the video conferencing server guest page.

1. Open User CSS.
2. Copy and paste the following code in the opened window:
   
   CSS

   .main-screen__header__desc{ color: yellow; }

   1 2 3

   .main-screen__header__desc{ color: yellow; }

The text color will change to yellow:

Let us consider how other HTML tags can be changed.

Replacing the page background

To replace the page background, change the value of the property background-image for the CSS class main-background:

where {img-in-base64} is the image encoded in the base64 format; you can use an online converter base64-image.de to encode an image into this format. This approach will speed up page downloading and reduce the number of requests to the server. After converting the image in base64-image.de, click the button copy css:

and insert the copied text instead of url{img-in-base64}:

Hiding some information

Hiding blocks

To conceal a section, add the rule visibility:hidden; to its CSS selector. In this case, this element will become fully transparent, however, the browser will still reserve the space for it. For example, to hide the footer completely, add a new rule in User CSS:

Disabling blocks

To disable a certain page section, specify the rule display:none; for its CSS selector. For example, to disable the footer, add a new rule in User CSS:

In this case, this section will no longer affect page rendering and no space will be reserved for it.

If you do not want to hide the entire footer, you can disable only one of its sub-sections. Since the lines in the footer have identical tags and classes, you can use the nth-child(n) selector where n is the ordinal number of the section. For example, to hide the version number, use the following rule:

Applying changes on the server

Once you have tested CSS rules in User CSS, you will need to add them to HTML files used for rendering TrueConf Server web pages. We will use the method involving global css styles. To add such styles:

1. Create the file my-style.css.
2. Copy the rules that you specified in User CSS and paste them in the file my-style.css.
3. Open the file with any text editor like Notepag++ or VS Code (depending on the OS where TrueConf Server is deployed):
   • Windows:
     
     C:\Program Files\TrueConf Server\httpconf\site\ui\user-area\dist\index.html

     1	C:\Program Files\TrueConf Server\httpconf\site\ui\user-area\dist\index.html

   • Linux:
     
     /opt/trueconf/server/srv/site/ui/user-area/dist/index.html

     1	/opt/trueconf/server/srv/site/ui/user-area/dist/index.html

4. Add the following code at the end of the head tag <link rel="stylesheet" href="/user-area/my-styles.css">:

In this way, you can fully customize the guest page and the conference join page:

Before:

After:

Branding the window of a WebRTC conference

We strongly recommend you to read the introductory section, if you have skipped it due to some reason.

Web page background

To replace a background:

1. Prepare an image that meets the following requirements: .png, 5292*2982, and color depth equal to 2. In this way, you will make sure that the image is correctly displayed on different types of screens and has a small size.
2. Copy the image in the folder under this path:
   • Windows:
     
     C:\Program Files\TrueConf Server\httpconf\site\ui\webrtc\dist\images

     1	C:\Program Files\TrueConf Server\httpconf\site\ui\webrtc\dist\images

   • Linux:
     
     /opt/trueconf/server/srv/site/ui/webrtc/dist/images

     1	/opt/trueconf/server/srv/site/ui/webrtc/dist/images

3. Create a backup copy of the original image.
4. Rename your custom image in such a way so that its name matches the original file.
5. If the background does not get updated, restart the TrueConf Web Manager service.

Of course, to achieve full-scale customization, you will need to change the color of all windows, for example, the background of the window where the conference PIN has to be entered.

You can also change the page background with a CSS rule as it is described above, but you also need to add !important:

Layout background

The layout background is displayed only if there are participants on the podium. To customize this background, copy the image background.png (1920*1080) in the stub folder of the server working directory (by default, C:\TrueConf on Windows and /opt/trueconf/server/var/lib on Linux). Then, restart the server.

Layout elements

You can replace the stubs (default images used when a participant’s camera is turned off). They are displayed in video windows when users join a meeting from a browser (via WebRTC).

By default, an avatar placed against a standard background is displayed in a participant’s video window when the camera is disabled.

To customize the stub:

1. Go to the stub folder which is in the server working directory (C:\TrueConf on Windows and /opt/trueconf/server/var/lib on Linux).
2. Replace the file depending on the type of a participant’s connection:
   • no_video_alpha.png for connections from TrueConf client applications and via WebRTC
   • no_video.png for connections via SIP/H.323 and RTSP.
3. Then, restart TrueConf Server in its control panel.

By default, a round avatar is used as a stub. However, you can redefine this rule:

Solid-color background without an avatar

Round avatar against a background

Square-shaped avatar against a background

Adding styles in a separate CSS file

As in the case of the guest page, you can use CSS rules to customize the video windows of participants connected from a browser. To do it, take the steps described before and add the line <link rel="stylesheet" href="/webrtc/my-styles.css"> in one of the following files depending on the OS where TrueConf Server is deployed:

• Windows:
  
  C:\Program Files\TrueConf Server\httpconf\site\ui\webrtc\dist\index.html

  1	C:\Program Files\TrueConf Server\httpconf\site\ui\webrtc\dist\index.html

• Linux:
  
  /opt/trueconf/server/srv/site/ui/webrtc/dist/index.html

  1	/opt/trueconf/server/srv/site/ui/webrtc/dist/index.html

Happy video conferencing!