How to install Answerbase's ecommerce product page call to action (CTA) widget
When you add Q&A to your product page around the product description, its also helpful to have a more simple widget installed near the product title on the page which allows the users to (1) ask a new product question and (2) see how many Q&A threads are available for that product.
To manage that, we support a call-to-action (CTA) widget. See the example below under the review stars:
In order to add this widget you simply need to add the appropriate code that you can find in your administration dashboard under "Integration > Q&A Widget", you'll see it underneath your Q&A widget section. The code will look similar to what you see here:
<script src="https://[YOUR-SITE].services.answerbase.com/javascript/widget/cta-widget.js"></script>
The above [YOUR-SITE] value will be the same that is referenced in your main "Q&A Widget" code so see that for reference.
That code snippet also supports the following attributes which you can define:
To manage that, we support a call-to-action (CTA) widget. See the example below under the review stars:
In order to add this widget you simply need to add the appropriate code that you can find in your administration dashboard under "Integration > Q&A Widget", you'll see it underneath your Q&A widget section. The code will look similar to what you see here:
<script src="https://[YOUR-SITE].services.answerbase.com/javascript/widget/cta-widget.js"></script>
The above [YOUR-SITE] value will be the same that is referenced in your main "Q&A Widget" code so see that for reference.
That code snippet also supports the following attributes which you can define:
- data-text (optional): This attribute definition will be used to replace the default "Have a product question?" text, if desired. So, for example...if you want the text of the widget to read "Feel free to ask a question"...you can reflect this: <script src="https://[YOUR-SITE].services.answerbase.com/javascript/widget/cta-widget.js" data-text="Feel free to ask a question"></script>
- data-click-to-show (optional): 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 ommit this attribute.
- "data-append-as-child-of" (optional): The data-append-as-child-of attribute represents the element where the widget will be inserted as its last child.
- 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:
