> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.android-kiosk.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# KB: Using a custom error page to reload the home page

In some circumstances standard Android WebView error messages may appear within Kiosk Browser, such as when an internet connection is not available. We generally advise using a [custom error page](https://help.android-kiosk.com/en/article/custom-error-and-access-denied-pages-1yau22d/) so that end users see a user friendly interface.

![Standard Error Page](https://storage.crisp.chat/users/helpdesk/website/99f4d12b-e989-4521-a5e7-35225f7de1e6/646cea50-306c-4202-95a8-6274792f587b.png)

By default Kiosk Browser will not attempt to reload the home page unless you have [automatic page reload options](https://help.android-kiosk.com/en/article/automatic-page-reload-options-1491o3/) configured. It's possible to include a script within your custom error page to check availability of the Kiosk Url and automatically load it if a response code of 200 is received. An example page (HTML & JS) can be found below.

```
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Custom Error Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <script type="text/javascript">
	    function callAjax(url, callback){
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function(){
			    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
			        callback(xmlhttp.responseText);
			    }
			}
			xmlhttp.open("GET", url, true);
			xmlhttp.send();
		}
		
		window.onload = function() {
			setInterval(function() {
				callAjax(Android.getHomePage(), function() {
					Android.loadHomePage();
				});	
			}, 5000);
		}
				
	</script>
    <style type="text/css">
	    body {
		    background-color: #fffff;
		    width: 100%;
		    height: 100%;
	    }
	    
	    .splash {
		    height: 22vh;
		    position: absolute;
		    top: 50%;
		    margin-top: -15vh;
		    text-align: center;
		    width: 100%;
	    }
	    
	    .logo {
		    height: 15vh;
		    margin-bottom: 4vh;
	    }
	    
		.spinner {
		  margin: 0 auto;
		  width: 25vh;
		  text-align: center;
		}
		
		.spinner > div {
		  width: 3vh;
		  height: 3vh;
		  margin: 1vh;
		  background-color: #000000;
		  border-radius: 100%;
		  display: inline-block;
		  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		}
		
		.spinner .bounce1 {
		  -webkit-animation-delay: -0.32s;
		  animation-delay: -0.32s;
		}
		
		.spinner .bounce2 {
		  -webkit-animation-delay: -0.16s;
		  animation-delay: -0.16s;
		}
		
		@-webkit-keyframes sk-bouncedelay {
		  0%, 80%, 100% { -webkit-transform: scale(0) }
		  40% { -webkit-transform: scale(1.0) }
		}
		
		@keyframes sk-bouncedelay {
		  0%, 80%, 100% { 
		    -webkit-transform: scale(0);
		    transform: scale(0);
		  } 40% { 
		    -webkit-transform: scale(1.0);
		    transform: scale(1.0);
		  }
		}
	</style>
</head>
<body>

<div class="splash">
	<div class="spinner">
	  <div class="bounce1"></div>
	  <div class="bounce2"></div>
	  <div class="bounce3"></div>
	</div>
</div>
</body>
</html>
```

![Example Custom Error Page (awaiting url response 200)](https://storage.crisp.chat/users/helpdesk/website/99f4d12b-e989-4521-a5e7-35225f7de1e6/ae5eb659-974c-4e31-a5e2-3bb3d1d6a9b2.png)