This guide gives instructions on how to add custom code to your quiz that will insert Yotpo's review star on-site widget to each product at the end of your quiz.
💡 What you'll learn
💡 Prerequisites
This guide requires access to the octane.quiz.completed[?] custom event available on Octane Plus & Enterprise plans.
Code to add the Yotpo review star on-site widget
This code block will add Yotpo's review star on-site widget to each of your quiz products regardless of the structure of your results page content.
<script>
document.addEventListener("octane.quiz.completed", function(event) {
const productTitles = document.querySelectorAll(".oct-quiz-result-item__title");
const arrayOfProductBlocks = event.detail.product_blocks;
const productIdArray = [];
function buildProductIdArray() {
for (const productBlock of arrayOfProductBlocks) {
productBlock.forEach(product => {
productIdArray.push(product.id)
});
};
};
buildProductIdArray();
// Replace the value for data-yotpo-instance-id with your account's widget instance ID.
productTitles.forEach((productTitle, i) => {
productTitle.innerHTML += `
<div
class="yotpo-widget-instance"
data-yotpo-instance-id="791209"
data-yotpo-product-id="${productIdArray[i]}"
data-yotpo-cart-product-id="${productIdArray[i]}"
data-yotpo-section-id="product"
></div>
`
});
// This is needed to render Yotpo widgets after a page has already loaded.
yotpoWidgetsContainer.initWidgets();
}, false);
</script>
2 requirements must be met before this code will successfully add the Review Star On-site Widget to quiz products:
The review star widget must be enabled for your product pages.
The value for
data-yotpo-instance-idmust be replaced with your account's unique instance ID.
Your account's instance ID can be found in the embed code for your review star widget in Yotpo's dashboard. Click here to jump to instructions on how to find this in Yotpo.
Step-by-step guide
📕 Enable the review star widget on your product pages
First, review stars must be enabled for your product pages. If you've already completed this step, you can skip to the next section.
In your Yotpo Reviews main menu, go to On-Site Widgets.
Click Star Rating.
Customize the widget according to your needs. Learn more about customization options.
Click Save changes.
Click Preview to preview your changes.
When you’re ready to publish, click Publish. You can automatically add the widget to your product pages by clicking Publish now.
📕 Inserting the correct instance ID
Next, we need to get the correct instance ID for the code by pulling up your version of the review star widget embed code.
Inside of the Star Rating Editor, click on the </> icon.
In the pop-up that appears, click Get the code.
Find the section of the code that says
data-yotpo-instance-id=Copy the 6-digit number that follows.
For example, if your widget has the code
data-yotpo-instance-id="123456", you would copy123456.
Replace the 6-digit number inside of the quotation marks in Octane AI's code after
data-yotpo-instance-id=.
📕 Adding the code to your website
As a final step, the code has to be added to your website. While you could add the code to theme.liquid, we would recommend adding the code to the specific page that your quiz has been added to.
Since the code example is inside of <script></script> tags, this means it can be added to the same place you added your quiz publish code.
Adding Javascript in the HTML section of page content
In the Shopify admin, go to Sales channels → Online Store → Pages.
Open the page that contains your quiz.
Click on the < > icon to switch the content box to HTML.
Paste the code to insert the Yotpo widget.
Adding Javascript in a custom liquid block in the theme editor
Javascript code can also be added in a custom liquid block. This is a type of block that can be added in the theme editor.
In the theme editor, open the drop-down menu in the middle of the top bar to select your quiz template.
Once your quiz's template has been opened, click on the Custom Liquid block that contains your quiz publish code.
Paste the code to insert the Yotpo widget.
