How to Embed Polls and Quizzes from Playbuzz and Apester

Adding a quick poll to your app is a great way to take your users’ temperature on a topic, while quizzes and games can add some lighthearted fun – sometimes it’s good to have something a bit different to keep things interesting.

There are many free online resources for creating polls and quizzes, but two that work well within our platform are Playbuzz and Apester, and they’re both free!

When embedded on to a page, the user can take the poll or quiz:

    

 

All Apester and Playbuzz activities can be embedded within HTML modules on the Modular Page Widget.

When you have finished creating an Apester or Playbuzz activity, you will see a button to generate an embed code, which will present you with the following screen:

 

Example from Apester

 

Example from Playbuzz

Note: with Playbuzz, you’ll probably want to un-tick the three options at the bottom!

Copy this embed code in to a notepad file to make things easier.

 

Now that you have generated your embed code, you will need to create a full html document using the template below. In the embed code from, there are two parts: <script> and <div>, which need to be copied separately in to the full HTML code. What you’ll get from Playbuzz or Apester will have both parts (Script & Div) and will look like this:

<script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src=’https://embed.playbuzz.com/sdk.js’;fjs.parentNode.insertBefore(js,fjs);}(document,’script’,’playbuzz-sdk’));</script>
<div class=”playbuzz” data-id=”9ca0eeee-e7ee-4bb8-be7c-d7b30e506c5e” data-show-info=”false”></div>

So you’ll need to take these two parts and copy them in to the template below. Copy the below template in to notepad first:

<!DOCTYPE HTML>
<html>
<head>
<title>EmbedPoll</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style>

//Copy embed code here from <script to </script>

</head>
<body>

//Copy embed code here from <div to </div>

</body>

</html>

It works best to copy the above in to the same notepad document where you copied your apester embed code, then copying the whole thing in to TheAppBuilder CMS.

After you copy your code in to the CMS, if you’re using Apester there is one final thing you need to do: where you see src= in the script part of the code, you need to enter https:// so that it looks like: async src=”https://static.apester.com….

 

 

Embed a Twitter Feed or Timeline

Embedding a Twitter Timeline

You can also embed a twitter timeline for a user. This might be useful instead of using a ‘Web’ widget to link to your company’s Twitter page. Embedding your company’s Twitter timeline inside the app rather than linking it as external content gives your user a better, smoother experience.

  1. Navigate to the Twitter timeline that you want to embed, and copy the user URL. In the example here, we’re embedding TheAppBuilder’s Twitter timeline, so the URL we’re looking for is https://twitter.com/theappbuilder. This will be your own company’s Twitter URL:

 

2. Copy the following HTML code:

<!DOCTYPE HTML>

 <html>

 <head>

 <title>Twitter Feed</title>

 <meta name="viewport" content="width=device-width,initial-scale=1" />

 <style>body { margin: 0; }</style>

<script src="https://platform.twitter.com/widgets.js"></script>

</head>
 <body>

<a data-chrome="nofooter" class="twitter-timeline" href="https://twitter.com/theappbuilder" data-dnt="true" ></a>

</body>
 </html>

 

3. Paste the HTML code in to the HTML module on your modular page, and replace the twitter url with the url that you require (highlighted in red in the above HTML code):

Now click Save and Publish.

On the mobile device, this will look as follows. You now have a live twitter feed embedded in to your app, giving a much more fluid user experience than simply linking to the external content:

 

Embedding Surveys

You can embed surveys within your app from a range of third party online survey providers. The most popular is Surveymonkey, but most providers work in the same way. For this example, we’re going to be using Surveymonkey.

In Surveymonkey, when you have created your survey, navigate to the “Collect Responses” screen:

 

 

In this screen, you will need to create a new collector for your survey. On the Collect Responses screen, choose ‘Web Link’ as a new collector:

 

After clicking on Web Link, you will be presented with the following screen, where you can customise some options for your survey. Set these options as required, then copy the URL you are given for the Web Link:

 

 

With other providers, you’re also just looking for the direct web link to the survey.

In TheAppBuilder CMS, add a Web Page to your list where you want to the survey to appear:

 

And then simply copy the direct survey link in to the URL box:

 

When you publish, and the taps on the web link in your list, it will open the survey in the in-app browser. The user won’t be taken out of the app, and they’ll have a nice native-like user experience.

 

 

