How do I add my own CSS & Javascript on top of Quiz Kit?

Quiz Kit allows you to apply your own CSS & Javascript code on top of our widget loaded on your website.

How to apply custom CSS?

1. Simply add it directly on the Styles page:

   
2. Add it to your theme files. Please apply CSS to quiz elements IDs, tags, or other attributes, but not classes, as those are dynamic and can change. You can find needed IDs, tags, and attributes by inspecting the page in your browser

   

How to apply custom Javascript?

1. Simply add your own javascript code to the needed Intro, Question or Result page. Same as with CSS, use quiz elements IDs, tags or other attributes, but not classes. Please note: that Javascript code will be fired only on that Intro, Question or Result page where it was added.

2. Add javascript code to your theme files and it will work! You can use custom Javascript events listed below.

Custom Javascript events

We have a few javascript events that you can use for different purposes:

1. "quizKitQuestionLoaded" event. This event is fired when your customer landed on the question page. You can use this event to add some custom labels, text, content on particular questions. This event will contain question data in the next format:

   { 
     question: { all question data will be here }
   }

   Add the code below for catching this event:

   document.addEventListener('quizKitQuestionLoaded', function (e) {
     // console.log(e.detail);  
     // e.detail will contain question data
   }, false);

2. "quizKitCapturePageLoaded" event. This event is fired when your customer landed on the email capture page. You can add some additional checkboxes or other elements to this page. Add the code below for catching this event:

   document.addEventListener('quizKitCapturePageLoaded', function (e) {
     // add your code here 
   }, false);

3. "quizKitResultsPageLoaded" event. This event is fired when your customer landed on the result page. You can use this event to send your Quiz data anywhere. This event will contain Quiz data in the next format:

   { 
     answers: [questions names and chosen answers],
     email: 'customer email',   
     result: { all the data about current result page },
     recommendedProducts: [recommended products], 
   }

   Add the code below for catching this event:

   document.addEventListener('quizKitResultsPageLoaded', function (e) {  
     // console.log(e.detail); 
     // loop through the data (e.detail) and send it anywhere or use it for your needs
   }, false);

4. "quizKitAddToCart" event. Each time your customers click on the "Add to bag" button on your quiz result page this event is fired. This event is fired before items are actually added to cart. Add the code below for catching this event:

   document.addEventListener('quizKitAddToCart', function (e) { 
     // e.detail - contains an array of product items that will be added to cart.
   }, false);

5. "quizKitAddToCartSuccess" event. This event is fired right after items were added to cart. You can use this event to create a direct connection with your Theme's Ajax(Slide out) cart. Add the code below for catching this event:

   document.addEventListener('quizKitAddToCartSuccess', function (e) {
     // code for refreshing your Ajax cart and opening it here
   }, false);