Answerbase ensures that you can support product Q&A on your ecommerce site, to lift both conversions and organic traffic. This article covers how to integrate into your product and category pages, but we recommend that you review and complete our full list (most are just 5 minutes to do) of Steps to set up your ecommerce site with Answerbase Product Page Q&A.
When you're working to install the Answerbase Q&A widget into your ecommerce store's product and product category pages, you'll need to ensure that you're passing the appropriate information into the widget code so we can (1) recognize what product or product category the Q&A content and engagement should be associated with and (2) keep our product information and taxonomy aligned with yours.
This page covers where to find that widget code and what Product Page Parameters and Product Category Parameters you'll need to pass into the widget code for integration into your product and product category pages.
Answerbase uses the "Q&A Widget" to integrate into your product and category pages, which is a JavaScript snippet of code that you put on your product page. The main thing that governs what the widget will show/do are the parameters that you pass into the widget (we'll details those below). If those parameters are appropriately passed into the JavaScript it let's us know what product or category is being shown which allows us to (1) automatically save/update the product or category information on our end so we have your full product inventory and taxonomy (2) show the Q&A relevant to that product or category and (3) be able to associate any new questions asked to the appropriate product or category. Everything is driven off of your unique Product ID of your ecommerce platform (identified as the JavaScript parameter "data-product-external-id") or your unique Product Category ID of your ecommerce platform (identified as the JavaScript parameter "data-external-product-category-id"), so we understand based off that unique value what page is loading.
Product Category integration isn't strictly required but is highly recommended, but we do recommend it if your ecommerce platform supports passing the appropriate parameters....since that will enable us to provide you with the maximum value. Here is a video overview of integration into your product and product category pages:
Where to Find the "Q&A Widget" JavaScript Code
When you go into your admin site to get the Q&A widget code you'll see those parameters showing by default....you'll find the widget under "Integration > Q&A Widget" within your administration site as seen here in the navigation:
You'll see in your widget code snippet that a number of parameters are supported and are showing by default when you grab the code (these are the commonly used product page integration parameters), below are the definitions you have as parameters to identify. A couple of notes before going over the parameters:
Positioning of Widget on Page: When you look to integrate, you can position where it will show dynamically so you can integrate the Q&A Widget JavaScript code as one of the last scripts to load on your page and utilize the "data-insert-after" parameter or "data-insert-before" parameter (click on the links to see details on how to implement) to have the widget dynamically position using CSS selectors to identify where to place it.
"Call to Action" Widget: You'll notice under the Q&A Widget code there is another script for the "Call to Action Widget". This is a widget that can display higher up on your page giving the visitor a call to action to start asking their question or move down to see the Q&A available on the page. You can see some details and documentation about integrating that here.
First we'll go over the Product Page Parameters and then below that we'll go over the Product Category Page Parameters.
Product Page Parameters
If you're integrating the widget into your product pages, you can use the following parameters to let Answerbase know what product the Q&A widget is associated with.
data-product-external-id (required): This is the unique product ID for a product that your ecommerce platform assigns to the product. This ID should never change and will be the main way that Answerbase identifies, updates, and syncs product information between Answerbase and your ecommerce platform. The maximum length allowed for this value is 100 characters.
data-product-sku: This is the sku number for a product. The value is optional and is not required to be unique.
data-product-title (required): This is the title/name of the product
data-product-url (required): This is the URL where the product resides on your site, and should be your main product page for the product identified.
data-product-image-url (required): This is the URL where the product image resides, that we can reference in order to show the product image.
data-product-association-product-category (very highly recommended): This "data-product-association-product-category" parameter can be used to let Answerbase know what product categories that the product is associated with, and will add/update/remove that association within Answerbase's database. This enables you to maintain your product taxonomy within Answerbase automatically, as your Q&A widgets load on your site. If you use this parameter, the value you put would be the "data-external-product-category-id" values (see Product Category parameters in the next section) which will let Answerbase know which product category to associate this product with. You can identify multiple "data-external-product-category-id" values by utilizing commas between each. If you'd like to clear an association with a product and product category, you can identify this parameter but leave the value blank, which would delete the association on Answerbase's end. Answerbase strongly recommends that you integrate Q&A into your product category pages as well to get the maximum value for both Product Page SEO and Product Category Page SEO. We have specific parameters you'll use to manage category page integration (in the next section of this page) and you should manage that integration if you're going to utilize this parameter.
data-product-description: This is the description of the product.
data-product-price: This is the product price, and should be in the format of XX.XX. Decimals are not required, but are supported.
data-show-product: The possible definitions of this parameter are "true" or "false". This parameter controls on the ask question form, if the product selection option should show for users who are asking new questions. Please note that if you identify a product using the ecommerce parameters then typically this would show as "false" and the identified product would be preselected.
data-insert-before: This attribute will be used if you want to insert the widget BEFORE the element of reference you define as the attribute. This attribute represents a "CSS selector", which means you can use an ID of an element, a CLASS NAME or any other CSS-style way of identifying an element. For example, if you specify "#description" as its value, it means you want to use the element whose ID equals "description" as a reference. If you specify ".description", it means you want to use the element that includes "description" as one of its classes. If you define this attribute, you should not define the "data-insert-after" attribute, as only one of them can be used.
data-insert-after: This attribute will be used if you want to insert the widget AFTER the element of reference you define as the attribute. This attribute represents a "CSS selector", which means you can use an ID of an element, a CLASS NAME or any other CSS-style way of identifying an element. For example, if you specify "#description" as its value, it means you want to use the element whose ID equals "description" as a reference. If you specify ".description", it means you want to use the element that includes "description" as one of its classes. If you define this attribute, you should not define the "data-insert-before" attribute, as only one of them can be used.
To test if you've installed your widget correctly, all you need to do is load your product page and view the source code of that page (Ctrl +U) to see if the parameters are getting passed in appropriately. Here is an example of what the widget code will look like when you have properly installed.
<script src="https://yoursite.services.answerbase.com/javascript/widget/full-featured-widget.js" type="text/javascript" data-insert-after=".productView-description" data-product-external-id="98655589" data-product-sku="A50021" data-product-title="Collette, florentine dress" data-product-price="99.99" data-product-url="https://yoursite.com/collette-florentine-dress/" data-product-description="This dress is made of cotton in Texas." data-product-category="Dresses" data-product-image-url="https://yoursite.com/products/images/florentine-dress.jpg" data-product-association-product-category="c-0994882958" data-show-answers="true"> </script>
The above parameters are used most commonly to install the widget into product pages, but we do support a number of Other Widget Parameters that you can define in order to more fully customize your widget integration.
Product Category Parameters
Ecommerce merchants may also want to support Q&A on their product category pages, where they can have customers ask them questions related to a specific product category and also show the most common questions related to that product category. Answerbase supports this through the use of these additional parameters. Please note that when you grab the widget from your administration site, it will have the product parameters within it by default so you should remove the product-specific parameters and utilize the category-specific parameters below.
data-external-product-category-id (required): This parameter identifies what the unique ID of the product category is within your ecommerce platform. When it's identified, it will let Answerbase know that the widget should be specific to that product category, where it controls what list of questions will be displayed and gives you the option to only display content associated with a specfic product category. It will also ensure that if any new questions are asked, that they are automatically associated with that product category. The value of this parameter will be the unique ID of the product category you'd like displayed as identified on your site. You'll need to ensure that Answerbase is getting that value in order to effectively utilize this parameter. If you'd like you can have Answerbase automatically create/maintain product categories utilizing this parameter, where if it isn't associated with an existing product category already saved on Answerbase's end...it will create a new product category when loaded on the widget. If you're going to be utilizing that capability, you should also identify the below parameters when loading the widget on your product category pages.
data-product-category-title (required): This should be the title of the product category on your system that relates to the "data-external-product-category-id" you identify and should not be used unless you identify a "data-external-product-category-id"parameter along with it. This parameter will let Answerbase know what the title of the product category should be and will automatically save and update this value in Answerbase's database when the widget is loaded, in order to maintain your product category taxonomy.
data-product-category-image: This should be the image of the product category on your system that relates to the "data-external-product-category-id" you identify. This parameter will let Answerbase know what the image of the product category should be and will automatically save and update this value in Answerbase's database when the widget is loaded, in order to maintain your product category taxonomy.
data-product-category-url (required): This should be the URL of the product category on your system that relates to the "data-external-product-category-id" you identify. This parameter will let Answerbase know what the URL of the product category should be and will automatically save and update this value in Answerbase's database when the widget is loaded, in order to maintain your product category taxonomy.
data-product-category-list-display: This parameter supports the values of either "strict" or "broad". The "strict" value will make it so the widget only displays questions that are associated ONLY with the product category. The "broad" definition will display questions that are associated with the product category but also questions that are associated to a product categorized under the defined product category. The platform default is "strict" which is how the widget will act when the parameter is not defined.
To test if you've installed your widget correctly, all you need to do is load your product category page and view the source code of that page (Ctrl +U) to see if the parameters are getting passed in appropriately. Here is an example of what the widget code will look like when you have properly installed.
The above parameters help ensure that you can manage effective Q&A related to your product categories on your ecommerce site. We do support a number of Other Widget Parameters that you can define in order to more fully customize your widget integration.
Positioning Your Widget on the Page
You can integrate the Q&A Widget JavaScript code as one of the last scripts to load on your page and utilize the "data-insert-after" parameter or "data-insert-before" parameter (click on the links to see details on how to implement) to have the widget dynamically position using CSS selectors to identify where to place it.
Test Your Q&A Widget Integration
After you integrate, you should really run some tests to make sure everything is working as it should. We recommend you Follow Our Testing Guide Here.
Q&A Widget Styles
If you'd like to edit the style of the widget, you can overwrite the default styles by adding CSS in your administration site under "Customization > CSS". There you can find the current style sheet that applies to the widget, with an option to define your own styles which will overwrite the existing styles. See our Answerbase Q&A Widget Styling Guide for more information.
Complete Your Ecommerce Q&A Setup
To get the full benefits of your Q&A content and engagement, please read through and complete all of our Steps for Integrating Answerbase Q&A into Your Ecommerce Store (click that text link to see the steps). Most steps are less than 5 minutes to complete, and completing them ensures that Answerbase can do it's job to provide you with measurable value.
If you have any questions, please Contact Us and we'll make sure you're taken care of and have a successful install.
