Quizzes are interactive experiences that make online shopping effortless. Quizzes data allows you to design and deliver personalized, curated experiences from the first visit.

Quizzes can be integrated into your website in a number of ways.

Open source UI library

Constructor's open source Quizzes UI library is built using React under the hood, and allows for different implementation methods. It can be used in React based as well as native JavaScript applications to integrate Quizzes on various pages.

The Quizzes UI is highly responsive and will work on any screen or container size.

Installation

npm i @constructor-io/constructorio-ui-quizzes

Usage

The default export returns a UI component that handles state management, data fetching and rendering of the logic for the entire quiz. The component requires 2 arguments, an apiKey and a quizId.

import CioQuiz from '@constructor-io/constructorio-ui-quizzes';

export default function YourComponent() {
  return (
    <div>
      <CioQuiz quizId="<< QUIZ_ID >>" apiKey="<< API_KEY >>" />
    </div>
  );
}

JavaScript bundle

This is a framework agnostic method that can be used in any JavaScript project. The CioQuiz function provides a simple interface to inject an entire Quizzes UI into the provided selector. The method requires 3 arguments, a selector, a quizId and an apiKey

import CioQuiz from "@constructor-io/constructorio-ui-quizzes/constructorio-ui-quizzes-bundled";

CioQuiz({
  selector: "body",
  quizId: "<< QUIZ_ID >>",
  apiKey: "<< API_KEY >>",
  resultsPageOptions: {
    onAddToCartClick: (item) => console.dir(item),
    resultCardRegularPriceKey: "price",
  }
});

API

Integrating against the API directly is our most flexible solution. It allows you to create your own user interface allowing for highly customizable experiences. Please refer to the Quizzes API documentation for more information.