How to Add a Quiz Popup via a Chat-Like Button on Your Store

A chat button sits in a corner of your store, looking like a support widget. A customer clicks it and the quiz opens in a popup.

Unlike an automatic popup, it waits to be clicked, so it asks nothing of a customer who is not interested.

Before you start

You need a quiz built in the RevenueHunt app, and access to your theme editor.

Chat button on the homepage

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

Shopify 1.0 themes cannot run this

A quiz built in the Built for Shopify version needs an app embed or an app section, and both are Online Store 2.0 features. A Shopify 1.0 theme supports neither.

Upgrade to an Online Store 2.0 theme to use them.

1. In your Shopify admin, go to Online Store > Themes and click Customize on your live theme.

2. With the home page template open, click Add section, open the Apps tab, and add Chat Button Quiz.

   

3. Set up the button.

   

   Setting	What it does
   Chat button color	The color of the button itself
   Chat icon color	The color of the icon inside it
   Chat position	Which corner the button sits in
   Hide after quiz completion	Takes the button away once the customer reaches the results page
   Show notification dot	Puts a small red dot on the icon
   Greeting message	The line shown beside the icon. Leave it empty to hide it
   Popup width (% of screen)	How wide the quiz opens
   Popup height (% of screen)	How tall the quiz opens
   Popup z-index	Which other elements the quiz sits in front of
   Quiz ID (optional)	The quiz to open. Leave it empty for your default quiz

4. Click Save.

5. Open your store and click the chat button. The quiz should open in a popup.

Which quiz opens

Your default quiz opens, unless you name another one.

With Shopify Markets set up, the default quiz for that market opens instead.

To open a particular quiz, set the Quiz ID. See Open a specific quiz.

With the app embed

1. Copy your Quiz ID. In the Dashboard, click the ... beside the quiz and copy the ID.

2. Go to Online Store > Themes, click Customize, then open App embeds.

3. Turn on Chat Button Quiz (Legacy) and paste the Quiz ID into its settings.

   The plain Chat Button Quiz embed serves the Built for Shopify version. A legacy quiz opened through it reports that it does not exist.

4. Adjust the colors, greeting message and popup size.

5. Click Save.

6. Open your store and click the chat button. The quiz should open in a popup.

With pasted code

1. Open Share in the quiz builder, pick Chat button, then Show Instructions for Legacy Themes.

2. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

3. In Themes > Customize, add a Custom content section, then a Custom HTML or Custom liquid block.

4. Paste the code into that block.

5. Click Save.

6. Open your store and click the chat button. The quiz should open in a popup.

1. Open Share in the quiz builder and pick Chat button.

2. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

3. In your WordPress admin, open Pages, find your front page and click Edit.

4. Add a Custom HTML block and paste the code into it.

5. Click Update.

6. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. In your Magento admin, go to Content > Blocks and click Add New Block.

5. Fill in the block title, identifier and store view, then click Edit with Page Builder.

6. Drag a row in from Elements > Rows, then drag HTML Code onto that row.

7. Click the gear icon to open HTML settings, then paste the code under Enter HTML, CSS or JavaScript code.

8. Save the block.

9. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. In BigCommerce, go to Storefront > Web Pages and open your main page.

5. Switch to the HTML editor and paste the code in.

6. Save the page.

7. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. In your store editor, open the main page.

5. Find a Custom HTML element and paste the code into its settings.

6. Save the page.

7. Open your store and click the chat button. The quiz should open in a popup.

Chat button on all pages

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

Shopify 1.0 themes cannot run this

A quiz built in the Built for Shopify version needs an app embed or an app section, and both are Online Store 2.0 features. A Shopify 1.0 theme supports neither.

Upgrade to an Online Store 2.0 theme to use them.

1. In your Shopify admin, go to Online Store > Themes and click Customize on your live theme.

2. Open App embeds and turn on Chat Button Quiz. Leave Chat Button Quiz (Legacy) off. That one serves quizzes from the legacy app.

   

3. Set up the button.

   

   Setting	What it does
   Chat button color	The color of the button itself
   Chat icon color	The color of the icon inside it
   Chat position	Which corner the button sits in
   Hide after quiz completion	Takes the button away once the customer reaches the results page
   Show notification dot	Puts a small red dot on the icon
   Greeting message	The line shown beside the icon. Leave it empty to hide it
   Popup width (% of screen)	How wide the quiz opens
   Popup height (% of screen)	How tall the quiz opens
   Popup z-index	Which other elements the quiz sits in front of
   Quiz ID (optional)	The quiz to open. Leave it empty for your default quiz

