Among the many features of InstantEncore’s mobile service, the most malleable is the ability to create custom content areas (or “tabs”) in your mobile app.  Custom tabs allow you to share a wide range of content and information with your mobile patrons.  For example:

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 and then Tabs. Above the list of tabs, click the “+ Add Tab” link.

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. 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 an Existing URL to Create Your Custom Tab

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, the in-app 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.

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 other web content management systems.  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.

For more details on embedding images in Custom Tabs, read our Best Practices for Adding Images in Custom Tabs blog post.

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.

Basic HTML tab content opens directly in the app while Advanced HTML mode tabs will open in a special in-app browser that is styled with the same background image, highlight color, and title text. The only noticeable difference is that the Basic HTML tabs has the normal “Back” button but the Advanced HTML tabs have both “Back” and “Close” buttons.

The Special Case for Donations and Membership Tabs

Apple and Google both prohibit any app from processing donations and memberships within the app – which includes using the in-app browser.  So, there is a slightly different process for including these tabs in your app.

For details on how to set up a Donation tab, read our Best Practices for Encouraging Donations from Your App Subscribers blog post.