How to Create Custom Tabs for Your App
To create a custom tab in your mobile app, you will need to log into your InstantEncore account and go to Mobile >> Tabs. Scroll past the list of current tabs, and you will find the "Add a Custom Tab" area.
Here, you can set the name of your new tab by entering the text into the Label field. The italicized "i" is the default icon associated with new tabs. You may change this by selecting "Change Image."
You may select one of the icons from our library, or you may upload your own custom icon. Generally speaking, we encourage you to upload white icons with transparent backgrounds - use .PNG image files. Icons should be uploaded at 72px X 72px.
Next, you need to decide if you will create the HTML content for the custom tab or if you will link to an existing web page.
Using the HTML Editor to Create Content for Your Tab
To create the content for your tab, select "Write HTML for the page," and click on "Create." This will open a page with an HTML editor for creating and changing content.
The HTML editor has a look and features similar to word processing software or another web content management system. You can format the text, add bullets or numeric lists, create indentions, add hyperlinks, insert images, create tables, and more.
At the bottom of the editor, you will see two tabs for viewing - Design and HTML. The Design view shows the content as it will appear in the app, while the HTML view shows the programming code for the content. You may use either view when creating and editing content for your custom tab.
TIP: If you insert an image into a custom tab, you may wish to set the image's size in proportion to the size of the screen on which the tab is viewed. Using a relational size will allow the image to adjust its size depending on if it is viewed on a smartphone, tablet, or mini-tablet. To set the image size, go to the HTML view. Find <img src="http://www.website.com/image">, and add style="width: __%" before the > closure.
One of the many things you can do with the HTML view is to add <form> and <iframe> elements, as well as other advanced HTML elements. If you do use advanced elements, you will need to toggle the "Use Advanced HTML mode for this tab" checkbox at the bottom of the screen.
Custom tabs in Advanced mode will open in a browser within the app instead of being directly embedded in the app. Basic HTML custom tabs will have the app's name and highlight color at the top, along with a "Back" button. Advanced HTML custom tabs will open in a browser with the app's custom background image. Mobile users simply tap on the "Close" button at the bottom of the Advanced tab to return to the app.
 |
| Basic and Advance HTML tabs from Austin Symphony Orchestra. Click image for larger view |
To create a custom tab linking to an external URL, select "Display an existing web page," enter the page's address, and click "Create." When your app's users tap the tab icon or label text in the menu, a browser will launch featuring the existing web page. To return to the app, they simply tap on "Done" in the bottom toolbar.
TIP: If possible, link to a mobile-responsive or mobile-specific URL so that your app's users continue to have an experience that has been optimized for their mobile devices.
The Special Case for Donations and Membership Tabs
- Add a tab using the "Write HTML for the page" option.
- Enter your message to prospective donors or members.
- Add text or an image linked to an external URL where your mobile users can make their donations or sign-up for membership.
- Go into the HTML view.
- Find <a href="http://www.website.com/page">, and add target="_system" before the > closure.
No comments:
Post a Comment