When your users compete the survey in the app, the responses will be collected by Surveymonkey, or whichever provider you have chosen, and you can log in to that provider to download and analyse your responses.

If you’re trying to use another provider, and you’re stuck – get in touch with our support team, and we’ll be happy to help you to get your survey published in your app!

 

 

Embed Maps from Google Maps

Embedding Google Maps

It’s possible to embed Google Maps on a modular page to demonstrate the location of one of your businesses sites, or the location of a company event. As with all embedding of external web content, this is done using the HTML module on a Page.

Start by navigating to https://maps.google.com and searching for the location or area that you require:

Now on the menu on the left, click on ‘Share’

 

 

 

 

 

 

 

 

In the box that pops up, select the ‘Embed Map’ Tab, then copy the embed code:

 

 

 

 

 

 

 

 

 

Open Notepad, then paste the embed code in to Notepad:

 

 

Now delete everything apart from the link (everything before https and everything after the link itself – as highlighted below)

 

 

Leave that aside for now, and copy the following HTML code in to an HTML module on your page in the CMS:

<!DOCTYPE HTML>
<html>
<head>
<title>Map</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="MAP EMBED LINK GOES HERE"
width="100%" height="500px"
frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe></div>

</body>
</html>

Now copy your link from Notepad in to the HTML code in the CMS, where MAP LINK GOES HERE is highlighted in red above. Ensure that you copy your link within the speech marks.

The HTML module on your page should look as follows:

 

 

 

 

 

 

 

 

Now click save and publish to see your map embedded on the page in your app:

Distribution Options Overview

TheAppBuilder provide iOS and Android native apps in parallel with a Web app for all modern browsers. To assist with the promotion of your apps TheAppBuilder provide a branded app download web page. (Click for example)

This page ensures that you can promote a single link to all your employees irrespective of what device they are choosing to use.

However you will be required to choose the subsequent distribution method of the apps.

Apple Distribution Options

Distribution
Option
User
Population
Distribution Registration Required Approval Required? Certificate Signing
Enterprise Download Employees only Downloaded from TheAppBuilder servers Apple Developer Enterprise Program No Yes
Mobile Device Management (MDM) Employees only Pushed to devices using the MDM solution Apple Developer Enterprise Program No Yes
Apple Volume Purchase Program (VPP) Employees or external stakeholders CSV file of promo codes and urls Apple Deployment Program + VPP Yes No
Public App Store Employees or external stakeholders App Store Apple Developer Program Yes Yes

Enterprise Download

In this option the app user downloads the app to their device directly from the branded download page provided by TheAppBuilder.  This is available for those with corporate or personal mobile devices, however they must be employees or members of the organisation.

To distribute apps in this manner requires your organisation to be registered on the Apple Developer Enterprise Program.  Registration with Apple on this program can take up to a week provided you have all the required information available. Following registration, Apple enforce a 2 week period before you are permitted to publish your first app.  Thereafter there are no time restrictions or approval periods for publishing apps.

There is a signing process for iOS apps which associates your app with your Apple Developer Enterprise Program membership. You will be required to either provide TheAppBuilder Dev Team with access to your Apple Account via the team access function, or have a team member in your organisation who has experience of creating and signing enterprise apps.

Apps distributed in this manner can also be distributed in parallel via an MDM. It is common for enterprises to distribute apps via MDM to users with corporate mobile devices and via Enterprise Download to those using personal devices.

Updates: A drawback of the Apple Developer Enterprise Program method is that when an app update is made all users must re-download the app file.

  • Timeline to distribute first app: 3 weeks
  • Timeline for subsequent apps: 1 day
  • Registrations Cost: £249 per year for Apple Developer Enterprise Program

Mobile Device Management (MDM)

Apps can be distributed to your employees via an MDM solution. This often takes the format of an internal app store or automatic installation of apps on company owned devices. Depending on the configuration of your MDM you can distribute to corporate or personal mobile devices belonging to employees or members of your organisation.

Apps distributed in this manner can also be distributed in parallel via Enterprise Download, Volume Purchasing Program (VPP) or the public App Store. It is common for enterprises to distribute apps via MDM to users with corporate mobile devices and via Enterprise Download to those using personal devices.

