Can the Jitsi Logo be replaced on the Video Screen of A Self Hosted Instance?

I deployed an Ubuntu Instance of Jitsi Meet and it is working pretty well on my URL. How can I add my own branding to the interface? Where on Ubuntu 18.04 would I find the files that would allow that?

Thanks for your consideration.
Regards,
Shaun

change
/usr/share/jitsi-meet/images/watermark.png
/usr/share/jitsi-meet/interface_config.js

you may want to change the nginx configuration
/etc/nginx/sites-enabled/yoursite.com
to keep your own version of these files at a different location as these files will be overwritten everytime you update the jitsi packages.

1 Like

Thank you so much. I will head into this immediately and report accordingly.

@xranby Thanks again for this most informative response. I have been going through to make the changes and I would like to ask two related questions:

  1. The language on the welcome page as noted under the “header-text” and the “header-text-description”, in particular:

Go ahead, video chat with the whole team. In fact, invite everyone you know. jitsi-meet is a fully encrypted, 100% open source video conferencing solution that you can use all day, every day, for free — with no account needed

Where would I find this language for adjustment? I have exhausted all the files in the jitsi-meet folder to no avail.

  1. I’m not totally understanding how to achieve this aspect but definitely understand the purpose and want to have my changes backed up and preserved as you suggested with this method. I can however accept this particular answer at a later time as the priority is with the former.

Thanks again for your input. You have truly improved my outlook for my project as I seek to design what the developers will need to tackle.

Regards,
Shaun

The text for the welcome page and all texts used for the user interface is stored as json files inside the
jitsi-meet/lang/
folder.

There is one file for each language the end user may use:

main.json:
"appDescription": "Go ahead, video chat with the whole team. In fact, invite everyone you know. {{app}} is a fully encrypted, 100% open source video conferencing solution that you can use all day, every day, for free — with no account needed.",

main-ja.json
"appDescription": "チーム全体とビデオチャットしましょう。あなたが知っている皆さんを招待してください。{{app}}は完全に暗号化された100%オープンソースのビデオ会議ソリューションで、一日中、毎日無料でご利用いただけます。アカウントは必要ありません。",

The jitsi-meet react user-interface uses the “appDescription” keyword to place the translated text on the welcome page, depending on the language setting.

If you look at the jitsi-meet react sourcecode then you can see and change what text is put on the WelcomePage:

All the files under jitsi-meet/react are compiled when the developer rebuild the user interface following the development instructions
into jitsi-meet/libs/app.bundle.min.js

1 Like

@xranby Thank You so much. I truly appreciate the guidance. This means a whole lot.

  1. Do I need to restart my entire server after making changes to the JSON files in order for the page to be updated?

  2. If that is the case what is the best command for this particular restart and is it done in the “lang directory” or it doesnt matter.

  3. Could a server restart affect my Turn Servers and the other functionality within the jitsi environment?

You may need to clear your browser cache on the client for the changes to take effect, the client need to download the new version for the change to take effect.

I tried that and also tried a different machine but still the original welcome message.

I used nano as the file editor on the command line. The text was actually updated in the source file when I rechecked but still not on the webpage.

For English speakers there are 3 language files with almost the same content. make sure they all three contain the same info:
main.json
main-enGB.json
main-id.json - this file is not for english however it also contains the english verison of the app description

1 Like

Aaaah… Great. I’ll be on it.
Thanks again. @xranby

I tried them all but no change. Even adjusting the interface_config.js file to “show welcome message” : “false” and it still displays the original text.

This is what helped. It was posted by @albercuba

Since I installed using the quick-install guide, I can’t modify the WelcomePage.web.js file.

I actually can modify the text using CSS but I was looking for an easier way to do it.

Just in case someone wants to know, these are the steps using CSS:

nano /usr/share/jitsi-meet/css/all.css

Search for .header-text-title

Before .welcome .header .header-text-title add:

.welcome .header .header-text-title{visibility: hidden;}

Now edit the original .header-text-title

After .header-text-title add ::after

Inside the parentheses add content: ‘PUT-YOUR-TEXT-HERE’;visibility: visible;display: block;

It should look like this:

.welcome .header .header-text-title::after{content: 'PUT-YOUR-TEXT-HERE';visibility: visible;display: block;color:#fff;font-size:2........}

The you can follow the same steps to change the header-text-description

2 Likes