All Categories
Customization
Custom CSS

Custom CSS

Learn how to add custom CSS code that will only be applied inside Canvas

We can add custom CSS to apps by performing a check to the user-agent.

If the "canvas" string is included in the user-agent, it means that the content is being displayed inside the app.

Below you can find a code snippet that will save the user agent and then check if the "canvas" string is present, if so it will add custom CSS to the HTML head.

<script type="text/javascript">
	// Get the current user agent
	const isApp = navigator.userAgent.toLowerCase().indexOf('canvas') > -1;
	
	// Check if the user agent contains the canvas string
	if (isApp) {
	
	    // Outputs the custom CSS in case canvas is present in the user-agent
	    document.head.innerHTML += '<style>footer { display:none !important; }</style>';
	
	}
</script>
Did this answer your question?
😞
😐
🤩
Use App Links and Universal Link Canvas Documentation