Unbounce is one of my absolute favorite companies. They have provided a powerful platform for marketers to create landing pages in a very short amount of time and use those landing pages to personalize their web experience for each unique group of visitors to visit the company’s website.

Recently a few of our customers have come forward with Unbounce pages featuring quizzes, which I think is awesome, so I thought I’d simplify the process for everyone else by making a guide for how to add a quiz into an Unbounce landing page.

Let’s get to it.

1. Create an Unbounce account (if you don’t have one) and set up a page.

I’m not going to walk through the steps of making an account, it’s pretty simple and Unbounce has a ton of information on how to get started so I’ll let them handle this part. The thing you’ll need to get started with a quiz landing page is an Unbounce template that has space for a quiz. One good way to find a template is to find one that has space for a video and use the video space for a quiz instead.

2. Add a custom HTML block for your quiz to go in

HTML block is an option within Unbounce (as pointed out below). It’s pretty easy to select and drag onto your landing page, from there all you have to do is paste in the quiz embed code which is the next step.

3. Copy your embed code from Interact and paste it in

Assuming you’ve already made a quiz, this is simple. Just navigate to interact, click the “embed” link next to the quiz you want to add into Unbounce and copy the iframe embed code. Then paste it into the HTML widget that you added in the previous step.

4. Done. Now you have a quiz in Unbounce

That’s all it takes. Now my Girl Scouts quiz is in my Unbounce page and I can send it out our use it as part of my marketing campaign. If you have questions email help@tryinteract.com or go to tryinteract.com to make a quiz.

💡 Helpful tips:

If you're finding that there is a larger than intended white space below your quiz embed, there's a few things you can do to help this.

  1. The best and most recommended option being to use our Javascript embed and enable 'Auto-Resize'. Using this combination will automatically resize the quiz depending on the content that is currently being shown.

  2. If you don't want to utilize our Javascript embed code and want to stick with our iFrame code, you'll need to play around with some custom sizing. There isn't a one size fits all for every quiz and every page so there will be a bit of trial and error here. You can also try out the "Fit embed to container" option, this will stretch the quiz to the size of the container you're placing it in.

Did this answer your question?