Skip to main content

Custom HTML

Beezer Support
Updated

 

The Custom HTML component allows you to embed your custom HTML/CSS code into your Beezer app.

You can add multiple third-party widgets in your app by using this component. 

Step 1: To add the Custom HTML component, please click on the Build section in your Beezer Dashboard and click on Pages section.

Create a new page by clicking the + sign next to Pages.

 

Step 2: Once you have added a new page, click on the + sign next to your page title. This will open the components menu with all existing components included in your Beezer subscription plan.

Click on the Integrations tab and select Custom HTML component. Click Add Custom HTML component button to add it to your selected page.

 

Step 3: Once the Custom HTML component is added, you can add your HTML code and it will get reflected in your app shell preview. Please click on the Save button after adding the code to preview it on the right-hand side in the app shell preview.

 

 

Please Publish your app once you have made the changes, so they get reflected in your live mobile app successfully.

Here are some sample HTML codes which you can try in your Beezer app:

  • Progress Bar

Uplink established

<label for="upload"> - Upload progress:</label><meter value="50" optimum="80" high="66" low="33" max="100" min="0" name="upload" id="upload">
at 50/100
</meter><hr><label for="file">File progress:</label><progress value="70" max="100" id="file"> 70% </progress>

 

 

  • Animated Welcome text with waves
 
<section>
<div class="content">
<h2>Welcome</h2>
<h2>Welcome</h2>
</div>
</section>
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
 
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
 
body {
display: flex;
background: #000;
align-items: center;
justify-content: center;
}
 
.content {
position: relative;
padding: 60px 0px;
}
 
.content h2 {
color: #fff;
font-size: 4em;
}
 
.content h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px #8338ec;
}
 
.content h2:nth-child(2) {
color: #c19bf5;
animation: animate 4s ease-in-out infinite;
top: 30%;
position: absolute;
}
 
@keyframes animate {
0%,
100% {
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
 
50% {
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
}
</style>

 

 

  • Swimming Fish

<marquee direction=""left""><img height=""148"" width=""154&quot;" alt=""Swimming" src="https://www.html.am/images/html-codes/marquees/fish-swimming.gif"></marquee>

 

  • Expandable Menu

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details><details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>

</details>

 

  • Digital Clock

<script>
$(() => {
setInterval(() => {
const date = new Date();
document.getElementById(
'da',
).innerHTML = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}, 1000);
});

</script>

<style>#outer{width:300px;text-align:center;margin:0 auto; font-size:2rem;}
#cover{padding:6px 0;border:2px solid #111; margin-top:20px;}
#da,#dt,#time{text-align:center;padding:3px}</style>


<div id="outer"><div class="ac b">Digital Clock</div><div id="cover"><div id="dt"></div><div id="da"></div><div id="time"></div></div></div>

 

 

  • Body Mass Index Calculator

<script>

function handleSubmit(){
var ms = document.getElementById("msm").value;
var height = document.getElementById("hm").value;
var weight = document.getElementById("wm").value;
if (
height == null ||
height.length == 0 ||
weight == null ||
weight.length == 0
) {
document.getElementById("bmi").value = "Pl. enter data.";
} else {
document.getElementById("bmi").value = "";
}
if (ms == "metric" && height > 0) {
document.getElementById("bmi").value =
Math.round((weight / ((height * height) / 10000)) * 100) / 100 +
" kg/m2 ";
} else if (ms == "us" && height > 0) {
document.getElementById("bmi").value =
Math.round(((703 * weight) / (height * height)) * 100) / 100 +
" kg/m2 ";
}
}
document.querySelector('.submitBtn').addEventListener("click", handleSubmit);

</script>

 

<style>#outer{width:90%;max-width:600px;background:#fff;margin:0 auto}
#cover{border:2px solid #111;padding:15px 0}
.main{table-layout:fixed;width:94%;border:0;border-collapse:collapse;margin:0 auto}
.main td{padding:0 8px;vertical-align:middle;border:0}
.main input{width:100%;border:1px solid #ccc;margin:2px 0;padding:0 2%;height:22px;text-align:right}.ac{text-align:center}.b{font-weight:bold}
.main select{width:100%;border:1px solid #ccc;margin:2px 0;background:#fff;height:22px}.w50{width:50%}.main button{width:100%;font-weight:bold;margin:3px 0;
color: white;
background: red;
padding: 10px 20px;
}.w60{width:60%}.w40{width:40%}

</style>


<div id="outer"><div class="ac b">Body Mass Index (BMI) Calculator</div><div id="cover"><form name="fn"><table class="main"><colgroup><col class="w60"><col class="w60"></colgroup><tbody><tr><td>Measuring System</td><td><select id="msm"><option value="metric">Metric (Kgs, Cms)</option><option value="us">US (lbs, inches)</option></select></td></tr><tr><td>Height<span id="thm"> (Cms)</span></td><td><input id="hm"></td></tr><tr><td>Weight <span id="twm"> (Kgs)</span></td><td><input id="wm"></td></tr><tr><td><button type="reset">Reset</button></td><td><button type="button" class="submitBtn">Submit</button></td></tr><tr><td>Body Mass Index (BMI)</td><td><input id="bmi" class="op"></td></tr><tr><td>Normal BMI range</td><td><input class="op" id="nbmi" value="18.5-25 kg/m2"></td></tr><tr><td colspan="2" class="ac"><br>The calculations are based on WHO recommendations.</td></tr></tbody></table></form></div></div>

 

Related articles

Powered by Zendesk