Answerbase Easy Integration & Configuration Guide for Shopify Product Questions & Answers
If you've installed the Answerbase Shopify Product Questions & Answers App into your store, you're ready to integrate into your site and make sure the functionality is configured as you'd like. When you're managing the Answerbase App from within the "Apps" area in your Shopify Administration Portal, you'll see a number of configuration options and fields available to you. This article will go over each field and what it controls.
If you have any questions or need any help configuring your widget, please Contact Answerbase Customer Support and we'll ensure you're 100%.
- Title Text: This controls what the text of the widget title will be, which will display above the widget. You can define it as "none" if you don't want any text to appear.
- Ask Question Field Text: This controls what text will show prompting the user to ask a question.
- Ask Question Button Text: This 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.
- List Title - Popular Questions: This controls what text will show when you are showing "Popular Questions" on your widget.
- List Title - Recent Questions: This controls what text will show when you are displaying "Recently Asked" questions on your widget.
- Character Limit Count Text: This controls what text will show before the character countdown which displays as a user types their question title.
- Text Empty List: This controls what text will show when the list doesn't have any questions to display.
- Text Pending Answer: This controls what text will show when a question is displaying but does not have any answers posted yet.
- Open Question Links In: This controls how Q&A thread links will open the user's selection.
- Open Ask Form In: This controls how ask question form will open when the user is going through the ask question process.
- List Type: This 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 or (2) "recent" which will show the most recently asked questions.
- Number of Questions to Display: This should be a number value, as an integer, which controls how many questions will display on the widget.
- Show Question Details: 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.
- Show Answers: 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.
- Show Comments: This will define whether the widget should show the comments or not.
- Expand Comments: This will define whether the widget should expand the comments by default or not.
- Maximum Widget Width: This 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".
- Maximum 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 "100" to ensure that 100 pixels of vertical space would be taken up before it gives the "read more" link to click on.
- Maxiumum 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 "100" to ensure that 100 pixels of vertical space would be taken up before it gives the "read more" link to click on.
- Show Only Micro Content: This conrtols whether you'd only like content that is identified as "Micro Content" as defined within your full administration portal under "System Settings > SEO", to ensure that your shorter form answers can be used specifically to enhance the SEO of your product pages.
- Link to View All Questions: 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.
- Page Specific Content: 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.
- Show Category Selection Dropdown: This controls on the ask question form, if the category selection option should show for users who are asking new questions. These categories are defined under "Categories" in your full Answerbase Administration Portal.
- Show Product Selection Dropdown: This 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.
- Show Question List: This 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.
- Page Association: This ensures that new questions that are posted are associated specifically to the URL you identify in the "data-page-url" parameter.
- Automatic Updates: 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.
- Product Page Insert After: This attribute will be used if you want to insert the widget AFTER an element of reference you define as the attribute and will apply to the widget within your Product Page. 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:
- Collection Page Insert After: This attribute will be used if you want to insert the widget AFTER an element of reference you define as the attribute and will apply to the widget within your Collections Pages. 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:
- CTA Enabled: This will identify whether you want the "Call to Action Widget" showing on the top of your product page, to let users see that Q&A engagement is available and when you have Q&A content posted it will give a preview of how much content is available for the visitor to see.
- CTA 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:
- CTA Text: This attribute definition will be used to replace the default "Have a product question?" text, if desired.
- Chat Integration: This 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.
- CTA Click To Show: This attribute allows the user to specify a CSS selector representing the element to be "clicked" to activate the tab containing the full featured Q&A widget. If you're using Answerbase's "default" code for BigCommerce or Shopify, you can omit this attribute.
- On Page Search Elements: This will allow Answerbase to search through product information or product specifications to see if you've already answered the users questions, this 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:
If you have any questions or need any help configuring your widget, please Contact Answerbase Customer Support and we'll ensure you're 100%.
