Add Answerbase Product Questions & Answers to Your Bigcommerce Store
When you've created an Answerbase account, you can then integrate Answerbase ecommerce product Q&A into your ecommerce store. This tutorial specifically covers how to integrate Q&A into your product page, there is further instruction available on how to integrate into other areas of your ecommerce site (if desired) at a link at the end of this post.
Let's go over how to integrate into your product pages.
Step 1 - Copy Your Widget Code
It's likely you've already copied your widget code if you're visiting this page, if so, just skip to the next step.
You can access your widget code by going to your administration dashboard and visiting "Integration > Q&A Widget" where you can see and copy the widget code.
Step 2 - Add the Script Using the Bigcommerce Script Manager
Now you'll add the Answerbase script into Bigcommerce:
To access the Script Manager, in your Bigcommerce administration portal go to Storefront › Script Manager.
Click "Create a Script". This will open a screen with form fields to create the script. Use these values:
Step 3 - Placement and Positioning of the Q&A Widget on Your Product Page
After you've installed the widget code template and saved, go to your Store and visit one of your product pages. See if you have Q&A displaying on your product page now and that everything is working as expected.
If the Widget IS Displaying: This means that Answerbase recognizes your template and has positioned it automatically, so you should be done. We encourage you to submit a new question and then check in your Answerbase administration area to ensure the question came through and the appropriate product was associated. If you'd like to consider repositioning where it displays on your product page, you can continue reading which will give instruction on how to specify the position of your widget.
If the Widget IS NOT Displaying (or you want to reposition): If you don't see the Q&A widget on your product page, that means that Answerbase hasn't been able to identify where to best place the widget within your template.
To display the widget on your product page, we just need to identify what existing element on your product page the widget should show before or after by adding a "data-insert-before" or "data-insert-after" attribute to the widget code you pasted in Step 2. You can see details of how to define those attributes in the widget parameters documentation, and that let's the widget know what element on your page it should insert the widget before or after.
For example, let's say want the Q&A widget to display under the product description. Your current product page source code may render your product description similar to this:
Step 4 - Ask for Help if Needed
We're here to make sure you're integration is successful, so if you have any questions or need help just Contact Us and we'll make sure you're 100%.
Adding Answerbase to Other Pages
We recommend that if you're integrating Answerbase into your ecommerce store, the best way to drive customer engagement and new traffic to your store is through Product Page Integration as noted above. But, you can of course integrate Q&A into other areas of your site as well to engage users as they're browsing around your entire storefront. In those cases, you don't have to identify the product attributes and can just utilize the widget parameters as you see fit.
Let's go over how to integrate into your product pages.
Step 1 - Copy Your Widget Code
It's likely you've already copied your widget code if you're visiting this page, if so, just skip to the next step.
You can access your widget code by going to your administration dashboard and visiting "Integration > Q&A Widget" where you can see and copy the widget code.
Step 2 - Add the Script Using the Bigcommerce Script Manager
Now you'll add the Answerbase script into Bigcommerce:
To access the Script Manager, in your Bigcommerce administration portal go to Storefront › Script Manager.
Click "Create a Script". This will open a screen with form fields to create the script. Use these values:
- Name: Answerbase Q&A
- Location on the page: Footer
- Pages where script will be added: Store pages
- Script type: Script
Step 3 - Placement and Positioning of the Q&A Widget on Your Product Page
After you've installed the widget code template and saved, go to your Store and visit one of your product pages. See if you have Q&A displaying on your product page now and that everything is working as expected.
If the Widget IS Displaying: This means that Answerbase recognizes your template and has positioned it automatically, so you should be done. We encourage you to submit a new question and then check in your Answerbase administration area to ensure the question came through and the appropriate product was associated. If you'd like to consider repositioning where it displays on your product page, you can continue reading which will give instruction on how to specify the position of your widget.
If the Widget IS NOT Displaying (or you want to reposition): If you don't see the Q&A widget on your product page, that means that Answerbase hasn't been able to identify where to best place the widget within your template.
To display the widget on your product page, we just need to identify what existing element on your product page the widget should show before or after by adding a "data-insert-before" or "data-insert-after" attribute to the widget code you pasted in Step 2. You can see details of how to define those attributes in the widget parameters documentation, and that let's the widget know what element on your page it should insert the widget before or after.
For example, let's say want the Q&A widget to display under the product description. Your current product page source code may render your product description similar to this:
<div class="ProductDescription">
<h2 class="subtitle">Product Description</h2>
<p>This is a great shoe for summer, it's sunshine yellow with white stripes.</p>
</div>You'll just need to let the widget know that you want it to show up under the product description <div> that has a class value of "ProductDescription"....so you'd use the "data-insert-after" attribute and add that to your widget code. So, your widget code would reflect that new attribute and may look something like this:
<script src="https://[your-account].services.answerbase.com/javascript/widget/full-featured-widget.js" type="text/javascript"
data-platform="bigcommerce"
data-product-id="{{default product.sku product.id}}"
data-product-title="{{product.title}}"
data-product-price="{{product.price.without_tax.value}}"
data-product-url="{{product.url}}"
data-product-description="{{sanitize product.description}}"
data-product-category="{{#forEach (last breadcrumbs 2)}}{{#unless isLast}}{{name}}{{/unless}}{{/forEach}}"
data-product-image-url="{{getImage product.main_image 'thumbnail'}}"
data-insert-after=".ProductDescription">
</script>
That will ensure that the widget shows underneath the "ProductDescription" div when the page loads. You can use these "data-insert-before" or "data-insert-after" attributes to position or reposition your widget as you'd like within your page.
DEVELOPER'S TIP: If you can't find an existing element on your page that you can easily reference, you can always add your own div to your template like <div class="answerbase"></div> and then just reference that value within the widget attribute. That gives you as much flexibility as you need to ensure the widget shows up where/how you want it on your page.
Step 4 - Ask for Help if Needed
We're here to make sure you're integration is successful, so if you have any questions or need help just Contact Us and we'll make sure you're 100%.
Adding Answerbase to Other Pages
We recommend that if you're integrating Answerbase into your ecommerce store, the best way to drive customer engagement and new traffic to your store is through Product Page Integration as noted above. But, you can of course integrate Q&A into other areas of your site as well to engage users as they're browsing around your entire storefront. In those cases, you don't have to identify the product attributes and can just utilize the widget parameters as you see fit.
