Help / How to embed your quiz

How to embed your quizzes

Make an awesome quiz with FlexiQuiz and embed it on your website or blog.

You can share a quiz using the quiz link or Respondent portals. Customize the FlexiQuiz pages with your colors, fonts and text so that they look like they're part of your site.

We offer some basic HTML code so that an iFrame can be added to your website source code. If you have a Premium or Enterprise plan, we can provide embed code responsive to screen size.

This guide shows you how to embed a quiz and Respondent portal on your website or blog.

How to embed your test using a quiz link

  1. From your main dashboard, select the quiz you want to embed. Click on the quiz and go to the Publish screen.
  2. Make sure your quiz is Open.
  3. From the Distribution list, tick Quiz Link Flexiquiz publish page
  4. Copy and save your unique link that shows in the white box.

    You will use this URL in the src property of the following code so that people can view your quiz.

  5. Next, copy the following embed code: 
        
<iframe src="YOUR QUIZ URL HERE?i=t" style="min-width:100%;border-width:0;height:500px;overflow:scroll;"></iframe>
  6. Replace the YOUR QUIZ HERE with the URL for your quiz

    7. Important! In the iframe src attribute keep the ?i=t code. This code will resize the test as the respondent navigates pages within the quiz.

  7. Open the HTML code editor of your website and paste the embed code with your quiz link.

Your embedded quiz will now appear on your website. Learners will see the first page set for your quiz, such as

registration, selling, text/media or the first question on your quiz.


Top tip! If you make changes to your test on flexiquiz.com, the updates will automatically reflect on the quiz embedded in your website.

How to embed Respondent portals

A Respondent portal allows your learners to manage all of their training in one place.

You can embed an unbranded Respondent log-in screen on your website or blog.

This image shows what an unbranded log-in screen looks like:

Unbranded FlexiQuiz log in screen

If you have an Enterprise plan, you can customize the Respondent portal by removing the FlexiQuiz logo and adding your own logo.

To embed the portal on your website, follow these steps:

  1. To start, copy the following HTML code.
    2.     
<iframe src="https://www.flexiquiz.com/account/si?i=t" style="width:100%;min-height:1000px;border-width:0;"></iframe>
  2. Open the HTML code editor of your website and paste the Respondent portal embed code in the relevant place.

Other embed options

You can add a virtual keyboard to the log in screen that looks like this:

FlexiQuiz log in screen with virtual keyboard

The following parameters can be added to the src URL to add a virtual keyboard.

    
<iframe src="https://www.flexiquiz.com/account/si?i=t&k=t" style="width:100%;min-height:1000px;border-width:0;"></iframe>

To include a password reset, the following parameters can be added to the src URL.

    
<iframe src="https://www.flexiquiz.com/account/si?i=t&rp=t" style="width:100%;min-height:1000px;border-width:0;"></iframe>

To include a virtual keyboard and password reset, the following parameters can be added.

    
<iframe src="https://www.flexiquiz.com/account/si?i=t&k=t&rp=t" style="width:100%;min-height:1000px;border-width:0;"></iframe>

The Embed quiz option is available for customers with a Premium and Enterprise plan. If you have any further queries, please contact us.


Relevant help guides

Ways to style your quiz

How remove FlexiQuiz branding



Back