Setting up Google Analytics

To add Google Analytics tracking to your app, you will first of all need to create an account at https://analytics.google.com

Inside Google Analytics, you will need to create a ‘Property’ for your app. To do so, click on ‘Admin’ at the bottom left of the screen:

 

 

 

 

Now look at the middle column of the next screen, and select the drop-down menu, then ‘Create New Property’.

 

 

 

 

 

 

 

 

On the next screen, you are asked to choose if you want to track a Website or a Mobile App. Please choose ‘website’, then complete the rest of the fields. Where it asks you to enter the website URL, you can simply enter the URL of your business’ website.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

When you have completed all of the fields, click on ‘Get Tracking ID’ to get your Google Analytics Tracking code.

Now copy the tracking code, and navigate to the CMS, and to your required app in the app library, then click on ‘Settings’:

 

 

 

 

 

 

 

Now navigate to the ‘Analytics’ tab and copy your Google Analytics Tracking ID in to the field:

 

 

 

 

 

And finally, click ‘Save and Publish’ to save your code. You will now be able to log in to Google Analytics to see usage statistics for your app, from the date that you saved the Tracking ID in TheAppBuilder CMS.

Text, Images, Videos, Downloads and Links on a Page

Whereas a ‘list’ is a section where you want to put individual pieces of content, the ‘Page’ is a single post that you can add within a list.

The page widget is made up of easy to use modules, allowing you full flexibility to add text, images, videos and other web content, and to attach files. Each module on a page is edited independently, and the order of modules can easily be changed.

To add a Page, begin by selecting the + icon within your list, and choosing the Page widget:

 

Now that you have added your page widget, you should enter the page title, then select the + icon to add your first module on the page:

 

 

OK! Now you have created the page and given it a title. Select one of the module types to begin adding content on the page. We’ll start with text, seeing as you’ll probably have some text on your page.


Adding a Text Module

When adding a text module, you will be presented with some editing tools, allowing you to change the format of the text, bullet lists and insert links. While the text box initially looks small, fret not… it will automatically re-size as you type or copy text in to it.

 

 

 

Easy! Now, you’ll notice that above and below the module that you have added on the page, there are more green + symbols. Pressing one of these will allow you to add your next module, either above or below the current one. The red X will delete the module that you currently have selected. So don’t press that unless you definitely want all of your hard work obliterated.

If you press ‘Save and Publish Now’ at this stage, your new page will appear (in whichever list you’re publishing to) with the text you have just added:

 

 

 

Adding an Image Module

Now lets add an image to go along with the text. Click the green + symbol either above or below the text module and choose ‘image’. You’ll be directed to open the media library, where you can select a previously uploaded image, or add a new one.

To add a new one, either drag and drop and image from your PC, or press Choose File to allow to allow you to upload:

 

 

 

There’s a separate guide for  deleting and searching in the media library – so if that’s what you’re looking for, then go ahead and click here.  As you can see below, we have now added an image module below our text module:

 

 

 

Re-Ordering Modules on the Page

You’ll also notice now that we have two modules, another icon has appeared to the right – green ‘up and down’ arrows. These allow you to easily re-order the modules on the page. For example, below you can see that we have clicked the ‘up arrow’ to move the image module to the top of the page.

 

Adding a Video Module

Adding a video module works in the same way as the image module, where you’ll have to ope the media library, where you can choose a previously uploaded video, or upload a new one.

Videos added directly to the CMS using the video module will stream on the user’s device. We currently support mp4 videos, up to a maximum of 50MB. If your video is larger than this, you can compress it, or embed it from a third party service like YouTube or Vimeo.

 

 

When you add a video directly from your PC, on the app it will show a grey box with a play button. If you want to set a featured (thumbnail) image for the video, you can do that by pressing the blue, ‘Set Featured Image’ button:

 

Adding a Download Module

The download module allows you to present a file on the page for your users to download. You can upload any type of file, but we recommend PDFs because your app has a PDF reader built-in.

 

 

 

 

 

 

 

 

 

 

