# 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

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

#### Custom Liquid Usage

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

#### Parameters

<table><thead><tr><th width="223">Parameter</th><th width="284">Description</th><th width="116">Value Type</th><th>Required</th></tr></thead><tbody><tr><td><code>channelQuizId</code></td><td>Can be found in the install dialog of your quiz</td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>subscriberId</code></td><td>Your Okendo customer identifier.</td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr></tbody></table>

### `recommendedProductMounted`&#x20;

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

```javascript
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

<table><thead><tr><th width="198">Parameter</th><th width="338">Description</th><th width="116">Value Type</th><th>Required</th></tr></thead><tbody><tr><td><code>sectionContent</code></td><td>HTML of the recommended product to be rendered.</td><td><code>html</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>product</code></td><td>A payload representing the product to be recommended.</td><td><code>JSON</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr></tbody></table>

### `recommendedProductsMounted`&#x20;

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.&#x20;

#### Example Usage

```javascript
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

<table><thead><tr><th width="258">Parameter</th><th width="227">Description</th><th>Value Type</th><th>Required</th></tr></thead><tbody><tr><td><code>recommendationSection</code> </td><td>The html element representing the entire recommendation section.</td><td><code>html</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>products</code> </td><td>A JSON object representing all recommended products to be displayed on the recommendation page.</td><td>JSON</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr></tbody></table>

### `generateCartLineItemProperties`&#x20;

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.&#x20;

#### Example Usage

```javascript
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

<table><thead><tr><th width="228">Parameter</th><th width="263">Description</th><th>Value Type</th><th>Required</th></tr></thead><tbody><tr><td><code>addToCartButtonId</code></td><td>id of the add to cart button element that was clicked</td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>product</code> </td><td>A JSON object representing the product that was added to the cart from the recommendation page.</td><td>JSON</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr></tbody></table>

## Events

### `oke_quizCapture_addToCart`&#x20;

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

```typescript
// 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:

{% content-ref url="../advanced-widget-installs/installing-quizzes-on-headless-instances" %}
[installing-quizzes-on-headless-instances](https://docs.okendo.io/on-site/advanced-widget-installs/installing-quizzes-on-headless-instances)
{% endcontent-ref %}

### oke\_quizCapture\_addToCartSuccess

### oke\_quizCapture\_addToCartFailure

### oke\_connect\_cart\_itemVariantAdded

### oke\_connect\_checkout\_orderSubmitted


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.okendo.io/on-site/storefront-javascript-api/quizzes-connect-window-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.