Custom HTML Pages

Custom pages allow you to add any custom content you want to your app, it is not dependent on an external website.

For example, make a custom "About Us" page with text and images that works offline. Add custom Ionic tags, such as an  intro slider. Add a Google Map embed code to display a map, and more.

Creating Custom HTML Pages

To create a custom page, go to the App Customizer, and click Custom Pages. Below the list of pages, click "Add new page."

A modal will appear where you can enter your page details.

All custom pages only show for the app where you created them, so you won't see the page you just created if you go to another app.

Custom HTML

To create a page with simple text and images that works offline, you can add custom HTML content.

For example, try adding a page title, then add this to the page content area:

<h2>About Us</h2>
<h4>Fred Gaviria</h4>
<p>President</p>
<h4>Alice Floor</h4>
<p>Vice President</p>
<h4>Frank Tank</h4>
<p>Chief Operating Officer</p>

Next, click create page. If your page was created successfully, you will see it at the top of your custom pages list in the sidebar.

This page will not show up in your app preview yet.

To get this page in your app, you need to add it to your menu and build the app. Go to Menus and add this page to your active menu. To do that, click Menus => Your Menu => Add Item => AppPages => Your Page. Next, go to "Build and Preview" and click Build app.

When the build is complete, you should be able to see the page you created in your app preview by clicking on the menu item you added.

Advanced HTML and Ionic Components

The example above is very simple, but you can do advanced things with custom pages such as using Ionic components.

For example, try adding this to a custom page:

<ion-card>
  <ion-card-header>
    Header
  </ion-card-header>
  <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>

<button ion-button>Button</button>

See more  Ionic Components here.

It's important to note that you can use display components such as a card, but components that require data (such as a search box, form, or dynamic list) do not work without custom code.

Maps, Youtube videos, etc.

To add a Google Map, simply paste the map embed code into the page content box. The same goes for a YouTube or Vimeo video, or any type of iframe content.