A download widget is added in the same way as an image or video module, where you’ll open the media library and then either choose a file, or select one from your PC.

 

Adding an HTML Module

You can embed third party content in your app using the HTML module. You’ll need the correct embed code to do so. Here, you can embed things like videos from YouTube or Vimeo, animated GIFs, polls and quizzes from Playbuzz or Apester, or Maps from Google Maps.

 

Adding an ‘Existing’ Module

The ‘existing’ module allows you to link to other in-app content from within your page. For example, if you added a new item to your main menu, and you wanted to make a news story about your new section in the app, you can link straight to it from within your story.

If you select the  + icon in our modular page and choose ‘existing’, you are presented with a list of all content in your app, which is also sortable and searchable, to make it easier to find what you’re looking for:

    

 

Simply select the app content that you wish to link to by clicking on it, and it will be added to the module. In the example above, we have added an ‘existing’ module below a news story, to link the user to the news feed. Removing an ‘existing’ module only removes it from this location. Only when all instances of linked content are removed, will the item be deleted.

 

Deleting a Module

To delete a module from your page, simply click the red X icon to the right of the module. You will be presented with a verification message asking if you are sure that you wish to delete that content:

Enable Liking & Commenting per Channel or Page

Our social features – liking and commenting, can be enabled and disabled at channel level, and even if you have liking and commenting enabled for your channel, you can still choose to disable these for particular articles or pages.

Enabling / Disabling Social Features for a Channel

Click on the Cog Icon at the top of the CMS:

 

 

Then select ‘Channels’ under ‘Channel Management’ on the left menu

 

 

 

 

 

 

Now choose the channel for which you want to enable or disable liking and / or commenting by clicking ‘View’:

On the next screen, you have the ability to enable and disable liking and / or commenting by selecting or de-selecting the check boxes, then clicking ‘Save Changes’

 

 

 

 

 

 

 

 

Enabling / Disabling Social Features for a Page

If you have commenting and / or liking enabled for your channel, you will see the options to turn off commenting and liking for an individual page on the right, just under the Save and Publish Button:

 

 

 

 

 

 

 

Simply un-tick the required checkboxes to turn off social features for that page.

 

Likes and Comments Enabled
Likes Enabled, Comments Disabled

 

Manually adding a new user to your app

Manually adding a new user to your app

As an organisation admin, you can manually add new users to your organisation in the CMS. It’s likely that your users will simply be added by uploading a regular CSV file, but you can also add users manually should you wish.

To do so, click on the ‘cog’ symbol in the CMS menu bar:

 

You will now be presented with the organisation admin screen, where you can manage your users. To add a new user, click on the blue ‘Add New User’ button:

 

You will now be able to enter the details of the new user on the following screen:

 

Complete the appropriate fields, and add a profile picture for the user if you like. Remember that app usernames have to be unique, so you’ll get an error message if you try to duplicate a username.

You’ll see two tick-box options:

User Active‘ is ticked by default. You can un-tick this if you wish to remove the user’s access to your organisation.

Exclude from User Sync‘ – ticking this option means that the user will not be deleted when bulk uploading using a .csv file. This can be useful if you want to add someone who would not normally be on your .csv user upload lists.

When you have completed all required fields, click on the blue ‘add user‘ button to add the user, or ‘cancel‘ to return to the previous screen:

 

You can also use this screen to give someone access to the CMS for adding content. Click here for the full explanation of access levels and how to make someone an app editor.

Understanding Publishing Statuses

Our publishing method allows you to have control and flexibility over your content.

This allows many different CMS users to work on and publish content independently, without publishing others’ unfinished work.

When you’re in the process of creating a new content item, the status of that content will be ‘draft’:

 

 

It will then remain in the ‘draft’ state until published. You can choose to either publish immediately, or to schedule publication a the date and time of your choosing.

If you click ‘Save & Publish Now’ you’ll see the content status change to ‘Published’, and your content will be available for app users.

 

However, if you instead choose to schedule the publication, you must first click ‘Save’, and then upon clicking on ‘Schedule Publish’, you’ll be asked to choose a date and time. At this date and time, the content will become available in the app, and status will change from ‘draft’ to ‘published’:

 

 