4. Click Save.

5. Open your store and click the chat button. The quiz should open in a popup.

The button now runs on every page that uses this theme.

Which quiz opens

Your default quiz opens, unless you name another one.

With Shopify Markets set up, the default quiz for that market opens instead.

To open a particular quiz, set the Quiz ID. See Open a specific quiz.

1. Open Share in the quiz builder, pick Chat button, then Show Instructions for Legacy Themes.

2. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

3. Go to Online Store > Themes and click Actions > Edit code.

4. Open theme.liquid or footer.liquid, and Paste the code just before the closing </body> tag, so it loads on every page.**

5. Click Save.

6. Open your store and click the chat button. The quiz should open in a popup.

1. Open Share in the quiz builder and pick Chat button.

2. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

3. In your WordPress admin, open Appearance > Theme File Editor and select footer.php.

4. Paste the code just before the closing </body> tag, so it loads on every page.

5. Click Update File.

6. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. Open the footer template of your Magento theme.

5. Paste the code just before the closing </body> tag, so it loads on every page.

6. Save the template, then deploy the static content and flush the cache.

7. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. Go to Storefront > My Themes, then Advanced > Edit Theme Files.

5. Open footer.html under Templates, and Paste the code just before the closing </body> tag, so it loads on every page.

6. Save the file and deploy the theme.

7. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. In your store editor, open your theme footer.

5. Paste the code just before the closing </body> tag, so it loads on every page.

6. Save the theme.

7. Open your store and click the chat button. The quiz should open in a popup.

Chat button on a specific page

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

Shopify 1.0 themes cannot run this

A quiz built in the Built for Shopify version needs an app embed or an app section, and both are Online Store 2.0 features. A Shopify 1.0 theme supports neither.

Upgrade to an Online Store 2.0 theme to use them.

1. In your Shopify admin, go to Online Store > Themes and click Customize.

2. Open the page template menu and pick the template you want the button on, or create a new one.

3. Click Add section, open the Apps tab, and add Chat Button Quiz.

   

   

4. Set up the button.

   

   Setting	What it does
   Chat button color	The color of the button itself
   Chat icon color	The color of the icon inside it
   Chat position	Which corner the button sits in
   Hide after quiz completion	Takes the button away once the customer reaches the results page
   Show notification dot	Puts a small red dot on the icon
   Greeting message	The line shown beside the icon. Leave it empty to hide it
   Popup width (% of screen)	How wide the quiz opens
   Popup height (% of screen)	How tall the quiz opens
   Popup z-index	Which other elements the quiz sits in front of
   Quiz ID (optional)	The quiz to open. Leave it empty for your default quiz

5. Click Save. The button now shows on every page using this template.

6. Apply the template to your page. In Online Store > Pages, open the page, or click Add page to make one. Set its template to the one you just built, set the visibility to Visible, and save.

7. Open your store and click the chat button. The quiz should open in a popup.

Which quiz opens

Your default quiz opens, unless you name another one.

With Shopify Markets set up, the default quiz for that market opens instead.

To open a particular quiz, set the Quiz ID. See Open a specific quiz.

1. Open Share in the quiz builder, pick Chat button, then Show Instructions for Legacy Themes.

2. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

3. In Shopify, go to Online Store > Pages, open the page, click Show HTML, and paste the code in.

4. Click Save.

5. Open your store and click the chat button. The quiz should open in a popup.

1. Open Share in the quiz builder and pick Chat button.

2. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

3. In your WordPress admin, open Pages, find the page you want the button on and click Edit.

4. Add a Custom HTML block and paste the code into it.

5. Click Update.

6. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. In your Magento admin, go to Content > Pages and open the page, or click Add New Page.

5. Open the Content tab and click Edit with Page Builder.

6. Drag a row in from Elements > Rows, then drag HTML Code onto that row.

7. Click the gear icon to open HTML settings, then paste the code under Enter HTML, CSS or JavaScript code.

8. Save the page.

9. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. In BigCommerce, go to Storefront > Web Pages and open the page, or click Create a Web Page.

