Add Answerbase Product Questions & Answers to Your Ecommerce 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 and ignore the rest of this step's instruction.
If you haven't copied your widget code you can access that by going to your Answerbase administration dashboard and visiting "Integration > Q&A Widget" where you can see and copy that code. If you're using one of the popular ecommerce platforms, on that page you'll notice a dropdown where you can select code specific for your platform and utilize that. If you see code for your platform, use our Platform Specific Ecommerce Installation Documentation to manage the integration. If you don't see your platform-specific code, just continue with this documentation.
Step 2 - Paste Go to Your Store's Theme Product Page Template
In your the Administration Portal of your ecommerce platform, find the template that renders your product page and select that file so you can paste the widget code within it. This should be a page that controls the display for your product page in general, and any change to this template will control how the product page will display for all of your products
Paste the widget script just above the closing </body> tag of your template.
Step 3 - Ensure Your Passing Answerbase the Product Information in the Widget Code
After you've pasted the script, now you need to make sure you specify values for the data-product-* attributes. This will ensure that Answerbase knows what product the page will be displaying when it renders...and we can then show the appropriate Q&A content related to that product and also make that product association when new questions are posted. The following product attributes are required for a successful integration:
Your platform should provide variables related to the product that can be used to fill in this information as it's commonly used on the page.
You passing these variables allows us to get all the relevant details about the product from your site and any updates you make in the future to that product on your ecommerce platform will automatically be updated on Answerbase's side as well. If you have other product information easily available to pass as parameters, you can also define the following product attributes as well (not required).
There are a number of other attributes you can use to customize how your widget looks and functions, you can see a full list of Q&A widget attributes here.
Step 3 - Determine Placement and Positioning of the Q&A Widget on Your Product Page
Now we just need to identify what existing element on your product page the widget should show before or after, so the widget knows where to show up on your page. We manage this 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 6 - 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 and ignore the rest of this step's instruction.
If you haven't copied your widget code you can access that by going to your Answerbase administration dashboard and visiting "Integration > Q&A Widget" where you can see and copy that code. If you're using one of the popular ecommerce platforms, on that page you'll notice a dropdown where you can select code specific for your platform and utilize that. If you see code for your platform, use our Platform Specific Ecommerce Installation Documentation to manage the integration. If you don't see your platform-specific code, just continue with this documentation.
Step 2 - Paste Go to Your Store's Theme Product Page Template
In your the Administration Portal of your ecommerce platform, find the template that renders your product page and select that file so you can paste the widget code within it. This should be a page that controls the display for your product page in general, and any change to this template will control how the product page will display for all of your products
Paste the widget script just above the closing </body> tag of your template.
Step 3 - Ensure Your Passing Answerbase the Product Information in the Widget Code
After you've pasted the script, now you need to make sure you specify values for the data-product-* attributes. This will ensure that Answerbase knows what product the page will be displaying when it renders...and we can then show the appropriate Q&A content related to that product and also make that product association when new questions are posted. The following product attributes are required for a successful integration:
data-product-id=""
data-product-title=""
data-product-url=""
data-product-image-url=""Your platform should provide variables related to the product that can be used to fill in this information as it's commonly used on the page.
You passing these variables allows us to get all the relevant details about the product from your site and any updates you make in the future to that product on your ecommerce platform will automatically be updated on Answerbase's side as well. If you have other product information easily available to pass as parameters, you can also define the following product attributes as well (not required).
data-product-url=""
data-product-description=""There are a number of other attributes you can use to customize how your widget looks and functions, you can see a full list of Q&A widget attributes here.
Step 3 - Determine Placement and Positioning of the Q&A Widget on Your Product Page
Now we just need to identify what existing element on your product page the widget should show before or after, so the widget knows where to show up on your page. We manage this 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 it to your widget code. So, your widget code would reflect that new attribute and may look something like this:
<script type="text/javascript" src="https://[your-account].services.answerbase.com/javascript/widget/full-featured-widget.js"
data-product-id="[product-id-value]"
data-product-title="[product-title-value]"
data-product-url="[product-url-value]"
data-product-image-url="[product-img-value]"
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.
Once you've defined all the necessary parameters defined in this documentation, save your template. After, you can go to your store, visit a product page, and test out the Q&A widget on your site to ensure you have everything configured as you'd like.
Step 6 - 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.
