Custom HTML Files

This post will demonstrate how to add a custom HTML file inside your final application. It will improve the experience for your end-user even more. The image below exemplifies this, a fully customized ‘About US’ page used linked to a button on the sidebar in a RUN page (the page that your end-users see when accessing your application) .

Of course, this is just a simple example, and you can create an HTML page for your RUN in a much more personalized way.

Using a custom HTML File in your RUN

Follow this steps to create the HTML above:

• Create a .html file with a HTML content;
• Upload this file to the TagoIO Files;
• Copy the file URL;
• Go to your RUN > Sidebar > Select the option “Show HTML File content” and paste the file URL;

Simple like that. See here an example of the HTML content used:

<style>
  .page {
    height: 100%;
    background: #dadada;
  }
  .header {
    background: #0d4f88;
    text-align: center;
    padding: 10px;
    color: white;
  }
  .content {
    padding: 10px;
  }
  h1 {
    margin: 0;
    font-size: 2rem;
  }
  p {
    margin: 1rem 0;
  }
  .header img {
    height: 100px;
  }
</style>
​
<div class="page">
  <div class="header">
    <img src="https://api.tago.io/file/5bec9f3210d91c00322c19b2/acme.png" width="200px" height="100px" alt="logo"></img>
    <h1>About us</h1>
  </div>
​
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, pro ea homero tractatos contentiones. Et ubique volutpat his, vis ipsum tacimates ea, ne pro homero imperdiet. Causae omnesque est no, an est fugit platonem, scriptorem delicatissimi nam ad. In cibo disputationi deterruisset nam, est quis efficiantur no, qui ut diceret laboramus.
    </p>
​
    <p>
      At qui voluptatum appellantur, usu ne alia novum fabellas. Mel id prima eloquentiam. Cu sea persius nostrum voluptaria, impetus comprehensam ut per, id vix falli argumentum liberavisse. Vix everti conclusionemque at. Quis erat reprehendunt mea ne.
    </p>
​
    <p>
      Probo vivendo cotidieque at his. Facer persequeris an eos. Ex nam numquam copiosae petentium. Id his dicam mandamus definitionem, et sed dolore integre ocurreret. An vero intellegat dissentiet pro, ut sale solum illud per. Ne odio omnis tacimates duo, per rebum aeterno repudiare ad, odio argumentum usu cu.
    </p>
​
    <p>
      Et reque vulputate eloquentiam cum, ad mollis maiestatis liberavisse eum. Eam nihil constituam te, ut prompta deleniti salutatus qui. Has te altera appareat voluptaria, est mucius apeirian molestiae ut. Eu vidit antiopam mea, quo ne ridens audiam referrentur. Viderer sapientem ius in. Te nam nostrud interpretaris.
    </p>
    
    <p>
      Ei vix possim suscipit, vivendum deseruisse vim cu. Ei primis iracundia consequuntur sit, similique honestatis interesset quo an. An eius mazim salutandi vim, tantas vituperata definitiones sea ex, enim impetus vivendum ut vix. At ius amet everti vituperatoribus, in graeci discere quaestio his. Ut velit nobis vituperata cum, splendide eloquentiam ex nam.
    </p>
  </div>
</div>

With this example, it is important for you to realize two points. The first point is that you can use .CSS styles in your HTML file, just do as you did in the example above, using a tag and adding your CSS styling inside the tag. And the second point is a simple note: you don’t have to place the tag at the beginning and end of the file, because your HTML file is already contained on another page, so there’s no need to worry thereby.

Finally, I recommend everyone who read this post to try this feature a little deeper in their RUN applications. This is a powerful feature that can transform the look of your application. Let me know if you have any questions about this post.

Thanks!