Making a change to an already published content item

If you make a change to a piece of content that has already been published, but click ‘Save’ to save changes without publishing them, you’ll see a different status – Published with changes drafted. This is letting you know that there’s an older version of this page published in the app, but your most recent changes have not yet been published. When you’re ready to publish your recent changes to the app, you click on Save & Publish Now, or schedule the update for a time and date of your choosing.

 

You’ll also be able to see the publication status of items when looking the them from the list view in the CMS, allowing you to quickly identify any pieces of content that are still being worked on:

 

However, please note that when you’re looking at the top-level of a list – although it may show the status of the list as ‘Published’ – it’s still possible that there might be draft content items within that list.

 

 

Publishing in Bulk

It’s possible to publish all draft items at the same time using the ‘publish’ menu item on the left of the CMS. Using this function will however, publish all draft content across all of your app – so if using this, be sure that everything is actually ready to be published. If you have been working on only one item, you should simply publish it using the options above.

 

 

Adding Web, Email and Telephone links in Text

In this section:

  • Adding Web Links in Text
  • Adding Email Links in Text
  • Adding Telephone Links in Text

Adding Web links in Text

To add a web link, simply type the URL then press the space bar. This will automatically create a link. You will know that it has been successful as the text will change to blue after you press space. For example:

Should you wish to change your link to display some custom text instead of the URL, highlight the URL and click the ‘Insert / Edit Link’ button

In the pop up, you can enter the text that you wish to display for the user to tap to open the link, then click OK:


The link will now be updated to the text that you have set:

Adding Email Links in Text

As above with web links, pressing the space bar after entering an email address will also create a link which will open your user’s default email client when tapped, with the email address in the ‘to’ field.

If you wish to change the email address to display some custom text instead of the email address, click the ‘Insert/Edit Link’ button as before, and set the custom text before clicking OK:

 

 

You will notice that the URL field contains ‘mailto:’ before the email address. Please leave this in place to allow the link to open your user’s email client.

Once you click OK, the email link will be changed to the custom text:

When a user taps on this text, it will open their smartphone’s default email client, with the email address populated in the ‘to’ field:

Adding Telephone Links in Text

If you wish to add tappable telephone links to allow your users to dial a number directly from the app, you should enter your text as normal, highlight the number, then click on the ‘Insert/Edit Link’ button:

In the URL field, type tel: followed by your number, without spaces. In the ‘text to display field’, you can leave spaces in the number should you wish:

 

Press OK, and your number will become a link. When a user taps on the number, it will open their smartphone’s default dialler:

 

 

Choosing a Layout

Our new system offers you much more control over how your content looks. You can now choose from eight layouts, with our without a hero image, allowing you sixteen different layout options. In addition, you can choose to display an icon indicating the type of media, and the date of publication.

Choosing a layout type

Choose the Layout tab to change your content’s layout

 Each layout displays your content in a different way:

Small List without Hero
Small List with Hero

 

 

 

 

 

 

Medium without Hero
Medium with Hero

 

 

 

 

 

 

2 Column without Hero
2 Column with Hero

 

 

 

 

 

 

Small magazine without hero
Small magazine with hero

 

 

 

 

 

 

Large Magazine
Feed list

 

 

 

 

 

 

Circles List
Gallery List

 

 

 

 

 

In addition, you can choose to include icons showing the media type, date of publication, or time since publication, using these controls on the layout screen

Use your sandbox app to experiment and find out which layout best suits the type of content you are adding. If you have a list of documents with no imagery, then you might find that the feed list compensates by automatically including colourful icons. However if you have lots of beautiful images to go along with your content, the large magazine list will allow it to catch your user’s eye.

Working with the Media Library

The Media Library is where all of your images, videos and files are stored and managed.

 

To view your media library, simply click ‘Media’ on the menu on the left of the content management system:

 

This will open the Media Library, where you can manage your media content. You can search for previously uploaded items, upload new items by dragging and dropping, or delete by clicking on the item and pressing the red ‘bin’ icon:

 

