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: