How to Integrate Q&A on my Article Pages
If you're integrating Q&A on the bottom of your website articles so that customers can ask any questions relevant to the topic in that article, you want to ensure that there are specific parameters defined when you insert the widget so that Answerbase knows what the article is and associate the appropriate Q&A content to that article.
Answerbase's Q&A widget can be added to the bottom of every one of your article pages similar to what you see here:
This ensures that when your visitor is done reading your article, if they have any follow-up questions about that topic they can engage your business, identify that gap in your content, and give you the opportunity to fulfill that gap.
Integration Into Your Article Pages
Your website platform should have an option to edit the template for your articles, where you can add a snippet of code which will be placed on each of those pages. So, for example.....let's say your article url is this:
https://www.yoursite.com/this-is-the-...
So, to manage this, when you integrate you'll want to ensure your parameters are identified for page-specific content. The parameters that are required for this integration are the following:
We do have many other widget parameters to control the look and functionality of the widget, but the above will accomplish the goals of making the article/question connections that are needed.
Here is an example of how this may look:
It's relatively simple and we just need to make sure our widget knows those values, and when you're done you should be able to post a test question and then when it comes into your administration site you'll see the page association on the right. See an example of how this shows here:
Let us know if you have any questions with the integration and we'll work to make sure you're taken care of.
Answerbase's Q&A widget can be added to the bottom of every one of your article pages similar to what you see here:
This ensures that when your visitor is done reading your article, if they have any follow-up questions about that topic they can engage your business, identify that gap in your content, and give you the opportunity to fulfill that gap.
Integration Into Your Article Pages
Your website platform should have an option to edit the template for your articles, where you can add a snippet of code which will be placed on each of those pages. So, for example.....let's say your article url is this:
https://www.yoursite.com/this-is-the-...
So, to manage this, when you integrate you'll want to ensure your parameters are identified for page-specific content. The parameters that are required for this integration are the following:
- 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.
- 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.
- 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.
- IMPORTANT FORMATTING NOTES:
We do have many other widget parameters to control the look and functionality of the widget, but the above will accomplish the goals of making the article/question connections that are needed.
Here is an example of how this may look:
<script src="https://yoursite.services.answerbase.com/javascript/widget/full-featured-widget.js" type="text/javascript"
data-page-url="https://www.yoursite.com/this-is-the-article-title"
data-page-specific-content="true"
data-page-association="true"
data-insert-after=".div-class-5">
</script>It's relatively simple and we just need to make sure our widget knows those values, and when you're done you should be able to post a test question and then when it comes into your administration site you'll see the page association on the right. See an example of how this shows here:
Let us know if you have any questions with the integration and we'll work to make sure you're taken care of.
