Cannot customize JITSI iFrame UI using var options

I am able to successfully load and use the jitsi iframe app by including the script tag below in a page in our custom CMS. The conference is presently hosted at meet.jit.si

I am also able to use api.executeCommand(…) to make changes to things like UserName, etc.

I am trying to make changes to the UI by referencing setting in interface_config.js (background color, etc.) as follows:

button.addEventListener(‘click’, () => {
var domain = ‘meet.jit.si’;
var options = {
“roomName”: “practical-example-with-no-monsters”,
“parentNode”: container,
“width”: 800,
“height”: 600,
“interfaceConfigOverwrite”: ‘DEFAULT_BACKGROUND: #ff0000’,
};
api = new JitsiMeetExternalAPI(domain, options);
api.executeCommand(‘displayName’, ‘User Name’);
});

I have tried with and without adding

Also if this second file is to be added, does it appear before or after external_api.js?

Thank you for any help / insights you may have.

…/jitsi/working/external_api.js

…/jitsi/working/interface_config.js

You don’t need to add interface_config.js. The problem here is that interfaceConfigOverwrite property should be Object not a string as described in our docs https://github.com/jitsi/jitsi-meet/blob/master/doc/api.md. Also here’s an example from our docs:

You can overwrite options set in config.js and interface_config.js. For example, to enable the filmstrip-only interface mode, you can use:

const options = { … interfaceConfigOverwrite: { filmStripOnly: true }, … };
const api = new JitsiMeetExternalAPI(domain, options);

In your case the code should look like:

button.addEventListener(‘click’, () => {
var domain = ‘meet.jit.si’;
var options = {
“roomName”: “practical-example-with-no-monsters”,
“parentNode”: container,
“width”: 800,
“height”: 600,
“interfaceConfigOverwrite”: { ‘DEFAULT_BACKGROUND’: '#ff0000’ },
};
api = new JitsiMeetExternalAPI(domain, options);
api.executeCommand(‘displayName’, ‘User Name’);
});

Thank you Hristo…I will give it a try.