Parameters supported for the Answerbase Full Featured Widget
When you're installing the Answerbase full featured widget, it supports a number of parameters that you can identify in the script which will have an impact on what/how the widget displays. Below is a list of the parameters that are supported to manage the configuration of the widget on your pages.
Ecommerce Product Q&A Integrations - Product Parameters
The parameters listed below will give you different options on display and configuration of your Q&A widget. If you're an ecommerce merchants integrating into your product pages or product category pages, you'll be supporting some additional parameters so we know what product page or product category page the widget is showing on. See the following link for those product related parameters:
See Ecommerce Q&A Product Parameters
Identifying those parameters effecively will ensure that (1) we make the appropriate product association or product category association to questions and (2) we're able to get automatic updates on our end regarding product and product category information. You can also use the parameters listed below for additional controls over what the widget will show and do.
Text Display Controls
Engagement Action Display Options
Question List Options
Ask Question Form Options
Page-Specific Content
You're able to make the widget so it will only show questions that have been asked from that specific page that it's reflecting on and when new questions are asked it will create the parent > child relationship between the page and those new questions. This can be utilized when you're looking to give customers the option to ask follow-up questions about an article or other content page, and have Q&A engagement expand the content specific to that page. If you're integrating into a product page, use the specific ecommerce parameters relevant to ecommerce merchants to accomplish their goals for product-specific questions. This page-specific content is more relevant to sites wanting to support Q&A under their blog posts or other similar informational pages.
In order to manage page-specific Q&A, you'll need to identify the following three parameters.
Other Parameters
When you're integrating the Answerbase Full Featured Widget into your page, we also have a small "call to action" widget that is typically on the top of the page, letting the user know that the Q&A capabilities are available on the page with a preview of how many Q&A's are available to see and a call to action to ask their own question. When you click on the call to action widget, it will lead the user to the full featured Q&A widget typically placed a bit further down the page. If you have the Full Featured Widget in a tab or accordion, you can configure the call to action widget to open that placement through a "data-click-to-show" parameter. We encourage you to view the Answerbase Call to Action Widget Documentation for details around those parameters, a preview of what that widget looks like, configuration options, etc.
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.
Ecommerce Merchants
As mentioned at the beginning of this page, there are additional parameters that ecommerce merchants can pass to provide product specific information for an Ecommerce Q&A install, to find out more about those parameters you should read the Ecommerce Q&A Widget Install Instructions. If you have any questions, please Contact Us and we'll make sure you're taken care of and have a successful install.
Ecommerce Product Q&A Integrations - Product Parameters
The parameters listed below will give you different options on display and configuration of your Q&A widget. If you're an ecommerce merchants integrating into your product pages or product category pages, you'll be supporting some additional parameters so we know what product page or product category page the widget is showing on. See the following link for those product related parameters:
See Ecommerce Q&A Product Parameters
Identifying those parameters effecively will ensure that (1) we make the appropriate product association or product category association to questions and (2) we're able to get automatic updates on our end regarding product and product category information. You can also use the parameters listed below for additional controls over what the widget will show and do.
Text Display Controls
- data-text-title: This controls what the text of the widget title will be, which will display above the widget. The default value is "Q&A" and you can define it as "none" if you don't want any text to appear.
- data-text-ask: This parameter controls what text will show prompting the user to ask a question.
- data-text-button: This parameter controls what text will show on the bottom when a user is continuing to ask a question. After clicking, it will send them to the ask question form to provide any details before submission.
- data-text-list-popular: This parameter controls what text will show when you are showing "Popular Questions" on your widget.
- data-text-list-recent: This parameter controls what text will show when you are displaying "Recently Asked" questions on your widget.
- data-text-characters-remaining: This parameter controls what text will show before the character countdown which displays as a user types their question title.
- data-text-empty-list: This parameter controls what text will show when the list doesn't have any questions to display.
- data-text-pending-answer: This parameter controls what text will show when a question is displaying but does not have any answers posted yet.
Engagement Action Display Options
- data-open-links: This parameter controls how Q&A thread links will open the user's selection. Values can be (1) "popup" where the links will open in a light-box pop overlaying your current page or (2) "new" where links will open in a new tab.
- data-open-ask: This parameter controls how ask question form will open when the user is going through the ask question process. Values can be (1) "popup" where the links will open in a light-box pop overlaying your current page (2) "new" where links will open in a new tab or (3) "expand" where a simple ask question form will expand in-line.
Question List Options
- data-show-question-list: The possible definitions of this parameter are "true" or "false". This parameter controls whether the question list will display or be hidden on the widget. You may only want to show the option to ask a question, which is why this parameter is available so you can disable the list showing giving you the option to only display the option to ask a new question.
- data-list-type: This parameter controls which list of content you'd like the widget to display with the options (1) "popular" which will show the most popular questions based on activity and if you've identified the Q&A is specific to a product/category/page the Q&A will be specific to that or (2) "recent" which will show the most recently asked questions and if you've identified the Q&A is specific to a product/category/page the Q&A will be specific to that or (3) "relevance" which is relevant where it will show questions ordered from most relevant to the page to least relevant to the page governed by the product, category, or "all products" association to the questions.
- data-display-count: This parameter should be a number value, as an integer, which controls how many questions will display on the widget.
- data-show-question-details: The possible definitions of this parameter are "true" or "false". This attribute will be used if you'd like to display the question details text on your widget, and you'll define as "true" if you'd like those details to display under the question title.
- data-max-question-details-height: This will identify the max height (in pixels) that will be used to show question details, before a "read more" link will show up allowing the user to expand and see the rest of the text. An example would be reflecting data-max-question-details-height="100" to ensure that 100 pixels of vertical space would be taken up before it gives the "read more" link to click on.
- data-show-answers: The possible definitions of this parameter are "true" or "false". This attribute will be used if you'd like to display both the question and answer text on your widget, and you'll define as "true" if you'd like answers to display.
- data-max-answer-height: This will identify the max height (in pixels) that will be used to show answers, before a "read more" link will show up allowing the user to expand and see the rest of the text. An example would be reflecting data-max-answer-height="100" to ensure that 100 pixels of vertical space would be taken up before it gives the "read more" link to click on.
- data-show-comments: The possible definitions of this parameter are "true" or "false". This will define whether the widget should show the comments or not.
- data-expand-comments: The possible definitions of this parameter are "true" or "false". This will define whether the widget should expand the comments by default or not.
- data-category-id: This parameter controls what list of questions will be displayed, and gives you the option to only display content associated with a specfic category. The value of this parameter will be the unique ID of the category you'd like displayed as identified in the Answerbase platform.
- data-external-product-category-id: This parameter controls what list of questions will be displayed, and gives you the option to only display content associated with a specfic 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.
- data-show-content-allproducts: The possible definitions for this parameter are "true" or "false". This parameter will determine whether content that is associated with "All Products" will display on the questions list.
- data-tag: The possible definitions of this parameter are the name of any tag that is supported on the Answerbase platform. This parameter is only relevant if your Answerbase platform is set to use user-generated tags.
- data-view-all: The possible definitions for this parameter are "true" or "false". This will display a "View All" link on the bottom of the question list on your widget, giving the customer the option to view all the questions and answers that you have related to that specific product or topic.
- data-list-paging: This parameter should be a number value, as an integer, which controls the pagination of the questions list and how many questions will display on the widget before the question list starts to page.
Ask Question Form Options
- data-ask-question-enabled: The possible definitions of this parameter are "true" or "false". This parameter controls whether the ask question form will be available to see for visitors. If this is marked as "false", then the form will be hidden so users would only be able to see the questions list below. By default, if this parameter is not defined, the widget will consider this "true" so the ask question form will show.
- data-show-category: 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.
Page-Specific Content
You're able to make the widget so it will only show questions that have been asked from that specific page that it's reflecting on and when new questions are asked it will create the parent > child relationship between the page and those new questions. This can be utilized when you're looking to give customers the option to ask follow-up questions about an article or other content page, and have Q&A engagement expand the content specific to that page. If you're integrating into a product page, use the specific ecommerce parameters relevant to ecommerce merchants to accomplish their goals for product-specific questions. This page-specific content is more relevant to sites wanting to support Q&A under their blog posts or other similar informational pages.
In order to manage page-specific Q&A, you'll need to identify the following three parameters.
- data-page-url: This parameter identifies the URL of the page that you're displaying the widget on. This value will inform what content should be pulled if you're using the "data-page-specific-content" parameter noted above and the page new questions will be associated with for the "data-page-association" parameter.
- data-page-specific-content: The possible definitions of this parameter are "true" or "false". This will determine whether you want to only show Q&A content on the widget that is identified as being associated specifically to this page. Questions are associated with a specific page by using the "data-page-url" parameter noted later in this documentation, and if you mark this as "true" it will only show questions that were posted with the "data-page-url" identified as the URL of this page.
- data-page-association: The possible definitions of this parameter are "true" or "false". This ensures that new questions that are posted are associated specifically to the URL you identify in the "data-page-url" parameter.
Other Parameters
- data-max-width: This parameter controls how wide the widget will be on your page where you can identify a max width that you'd like to apply for the widget display. You can specify just a number (pixels), or a number and a unity just like a valid CSS value. For example, "50%" or "400px".
- data-automatic-updates: The possible definitions of this parameter are "true" or "false". This parameter controls whether the values presented within the widget parameters will update information in the Answerbase database related to product information, placement page information, etc.
- 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.
- IMPORTANT FORMATTING NOTES:
- Using Class Attribute: If you use a class name, you need to prefix class name with a “dot” so if your div tag is <div class="product-single__description rte"> then you need to define ".product-single__description" in the field. If there are multiple class names, they also must be joined by dots....so a div tag <div class="product-single__description rte"> would need to define ".product-single__description.rte" in the text field.
- Using ID Attribute: If using an ID, you have to prefix the ID with a “#”, so if your div tag is <div id="product-single__description"> then your field would have "#product-single__description" populated to be correct.
- IMPORTANT FORMATTING NOTES:
- 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.
- IMPORTANT FORMATTING NOTES:
- Using Class Attribute: If you use a class name, you need to prefix class name with a “dot” so if your div tag is <div class="product-single__description rte"> then you need to define ".product-single__description" in the field. If there are multiple class names, they also must be joined by dots....so a div tag <div class="product-single__description rte"> would need to define ".product-single__description.rte" in the text field.
- Using ID Attribute: If using an ID, you have to prefix the ID with a “#”, so if your div tag is <div id="product-single__description"> then your field would have "#product-single__description" populated to be correct.
- IMPORTANT FORMATTING NOTES:
- data-chat-integration: This parameter will control whether your Answerbase Q&A widget will work together with your chat provider. The chat providers who are currently supported are Gorgias and Comm100, and the values that you should use for this parameter is either "gorgias" or "comm100" depending on which chat provider you're using. If you'd like to request integration with a specific chat provider, please Contact Us about other options that you'd like to see.
- data-on-page-search-elements: This parameter will allow you define other information on the page that you'd like the ask question form to search through and auto-suggest answers from. For example, if you're an ecommerce site and you'd like Answerbase to search through product information or product specifications to see if you've already answered the users questions, this parameter can be used to let Answerbase know what information to look through (See a detailed example and code snippets for this use case here). The values that you'll populate within this parameter will let Answerbase know (1) what HTML element the content can be found within and (2) seperated by a comma you'll let us know what the title of the content is. For example, if your information is contained within a <div> element with the class "product-details"....then you could define the value of this parameter in this format "[DIV-CLASS], [INFORMATION-TITLE]" and you may put ".product-details, Product Information". If you have many different information types on the page you want taken into account, you can list out any number of DIVS or HTML elements that Answerbase should look within....and just separate each of them by a semicolon....so if you have Product Information and a Product Specifications table....your result as the parameter values may look something like this: ".product-details, Product Information; .product-specifications, Product Specifications". These capabilities help ensure that you don't have to answer questions about information that you've already provided on page.
- IMPORTANT FORMATTING NOTES:
- Using Class Attribute: If you use a class name, you need to prefix class name with a “dot” so if your div tag is <div class="product-single__description rte"> then you need to define ".product-single__description" in the field. If there are multiple class names, they also must be joined by dots....so a div tag <div class="product-single__description rte"> would need to define ".product-single__description.rte" in the text field.
- Using ID Attribute: If using an ID, you have to prefix the ID with a “#”, so if your div tag is <div id="product-single__description"> then your field would have "#product-single__description" populated to be correct.
- IMPORTANT FORMATTING NOTES:
When you're integrating the Answerbase Full Featured Widget into your page, we also have a small "call to action" widget that is typically on the top of the page, letting the user know that the Q&A capabilities are available on the page with a preview of how many Q&A's are available to see and a call to action to ask their own question. When you click on the call to action widget, it will lead the user to the full featured Q&A widget typically placed a bit further down the page. If you have the Full Featured Widget in a tab or accordion, you can configure the call to action widget to open that placement through a "data-click-to-show" parameter. We encourage you to view the Answerbase Call to Action Widget Documentation for details around those parameters, a preview of what that widget looks like, configuration options, etc.
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.
Ecommerce Merchants
As mentioned at the beginning of this page, there are additional parameters that ecommerce merchants can pass to provide product specific information for an Ecommerce Q&A install, to find out more about those parameters you should read the Ecommerce Q&A Widget Install Instructions. If you have any questions, please Contact Us and we'll make sure you're taken care of and have a successful install.
