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?

Simply add your own styles to your Theme files and that's all!
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?

Simply add your own javascript code to your  Theme files and it will work!
Same as with CSS, use Quiz elements IDs, tags or other attributes, but not classes.

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. "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);
  3. "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);	
  4. "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);