Quizzes - Connect Window API

The Connect Window API exposes public functions that can be called to show or configure custom events for quizzes to be displayed on the page.

Functions

showQuiz

The showQuiz event can optionally be used to trigger display of Okendo Quizzes on your storefront in a modal.

Example Usage

<script>
	window.okeConnectApi.showQuiz(channelQuizId, subscriberId);
</script>

Custom Liquid Usage

<a  
  href="#" 
  onclick="okeConnectApi.showQuiz('your-channel-quiz-id', 'your-subscriber-id')" 
  class="button button--full-width">Take our quiz
</a>

Parameters

Parameter	Description	Value Type	Required
channelQuizId	Can be found in the install dialog of your quiz	string	✅
subscriberId	Your Okendo customer identifier.	string	✅

recommendedProductMounted

The recommendedProductMounted event is triggered when an individual product recommendation is mounted in the application. It provides an opportunity for merchants to insert custom HTML or other custom product display functionality, allowing them to further customize the presentation of recommended products.

Example Usage

window.okeConnectApi.recommendedProductMounted = (sectionContent, product) => {
	const addButton = sectionContent.querySelector('button.c-addToCart');
	if (addButton && !sectionContent.loaded) {
		sectionContent.loaded = true;
		let selectorHtml = `
		<div class="c-resultLearnMore">
			<a class="c-resultButton-primary c-button c-resultButton" style="width: 100%;" href="https://sample.myshopify.com/collections/product1" target="_blank">Learn More</a>
		</div>`;
		addButton.insertAdjacentHTML('beforeBegin', selectorHtml);
	}
};

Parameters

Parameter	Description	Value Type	Required
sectionContent	HTML of the recommended product to be rendered.	html	✅
product	A payload representing the product to be recommended.	JSON	✅

recommendedProductsMounted

The recommendedProductsMounted event is triggered when all product recommendations are mounted in the application. It provides an opportunity for merchants to insert custom HTML or other custom product display functionality for the entire recommendation page. This allows merchants to have full control over the presentation of the entire recommendation section.

Example Usage

window.okeConnectApi.recommendedProductsMounted = (recommendationSection, products) => {
	// Insert custom HTML or other custom product display functionality for the entire recommendation page
	// Example:
	recommendationSection.insertAdjacentHTML('beforeend', '<div class="custom-recommendation-section">...</div>');
};

Parameters

Parameter	Description	Value Type	Required
recommendationSection	The html element representing the entire recommendation section.	html	✅
products	A JSON object representing all recommended products to be displayed on the recommendation page.	JSON	✅

generateCartLineItemProperties

The generateCartLineItemProperties event is triggered when a product is added to the cart from the recommendation page. It provides an opportunity for merchants to insert custom data into the cart line items, allowing them to enhance the cart experience with personalized information.

Example Usage

window.okeConnectApi.generateCartLineItemProperties = (addToCartButtonId, product) => {
	// Insert custom data into the cart line items
	// Example:
		const customProperties = {};
	customProperties['Customer option'] = 'Some custom option';
	customProperties['_has_custom'] = true;
	return customProperties;
};

Parameters

Parameter	Description	Value Type	Required
addToCartButtonId	id of the add to cart button element that was clicked	string	✅
product	A JSON object representing the product that was added to the cart from the recommendation page.	JSON	✅

Events

oke_quizCapture_addToCart

The oke_quizCapture_addToCart event is used by Okendo Quizzes to notify the store that a customer intends to “Add to Cart” one or more recommended products.

Example Usage

// Listen to the oke_quizCapture_addToCart event
document.addEventListener('oke_quizCapture_addToCart', async event => {

	// Process each product variant to be added to the custom cart.
	for (const productVariant of event.detail.items) {

		try {
			// Attempt to add the variant.
			await customCart.addProductVariant({
				productId: productVariant.productId,
				variantId: productVariant.variantId,
				quantity: productVariant.quantity
			});

			// Tell Okendo Quizzes to visually show the customer
			// that the product variant was added successfully.
			document.dispatchEvent(new CustomEvent(
				'oke_quizCapture_addToCartSuccess',
				{	detail: { message: 'Yay! Added to cart successfully!' } }
			);
		}
		catch {
			// The variant was not able to be added to the custom cart.
			document.dispatchEvent(new CustomEvent(
				'oke_quizCapture_addToCartFailure',
				{	detail: { message: 'Oh no, something went wrong.' } }
			);
		}
	}

});

Headless Events

Typically used in headless implementations. See the below guide for an explanation and examples of how to setup quizzes on headless instances:

Installing Quizzes on Headless Instances

oke_quizCapture_addToCartSuccess

oke_quizCapture_addToCartFailure

oke_connect_cart_itemVariantAdded

oke_connect_checkout_orderSubmitted