> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.quizell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Embed a Quiz in Your Website's HTML Section

## **Introduction**

Want to add your **Quizell quiz** directly to your website? Whether you’re embedding it in a landing page or triggering it as a popup, Quizell makes it quick and easy.

This guide walks you through generating your **embed code** and placing it inside an **HTML section** on your site.

## **Step-by-Step Setup Guide**

### **Step 1: Open the Share Tab**

1. In your **Quizell dashboard**, open the quiz you want to embed.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1f2p2m9.png =1000x657)

2. At the top-right of your screen, click **Share**.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1crlx9b.png =1000x657)

### **Step 2: Choose an Embed Type**

1. Under the **Embed on a Webpage** tab, choose your preferred display type:

* **Full Page** – The quiz takes over the entire page (best for dedicated quiz pages).
* **In Page** – Embeds the quiz directly within an existing page section.
* **Popup** – Opens the quiz in a modal when triggered by user action.
* **Greet Bar** – A small banner at the top or bottom of your site with a CTA to open the quiz.
* **Floating Button** – A clickable button that launches the quiz anytime.

2. Customize the display settings if needed.
3. Click **Copy Code** to copy the generated HTML embed snippet.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_11d9scm.png =1000x657)

### **Step 3: Paste the Code Into Your Website**

1. Open the **HTML section** (or file) of your website where you want the quiz to appear.
2. Paste the copied embed code into the desired location.
3. Save or publish your changes.

💡 *Any updates made to your quiz in Quizell will automatically reflect on your website — no need to re-embed the code.*

## **Tips for Best Results**

* **Test Responsiveness:** Preview your quiz on different devices to ensure it displays correctly.
* **Maintain Speed:** Avoid embedding multiple quizzes on the same page to keep load times fast.
* **Match Your Branding:** Use the Quizell embed editor to adjust button colors, fonts, and placement for a cohesive look.

## **Related Articles**

Looking for platform-specific embedding instructions? Check out these guides:

* [Shopify – Using App Embeds](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-shopify-using-app-embeds-1wls0vb/)
* [Shopify – Custom Liquid](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-shopify-using-custom-liquid-1nqrg1n/)
* [Wix – Embed Method](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-wix-1dx0wxq/)
* [Wix – Popup](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-wix-as-a-popup-lgtelm/)
* [BigCommerce](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-bigcommerce-1tz9ks6/)
* [Webflow](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-webflow-1xghsra/)
* [WordPress (Elementor)](https://help.quizell.com/en/article/how-to-embed-your-quiz-in-wordpress-using-elementor-1dy1m6o/)