To delete media from the library, simply click on the item you wish to delete, then press the red bin icon, and confirm that you definitely want to delete that item:

 

 

Using the Media Library to insert content in Pages

When you’re adding images, videos and files to a page, click the + icon, then click on ‘Media Library’, and you’ll be able to either choose a file from the media library, or add a new image, video or file to be inserted on the page:

When you click on ‘Open Media Library’, you can upload a new file from your PC by dragging and dropping, or clicking on ‘Choose File’, then ‘Insert Selected Media’ to add it to your page

 

Featured images for videos and PDFs are not set inside the media library. Once you add the video or PDF to a page, you’ll see an option to add a featured image to it, which will display in your app, with the ‘Play’ or ‘Download’ icon on top of it:

 

 

 

 

 

Embedding Youtube Videos

With the addition of our media library, you can upload your own videos within modular pages, meaning that you can rely less on third party video services such as YouTube. Should you need to however, it’s still possible to embed YouTube videos. This is done in the HTML module on a modular page.

1. Add an HTML module on a modular page. If you’re not sure how to do so, please read the guide on modular pages.

2. Copy all of the following HTML code in to your HTML module:

<!DOCTYPE HTML>
<html>
<head>
<title>Document Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-video-container
{ position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.tabweb-video-container iframe
{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
</style></head>
<body><div class="tabweb-video-container"><iframe src="https://www.youtube.com/embed/g1mUNUDAfHY" frameborder="0" allowfullscreen></iframe></div></body>
</html>

3. Find the YouTube video ID for the video you wish to embed, and replace the example ID g1mUNUDAfHY in the HTML code that you have copied in to the HTML module. This YouTube ID can be found in the URL for the video, after the = symbol. For example:

 

4. The YouTube video ID has been highlighted in the address bar above. Click on Save & Close or Save & Publish, to publish your content.

The YouTube video will now be embedded on your page, as per below:

Embedding Forms

Forms are a great way of capturing information from your users. These can be directly linked in the in-app browser, or embedded in your app using the HTML module on a Modular Page Widget if you want to add other content alongside them.

There are many form builders online, such as Typeform and Wufoo, and most will work with TheAppBuilder platform. Check with your data security officer before deciding to use one of these third-parties in your app, especially if you’re going to be collecting personal information from your users.

When you create a form, you will see a ‘share form’ button. The example below is from Wufoo, but most form builders function in a similar way.

 

Click on ‘share form’ and you will be presented with the following screen:

 

 

If you simply want the form to open ‘as-is’ within the in app browser, simply add a new web link to a list, and input the direct link for your form:

 

And the form will open in the in-app browser like so:

 

The user experience is one of staying within the app, rather than being linked out to external content. While we’re simply displaying a web page within the app, the in-app browser gives the user a nice, native-like experience.

 

Or, if you want to add some extra images or text to a page, and embed the form, copy the following HTML code in to an HTML module on your Modular Page:

<!DOCTYPE HTML>
<html>
<head>
<title>Wufoo Embed</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-container
{ overflow:scroll; }
</style></head>
<body>
<div
class="tabweb-container"><iframe
src="PERMANENT LINK GOES HERE"
width="100%" height="1500px"
frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe></div>

</body>
</html>

 

Now copy your permanent link for your form, and copy it in to the HTML code where you see “PERMANENT LINK GOES HERE”. Leave the ” ”  at the start and end of the link in place in the code.

Your HTML module should now look like this:

Now press Save and Publish to publish your Wufoo form in the Modular Page:

 

 

What if your form looks ‘cut-off’ and the submit button isn’t visible?

If your form is more than just a few fields, using the default HTML code above may cause your form to be cut off at the bottom, with the submit button not visible to the user. If this happens, simply adjust the ‘height’ value in the code in your HTML module. The default height is set as 1500px. Try increasing the value and clicking Save and Publish each time until your entire form and the submit button is visible.

After adjusting the height, our full embedded form with the submit button is now visible: