This feature is no longer included on this webpage due ease on development from my part, the original design of Teams Nordic was based on Grid CSS and changed the whole layout to match Microsoft Teams graphical guidelines.
I know I spent a few hours researching it, so I thought I’d share.
Javascript file: isElectron.js
This javascript checked if it was Electron (the browser used in Teams) and if it was in an iframe, since the web-version of Teams uses iframe.
function isElectron() {
// Renderer process
if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
return true;
}
// Main process
if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
return true;
}
// Detect the user agent when the `nodeIntegration` option is set to true
if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
return true;
}
// Detect if in an iframe
if ( window !== top ) {
return true;
}
return false;
}
Script in header, chooses the correct CSS design
This is put in the <head> section to detect choose which CSS design to use based on the javascript above.