How Can I Embed My Quiz On My Website?
With LeadQuizzes you can easily embed your quiz on any webpage or domain that you own using our embed code!
So you are ready to get your quiz added to your site.
Awesome news! The first thing you will need is your quiz embed code.
You can get your quiz embed codes from your quiz dashboard quiz.leadquizzes.com/dashboard or on the last step of the quiz builder before you publish.
To get the embed codes after you have published your quiz go to the quiz dashboard.
Hover over the actions drop down and select "Embed Code" as shown below.
You can also get the embed code immediately after you create your quiz.
Now That You Have Your Embed Code Let's Add It To Your Site!
- Blog websites
Before You Add Your Embed Code, It's Important To Know About The Different Embed Options
The first embed code is the Inline Embed Code: this allows you to embed your quiz directly on a page and the quiz is visible to your website visitors immediately.
Just like the example below:
The second embed code is the Exit Popup Embed Code: this allows you to embed your quiz as an exit popup, meaning when someone tries to exit your site the quiz will automatically pop up for them to take it. With this style of embed the quiz is not visible immediately after someone visits your site, but only upon them trying to exit or close the website tab.
You can see how this works in the video example below:
The third embed code is the Popup Text Embed Code: this allows you to trigger your quiz popup through link clicks or button clicks and if you are familiar with HTML/CSS you can customize the look and feel of it.
Below is some sample CSS code that allows you to customize the Popup Text Embed code into a button.
This CSS code can be placed in your websites stylesheets or the page that your Popup Text embed code is located.
background-color: #36c060 ;
To see how the code looks watch the short video below!
Not Only Do We Have The Embed Codes, But You Can Embed Directly on Wordpress Using Our Plugin!
To quickly embed your quiz on your WordPress site follow the steps below.
1. Login to your WordPress Admin and navigate to 'Plugins' in the left-hand side menu
2. From here click the 'Add New' button at the top left
3. Next click on search field and search "LeadQuizzes".
4. Click 'Install Now'
5. On the next screen, you will see a message saying the plugin has installed successfully, go ahead and click on 'Activate Plugin'
6. Your LeadQuizzes Plugin is now installed and ready to use!
Now That You Have the Plugin, Let's Use It!
The LeadQuizzes Plugin is simple to use, all you need is a LeadQuizzes account and a published quiz. Here are the steps:
1. First, login to your LeadQuizzes account and copy the URL for the quiz you would like to use from your LeadQuizzes dashboard.
2. Now login to your WordPress Admin dashboard ( if you don't know how to do this here are some instructions )
3. If you have installed the LeadQuizzes Plugin you should see it in the left-hand side panel, if not, follow the instructions above or contact our in-app support
4. In the plugin dashboard click on 'Add New'
6. Give your quiz a title - the title you pick will be used to generate your new quiz URL ex: http://www.yourdomain.com/q/[title here]
7. Finally, copy / paste the Quiz URL from the app and hit 'Publish'
Direct WordPress Embed Without Plugin
***NOTE: Switching between Visual and Text editor mode once you have place the embed code in the editor on WordPress will result in our embed code being stripped and it will not display properly on your page. Use only Text editor mode. This issue is WordPress' core configuration of TinyMCE, which strips IFRAME tags.***
Add the embed code anywhere in the body of a WordPress post to see your quiz
Additional Things You Can Do On WordPress Using WordPress Shortcodes
Using the LeadQuizzes WordPress Plugin shortcode
If you don't want your quiz to occupy an entire page, and you are a bit more tech savvy then you can also use the LeadQuizzes shortcode which is bundled in with the plugin. The shortcode works just like the plugin, however, it is a bit more difficult to use and may require you to adjust the custom settings so that it looks good on your page, especially next to other content.
If you are using WordPress pages to show your content or have a blog with lots of visitors then you can simply copy and paste the following shortcode next to the other content on the page.
(just substitute your quiz link where it says "your-quiz-url")
There are a few customization options for the LeadQuizzes shortcode. Add thee after the url=" ", inside of the brackets [ ], like this:
Here is the full list of options:
height="300px" => You can specify the height for the quiz box.
width="300px" => You can specify the width for the quiz box and quiz will fit in that box.
class="custom-class" => You can specify custom class to quiz box for custom styling.
Here is what it looks like with all the options added:
[leadquiz url="your-quiz-url" height="300px" width="300px"]