How to load this HTML code in WebViewer?

I am trying to load this HTML code in the WebViewer but it is showing me a blank page. I have imported this html file in the Kodular assets and giving its path to load but it shows blank page.

Can’t attach HTML file here so pasting the code:

<head>

	<meta charset="utf-8">

	<title>FirstProject - Proto.io</title>

	
		<meta name="HandheldFriendly" content="True">
		<meta name="MobileOptimized" content="1080"> 

		
		
		
		<meta name="viewport" content="minimum-scale=0.33, maximum-scale=0.33, initial-scale=0.33, user-scalable=no, shrink-to-fit=no" />

		

		<meta name="format-detection" content="telephone=no">


		
			<meta name="mobile-web-app-capable" content="yes">
        

        
        <link rel="icon" sizes="192x192" href="./assets/branding/android-icon-hires.png">
        <link rel="icon" sizes="128x128" href="./assets/branding/android-icon.png">

        
        <link href="./assets/branding/apple-touch-icon-retina180.png" sizes="180x180" rel="apple-touch-icon">

        
        <link href="./assets/branding/apple-touch-icon-retina.png" sizes="114x114" rel="apple-touch-icon">

        
        <link href="./assets/branding/apple-touch-icon.png" sizes="57x57" rel="apple-touch-icon">

        
        <link href="./assets/branding/startup.png" media="(device-width: 320px)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-retina.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-568.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-retina-6.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-retina-6plus.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-retina-6plus-landscape.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-ipad.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-ipad-landscape.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-ipad-retina.png" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-ipad-landscape-retina.png" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-ipad-pro.png" media="(device-width: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

        
        <link href="./assets/branding/startup-ipad-pro-landscape.png" media="(device-width: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

		<meta http-equiv="cleartype" content="on"> 


		 
	    <script type="text/javascript" src="./scripts/plugins/jquery/jquery.js"></script>

		
			<link rel="stylesheet" href="./stylesheets/player-export.css" />
			<script type="text/javascript" src="./scripts/player-export.js"></script>
		

		
		<script type="text/javascript" src="./libraries/common/components.js"></script> 
		<link type="text/css" rel="Stylesheet" href="./libraries/common/components.3.00.css" /> 

		
				<script type="text/javascript" src="./libraries/material/components.js"></script> 
				<link type="text/css" rel="Stylesheet" href="./libraries/material/components.3.00.css" /> 
			
				<script type="text/javascript" src="./libraries/ios9/components.js"></script> 
				<link type="text/css" rel="Stylesheet" href="./libraries/ios9/components.3.00.css" /> 
			
			<script type="text/javascript" src="./data/data.js"></script> 
		

	<style>
		body { width: 1080px; height: 1920px; }
		.landscape, .landscape .prx-page { min-height: 1080px; }
		.portrait, .portrait .prx-page { min-height: 1920px; }
	</style>

	<script type="text/javascript">

		prx.ver = '6.6.62.0';
		prx.url.account = 'https://ishanshripadpotnis.proto.io';
		prx.url.staticassets = 'https://gal.proto.io';
		prx.url.devices = 'https://dteyv52hbg2at.cloudfront.net/devices';
		prx.url.static = 'https://dteyv52hbg2at.cloudfront.net';
		prx.url.siteurl = 'proto.io';
		prx.url.crossmsg = 'https://ishanshripadpotnis.proto.io';

		prx.nodejsassetsserver = {};
		prx.nodejsassetsserver.host = ".proto.io";
		prx.nodejsassetsserver.subdomainprefix = "https://at";
		prx.nodejsassetsserver.maxsubdomains = "20";

		prx.device_library = 'material';
		prx.devices[prx.device] = {
			name: prx.device
			,defaultOrientation: 'portrait'
			,portrait_applies: 1 //new
			,portrait: [1080,1920]
			,landscape_applies: 1 //new
			,landscape: [1920,1080]
			,allow_orientation_change: 1 //new
			,statusbar_skin: 'default' // new
			,statusbarheightportrait: 0
			,statusbarheightlandscape: 0
			,navigationbar_skin: 'default' //new
			,navigationbarheightportrait: 0
			,navigationbarheightlandscape: 0
			,normalportrait: [1080,1920]
			,normallandscape: [1920,1080]
			,device_s3bucket: 'ed622799-31ac-4b1f-b50e-1232e370ebb7'
			,dpr: '3.00'
			,deviceType: "default"
            ,showiPhoneXNotch: false
            ,hasCustomSkinNotch: false
			,appleWatchRoundedCorners: false
			,scrollType: "default"
			,initialscale: 0.33
			,targetdensitydpi: "device-dpi"
		}

		prx.projectsettings.id = '17528c0a-b796-464b-9d98-d6fd2121b444';
		prx.projectsettings.s3b = 'ishanshripadpotnis-1109631-proto';
		prx.projectsettings.account = 'ishanshripadpotnis';
		prx.projectsettings.statusbar = '0'; 
		prx.projectsettings.statusbarapplies = '0';
		prx.projectsettings.navigationbar = '0';
		prx.projectsettings.navigationbarapplies = '0';
		prx.projectsettings.initialpageid = -1;
		
		
		prx.projectsettings.flashactions = 1;
		prx.projectsettings.gatrackingcode = '';

		prx.export2html = '1' == true;
		prx.mobPlayer = 0;

		prx.user.country = 'US';

		prx.s3Links = []; 
		var sLinkedAssets = [];
		

		prx.csrf_token = 'CD34639AC1CF31E39F3C26AF63C77099BA85F71EF68372583DAE076BA629BCC3';

        

        
                        prx.assetsAccessToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkIjp7InVpZCI6Ii0xIiwicHJvamVjdF9pZCI6IjE3NTI4YzBhLWI3OTYtNDY0Yi05ZDk4LWQ2ZmQyMTIxYjQ0NCJ9LCJ2IjowLCJleHAiOjE2MDczNDE2ODMsImlhdCI6MTYwNzE2MTY4M30.9KQtnDDOecODKK0Du6EWjplDPsH9fcWifuqBrDkUBbE";

		prx.iniPlayer.iniPreLoad();

	</script>
</head>



		<body class="player device-cursor-touch mobile-device-true " " id="mbd" >

			
			<div id="window-wrapper">
				<div id="dragarea"></div>
				<div id="statusbar"></div>
				<div id="underlay" style=""></div>

				<div class="prx-page" data-role="page" id="p-1" data-id="1"></div>
				
				<div id="navigationbar"></div>
				<div id="overlay"></div>
				<div id="trash"></div>
				<div id="quick-audios"></div>
			</div>

			 
		<div id="loader-wrapper">
			
			<div class="progress">
				<div class="progress-bar"></div>
			</div>
			<div id="poweredby"></div>
		</div>
		


		</body>

You can save this as a html file and upload it to the kodular assets.
And then you can set the web viewer url to : file:///android_asset/file.html

simple!!
:slight_smile:
:100:
Pratyush
Thank you

3 Likes

i have done your work easier
try this file - html.txt (7.5 KB)

3 Likes

Thank you guys, the problem has been solved! :smile:

1 Like

Please mark this as solution :slight_smile:
@Aditya_Singh

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.