Teams design website

Change website design when in Microsoft Teams

Change website design when in Microsoft Teams

How do you make a website understand it's added to Microsoft Teams and change the design to look better?

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.

				
						<script>
		if(isElectron()){
			document.write("<link href='teams-embed.css' rel='stylesheet'>")
		}else{
			document.write("<link href='standard.css' rel='stylesheet'>")
		}
	</script>
				
			

Leave a Reply

Your email address will not be published. Required fields are marked *