5. Under Web Page Details > Page Content, switch to the HTML editor and paste the code in.

6. Save the page.

7. Open your store and click the chat button. The quiz should open in a popup.

1. Add the embed.js script before the closing </head> tag of your store header. The quiz does not load without it.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

2. Open Share in the quiz builder and pick Chat button.

3. Set the colors, greeting message and popup size, then click Get code. Copy the HTML it gives you.

4. In your store editor, open the page you want the button on.

5. Find a Custom HTML element and paste the code into its settings.

6. Save the page.

7. Open your store and click the chat button. The quiz should open in a popup.

FAQs

Open a specific quiz

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

A chat button opens your default quiz. To open another one, put its ID in the Quiz ID (optional) field of the Chat Button Quiz settings in the theme editor.

Finding the Quiz ID

In the Dashboard, click the ... beside the quiz and select Copy Quiz ID. The ID is case-sensitive.

Shopify Markets

With Shopify Markets set up, the default quiz for the customer's market opens instead of your store default.

Generate the chat button code from the Share tab of the quiz you want to open, then use that code. The quiz ID is baked into it.

Generate the chat button code from the Share tab of the quiz you want to open, then use that code. The quiz ID is baked into it.

Generate the chat button code from the Share tab of the quiz you want to open, then use that code. The quiz ID is baked into it.

Generate the chat button code from the Share tab of the quiz you want to open, then use that code. The quiz ID is baked into it.

Generate the chat button code from the Share tab of the quiz you want to open, then use that code. The quiz ID is baked into it.

The quiz you are looking for does not exist

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

Shopify 1.0 themes cannot run this

A quiz built in the Built for Shopify version needs an app embed or an app section, and both are Online Store 2.0 features. A Shopify 1.0 theme supports neither.

Upgrade to an Online Store 2.0 theme to use them.

This error means the button is being served by the embed for the other version of the app.

1. Go to Online Store > Themes > Customize > App embeds and check which chat embed is on. For a quiz built here, Chat Button Quiz is the right one.

   

2. Turn Chat Button Quiz (Legacy) off and turn Chat Button Quiz on. The legacy embed serves quizzes from the legacy app, so it cannot find a quiz built in this version.

3. Click Save, then reload your store.

This error means the button cannot find the quiz, either because it is unpublished or because the wrong embed is on.

1. Open the Quiz Builder and check the quiz is published, with the top-right Publish button.

2. Copy the Quiz ID from Quiz settings. The ID is case-sensitive.

3. Go to Online Store > Themes > Customize > App embeds and turn on Chat Button Quiz (Legacy). The plain Chat Button Quiz embed serves quizzes from the Built for Shopify version, so it cannot find a legacy quiz.

4. Paste the Quiz ID into the Quiz ID field.

   

5. Click Save, then reload the page.

This error means the button cannot find the quiz.

1. Open the Quiz Builder and check the quiz is published, with the top-right Publish button.

2. Regenerate the code from Share and paste it in again. An old code can point at a quiz that has since changed.

3. Check the embed.js script is on the page. Add it through a custom HTML element if it is missing.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

4. Save the page, then reload it.

This error means the button cannot find the quiz.

1. Open the Quiz Builder and check the quiz is published, with the top-right Publish button.

2. Regenerate the code from Share and paste it in again. An old code can point at a quiz that has since changed.

3. Check the embed.js script is on the page. Add it through a custom HTML element if it is missing.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

4. Save the page, then reload it.

This error means the button cannot find the quiz.

1. Open the Quiz Builder and check the quiz is published, with the top-right Publish button.

2. Regenerate the code from Share and paste it in again. An old code can point at a quiz that has since changed.

3. Check the embed.js script is on the page. Add it through a custom HTML element if it is missing.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

4. Save the page, then reload it.

This error means the button cannot find the quiz.

1. Open the Quiz Builder and check the quiz is published, with the top-right Publish button.

2. Regenerate the code from Share and paste it in again. An old code can point at a quiz that has since changed.

3. Check the embed.js script is on the page. Add it through a custom HTML element if it is missing.

   <script src="https://admin.revenuehunt.com/embed.js" async></script>
   

4. Save the page, then reload it.

---

This article explains how to add a chat button that opens your quiz. It also covers where to run it, and what to check when it does not appear.