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 comment

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

Welcome to teams Nordic

Accept Cookies.

To use this page you need to approve the use of cookies, we do care about privacy and don’t track you or share your information.

Read more in the Privacy Policy.

Go to Microsoft Teams

Where you planning on opening Microsoft Teams? The button below will take you to the right place.

Come back later to learn how to use it.

teams Nordic is not a part of Microsoft, but a knowledge portal owned by Daniel Kåven.