Registration for this option can be either on the Apple Developer Program or the Apple Developer Enterprise Program. Where the app is MDM only or MDM+Enterprise Download the registration required is on the Apple Developer Enterprise Program. Where the app is distributed via MDM + either VPP or public store the registration required is on the Apple Developer Program.

Registration with Apple on either program can take up to a week provided you have all the required information available. Following registration, Apple enforce a 2 week period before you are permitted to publish your first app.

There is a signing process for iOS apps which associates your app with your Apple Developer Enterprise Program or Apple Developer Program membership. Read more about the signing process here.

  • Timeline to distribute first app: 3 weeks
  • Timeline for subsequent apps: 1 day if MDM only or Enterprise Download, 2 weeks if VPP or Public App Store.
  • Registrations Cost: £0

Apple Volume Purchasing Program (VPP)

Using the Apple Volume Purchasing Program apps are downloaded via a private section of the Apple App Store.  Users access this private store by typing in a unique promo code or clicking on a unique url.  These are unique to each user and are distributed by the employer.  It is possible to distribute to both employees and external stakeholders on either corporate or personal devices.

To distribute apps in this manner requires your organisation to be registered on the Apple Deployment Program.  Registration with Apple on this program can takes about an hour provided you have all the required information available. You are required to have a DUNS number. Following registration, you must enroll on the Apple Volume Purchase Program which take just a few minutes.

When you publish an app there is an approval process with Apple which can take up to 2 weeks.

  • Timeline to distribute first app: 2-3 weeks
  • Timeline for subsequent apps: 1-2 weeks
  • Registrations Cost: £0 per year

Public App Store

User downloads the app via the app store on their device. They can search for the app or be sent a link to it.  Employees and external stakeholders can both download the app on either corporate or personally owned devices.

To distribute apps in this manner requires your organisation to be registered on the Apple Developer Program.  Registration with Apple on this program can take up to a week provided you have all the required information available.

When you publish an app there is an approval process with Apple which can take up to 2 weeks.

  • Timeline to distribute first app: 2-3 weeks
  • Timeline for subsequent apps: 1-2 weeks
  • Registrations Cost: £79 per year

Android Distribution

Distribution
Option
User
population
Distribution Registration Required Approval Required? Certificate Signing
Enterprise Download Employees or external stakeholders Downloaded from TheAppBuilder servers None No No
Mobile Device Management (MDM) Employees only Pushed to devices using the MDM solution None No No
Public App Store Employees or external stakeholders Play Store Android Yes Yes

Enterprise Download

In this option the app user downloads the app to their device directly from the branded download page provided by TheAppBuilder.  This is available for employees or external stakeholders on corporate or personal mobile devices.

There is no registration with Google required and there is no signing process for your IT dept to undertake.

Apps distributed in this manner can also be distributed in parallel via an MDM. It is common for enterprises to distribute apps via MDM to users with corporate mobile devices and via Enterprise Download to those using personal devices.

Updates: A drawback of this method is that when an app update is made all users must re-download the app file.

  • Timeline to distribute first app: 1 day
  • Timeline for subsequent apps: 1 day
  • Registratons Cost:£0

Mobile Device Management (MDM)

Apps can be distributed to your employees via an MDM solution. This often takes the format of an internal app store or automatic installation of apps on company owned devices. Depending on the configuration of your MDM you can distribute to corporate or personal mobile devices belonging to employees or members of your organisation.

Apps distributed in this manner can also be distributed in parallel via Enterprise Download or the public App Store. It is common for enterprises to distribute apps via MDM to users with corporate mobile devices and via Enterprise Download to those using personal devices.

Unless the app is being distributed via the Play Store in parallel as MDM there is no registration or signing process required.

  • Timeline to distribute first app: 1 day
  • Timeline for subsequent apps: 1 day
  • Registrations Cost:  £0

Play Store

User downloads the app via the Play Store on their device. They can search for the app or be sent a link to it.  Employees and external stakeholders can both download the app on either corporate or personally owned devices.

To distribute apps in this manner requires your organisation to be registered on the Google Play Developer Console. Registration take 1 day.

When you publish an app there is an approval process which takes up to 1 day.

  • Timeline to distribute first app: 2 days
  • Timeline for subsequent apps: 1 day
  • Registrations Cost: $25 one off for Google Registration