Hello everyone I was adding html code in webviewer with css and js but it didn’t work.
Here’s my inlined html code, it’s a simple slideshow -
data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
max-height: 250px;
position: relative;
margin: auto;
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: left;
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
.active {
background-color: #717171;
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 100%;
border-radius: 5px;
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
img {
border-radius: 5px 5px 5px 5px;
max-height: 250px;
object-fit:cover;
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
</style>
</head>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="card">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:100%"> <div class="text">caption1</div>
</div> </div>
<div class="mySlides fade">
<div class="card">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" style="width:100%">
<div class="text">Caaption 2</div>
</div> </div> </div>
<br> <div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
</script>
</body>
After this I tried external src for css and js but that also seems broken. Please help me to run this html.
Thanks @actech but removing single-line comments didn’t helped. But I found my html code with external css and js is working in Kodular Webview but not in Thunkable cross platform.
Here’s that code -
<head> <link rel="stylesheet" type="text/css" href="http://rounded.000webhostapp.com/csss/1.css"> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="card"> <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:100%"> <div class="text">caption1</div> </div> </div> <div class="mySlides fade"> <div class="card"> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" style="width:100%"> <div class="text">Caaption 2</div> </div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> </div> <script src ="http://rounded.000webhostapp.com/csss/1.js"></script> </body>
Is there any difference on both webviews.
Does not work on Android? The fact is that Data URI doesn’t work in apps installed on iOS, so I left examples of working with Data URI in my demo application, but I recommend using a different mechanism.
I’ll look at your code
The problem is that your first code doesn’t work in the browser. First, you need to make sure that the code works in the browser. But you secont code run in browser.
Try this Example
data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><script>alert("Hello")</script>
check your example
https://x.thunkable.com/projects/5ed376e686515550ed6044eb/project/properties/designer/
