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….