How to install the Answerbase Q&A Widget into your Ecommerce Store's Product and Product Category Pages
When you're working ot install the Answerbase Q&A widget into your ecommerce store's product page, if you're managing that manually, then you'll need to ensure that you're passing the appropriate product information into the widget code so we can (1) recognize what product the Q&A content and engagement should be associated with and (2) keep our product information aligned with yours.
You'll see in your widget code snippet that a number of parameters are supported, here are the definitions you have as parameters to identify:
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.
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.
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.
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.
The above parameters help ensure that you can manage effective Q&A related to your product categories on your ecommerce site.
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.
If you have any questions, please Contact Us and we'll make sure you're taken care of and have a successful install.
You'll see in your widget code snippet that a number of parameters are supported, here are the definitions you have as parameters to identify:
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-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.
- data-product-association-product-category: This 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.
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.
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-show-answers="false"
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">
</script>
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.
- data-external-product-category-id: 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: 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: 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.
The above parameters help ensure that you can manage effective Q&A related to your product categories on your ecommerce site.
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.
If you have any questions, please Contact Us and we'll make sure you're taken care of and have a successful install.