HTML ARCHIVE ACTIVITY #
The app HTML Archive Activity allows you to display web content (HTML files) by storing HTML files within the application so it can be read directly from the device.
NOTE: For best results, we recommend adding the following HTML ‘meta’ tag to the document ‘head’ of each of your HTML files:
<head> <meta name=”viewport” content=”width=device-width, user-scalable=no” /></head>
Content can be as simple as a single HTML file, or a complex directory structure of files and related image resources. Once you’ve composed what you want to show, simply zip the content using your favorite zip utility and upload the resulting file.
Benefits
- Does not require a web server to be hosting your web content;
- Since the content is embedded in the application, it’s only visible to the people using the application;
- Content can be as simple as a single html page, or an index containing links to other pages, images etc;
- It will be more responsive since the files will be loaded from the application on the device instead of having to be downloaded.
Drawbacks
- This does require some basic knowledge of HTML content creation, and basic usage of a zip utility;
- Since the files are built into the application, their content will not change after publishing the application. Therefore if any changes are required, the application would need to be published again.
To add HTML app activity, open the Components section, expand the Extensions category, and choose the HTML Archive.
Now, you can create a custom app section with JS and HTML5.
From the left side of the preview, you can upload content and work with the HTML index.
Click the Browse archive button to upload files. This must be a .zip file that contains your HTML pages and related assets. Maximum 25 MB in size.
The HTML index page is the filename of the HTML page you want to display when your activity is launched. You must include it in your .zip file and be sure you have typed the name correctly! Make sure you double-check this or your app will not build.
You can customize your HTML archive activity in the right part of the builder.
SETTINGS #
Basic settings of the chosen activity.
MAIN SETTINGS #
Here, you have an URL of this particular activity. You can later use it for cross-linking among other app activities (for example, a custom page).
In this section, you can change the title of your activity, add a subtitle and a description to it. This will help users navigate through your app.
You can also add a search bar to your HTML archive activity, which allows users to search in the app.
ADS #
Monetization settings section.
BANNER SETTINGS #
If you have previously set a monetization option to your app, you may or may not include a static banner in your HTML archive activity (tick if you want to display ads in this activity).
You can also choose an advertising network for this banner — AdMob or Facebook Ads.
INTERSTITIAL SETTINGS #
If you have previously set a monetization option to your app, you may or may not include interstitial ads in your HTML archive activity (tick if you want to display ads in this activity).
You can also choose an advertising network for this interstitial — AdMob or Facebook Ads.
STYLE #
A visual representation of your activity.
NAVIGATION DRAWER APPEARANCE #
The navigation drawer is a clickable icon in the left upper corner of your dashboard, that opens a list of all app’s features and helps users navigate through your app.
Here, you can set some navigation drawer’s parameters:
- Show activity in drawer (to make this activity seen on activities list);
- Show activity icon (to make an activity image seen on the list);
- Show activity subtitle (to make a subtitle seen on activities list);
- Add divider after activity (for the activity’s title to be divided from other titles by horizontal underlining).
APP BAR APPEARANCE #
The app bar is an upper line with the activity’s name on your app’s dashboard.
App bar leading section lets you choose what to depict on the app bar:
- Show back button (for making it possible to go back to the previous screen);
- Show drawer icon (for a drawer icon to be seen);
- Show nothing (for hiding the elements from the app bar).
You also have extra app bar settings here to tick:
- Show title in app bar (for your activity’s name to be seen);
- Use app bar background image (for uploading and adjusting a background image for your activity’s app bar);
- Use custom app bar theme (tick this section to choose title’s color, font, and font’s size).
DASHBOARD APPEARANCE #
This section defines how this activity’s icon will be shown on the app dashboard.
In ‘’Look’’ section, you can choose the symbol which will represent your activity on general app’s dashboard:
- Show card (for displaying this category as a card);
- As list item (for showing an activity name only);
- As list item with icon (for choosing an icon);
- As list item with image (for showing an activity name with an image);
- As column item (for showing an activity name centered in the column);
- As column item with icon (for showing an activity name with an icon centered in the column);
- As column item with image (for showing an activity name with an image centered in the column).
Also, you can use a custom size of activity icon, or set parameters regarding a quantity of columns, rows. You will also need to set column and rows sizes at the activity’s group level (list or carousel), as well as at the Dashboard level (left side of dashboard settings).
Tick the Use custom styling and set the icon’s parameters:
- Spacing (offset from the sides);
- Radius (icon’s shape);
- Fonts, color, and size of an icon’s title;
- colors (of a card border, card background, and card title background).
You can turn on the Icon setting, so that the icon will appear on the activity card.
Tick the Use background image – Browse images to upload and set the icon’s background picture.
ACTIVITY APPEARANCE #
This section helps you set an interface for your activity.
Tick the Use background image for activity if you want to upload your picture as a background image inside the activity.
Add the image with the Browse image button. The file should be an image.
The HTML archive activity itself also has a settings image (a gear). You can add ads, hide, duplicate, or delete the activity.
