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

ParameterDescriptionValue TypeRequired

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

ParameterDescriptionValue TypeRequired

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

ParameterDescriptionValue TypeRequired

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

ParameterDescriptionValue TypeRequired

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:

pageInstalling Quizzes on Headless Instances

oke_quizCapture_addToCartSuccess

oke_quizCapture_addToCartFailure

oke_connect_cart_itemVariantAdded

oke_connect_checkout_orderSubmitted

Last updated