Publish Quiz: Embedded Inline
Inline Quiz on a new pageFirst, copy the code from the app. Then, in your store, navigate to Online Store > Pages and open the page where you want to insert the quiz: Click on the “Show HTML” button and paste the code in the code editor: To avoid any issues you should embed only one quiz per page. If you’re using a stand-alone (not Shopify or WooCommerce) version of the Product Recommendation Quiz you’ll have to embed.js code to your website for the generated quiz code to work. Try adding this code before the
</head>closing tag in your website’s theme or on the page that you would like to display your quiz:
<script src="https://admin.revenuehunt.com/embed.js" async></script>
Inline Quiz on the home pageYou’ll need to use the inline embed mode to display the quiz as a section on your Homepage.
The quiz should work correctly with any verified Shopify theme. However, we’ve observed issues with the Supply theme. If you’re using the Supply theme, please try publishing the quiz on an extra test page first or contact support.
Option 1: From Shopify ThemeIn your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button. Next select “+ Add Section“. Scroll down to Apps and search for Inline Quiz from Shop Quiz: Product Recommender. Add it to the section and open the settings by clicking on it. A list of all the quizzes will be displayed as a placeholder. Pick the Quiz ID of the quiz you want to publish and copy it into the Quiz ID section. Wait for the quiz to be loaded. Remember to save the changes. In the Inline Quiz settings you can also adjust:
- the quiz height,
- disable the auto-scroll,
- fix the quiz height (this also fixes the height of the results page).
Option 2: ManualClick on the “Share” link on the top-right corner of the quiz builder. Select the “inline” mode and copy the HTML code in the black box. In your Shopify store’s dashboard, navigate to Online Store > Themes and click on the “Customize” button. Click on the “Add section” button and select “Custom content”: Remove all the default content sections and add a “Custom HTML” section and open it: Now paste the code you copied from our app in the “HTML” input and click on “Save”.
Inline quiz on a specific collection pageOption 1 – add the quiz to the collection description You can embed the quiz directly under the collection name, like this:
Fix the size of the Inline QuizThere’s a hack that forces the max-height of the Inline quiz to adapt to the question size. This may result in a bit of a “jumpy” behavior. If you’d like to avoid this, you can fix the size of the inline quiz. To do this, select the width and the height of the quiz and activate the “Fixed size” setting: Then generate a code and publish it on your page. Keep in mind that fixing the quiz size will also fix the size of the results page.
Prevent autoscroll in Inline QuizTo prevent autoscrolling in a quiz published inline with the page, add the following line to the code generated from the app:
<div class="rh-widget rh-inline" data-url="https://admin.revenuehunt.com/public/quiz/dbqHqN" data-autoscroll="false" style="margin: 10px auto; width: 100%; height: 600px; display: flex;"></div>