Expert Answers is a Question and Answer (Q&A) widget that enables customers to ask questions about a product or service directly on your site. For each question asked, you'll receive a notification in your Timeline. Any responses to questions will be shown in your widget.
Requirements
Only available on Professional and above plans.
Navigation
Log into your REVIEWS.io Dashboard
Navigate to Publishing
Select Expert Answers.
This widget is designed for you to offer your own knowledge to your customers and as such, the questions are answered only by you, not other customers.
Embedding the Expert Answers Widget
Step 1
Select either Product or Company review questions from the tab and copy the appropriate code to your page.
Step 2
Add the following code to your page. You can customize the look of your widget by changing the values in the CSS section.
Product Questions
<script src="https://widget.reviews.co.uk/questions-answers/new/dist.js"></script>
<link rel="stylesheet" href="https://assets.reviews.io/css/widgets/qna-widget.css">
<link rel="stylesheet" href="https://assets.reviews.io/iconfont/reviewsio-icons/style.css">
<div id="questions-widget" style="width:100%; max-width:1000px;"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// When the page loads, we will initialise a widget on the element with an
// id of 'questions-widget'.
questionsWidgetNew('questions-widget', {
// This is your company url key
store: 'store-name',
group: '', // Enter product SKU to display the questions for specific products. If no SKUs are provided, then the url of the page (where widget is installed) will be used to group questions.
hideDates: true, // Change to show or hide dates
css: [
['--base-font-size: 16px'],
/* Button styles (shared between buttons): */
['--common-button-font-family: inherit'],
['--common-button-font-size: 16px'],
['--common-button-font-weight: 500'],
['--common-button-letter-spacing: 0'],
['--common-button-text-transform: none'],
['--common-button-vertical-padding: 10px'],
['--common-button-horizontal-padding: 25px'],
['--common-button-border-width: 2px'],
['--common-button-border-radius: 0px'],
/* Primary button styles: */
['--primary-button-bg-color: #0E1311'],
['--primary-button-border-color: #0E1311'],
['--primary-button-text-color: #ffffff'],
/* Secondary button styles: */
['--secondary-button-bg-color: transparent'],
['--secondary-button-border-color: #0E1311'],
['--secondary-button-text-color: #0E1311'],
/* Heading styles: */
['--heading-text-color: #0E1311'],
['--heading-text-font-weight: 600'],
['--heading-text-font-family: inherit'],
['--heading-text-line-height: 1.4'],
['--heading-text-letter-spacing: 0'],
['--heading-text-transform: none'],
/* Body text styles: */
['--body-text-color: #0E1311'],
['--body-text-font-weight: 400'],
['--body-text-font-family: inherit'],
['--body-text-line-height: 1.4'],
['--body-text-letter-spacing: 0'],
['--body-text-transform: none'],
/* Input field styles: */
['--inputfield-text-font-family: inherit'],
['--input-text-font-size: 14px'],
['--inputfield-text-font-weight: 400'],
['--inputfield-text-color: #0E1311'],
['--inputfield-border-color: rgba(0,0,0,0.2)'],
['--inputfield-background-color: transparent'],
['--inputfield-border-width: 1px'],
['--inputfield-border-radius: 0px'],
['--common-border-color: rgba(0,0,0,0.15)'],
['--common-border-width: 1px'],
['--common-sidebar-width: 190px'],
/* Badge styles: */
['--badge-icon-color: #0E1311'],
['--badge-icon-font-size: inherit'],
['--badge-text-color: #0E1311'],
['--badge-text-font-size: inherit'],
['--badge-text-letter-spacing: inherit'],
['--badge-text-transform: inherit'],
/* Author styles: */
['--author-font-size: inherit'],
['--author-text-transform: none'],
/* Author avatar styles: */
['--avatar-thumbnail-size: 60px'],
['--avatar-thumbnail-border-radius: 100px'],
['--avatar-thumbnail-text-color: #0E1311'],
['--avatar-thumbnail-bg-color: rgba(0,0,0,0.1)'],
/* Pagination & tabs styles (normal): */
['--pagination-tab-text-color: #0E1311'],
['--pagination-tab-text-transform: none'],
['--pagination-tab-text-letter-spacing: 0'],
['--pagination-tab-text-font-size: 16px'],
['--pagination-tab-text-font-weight: 600'],
/* Pagination & tabs styles (active): */
['--pagination-tab-active-text-color: #0E1311'],
['--pagination-tab-active-text-font-weight: 600'],
['--pagination-tab-active-border-color: #0E1311'],
['--pagination-tab-border-width: 3px'],
]
});
});
</script>
Company Questions
<script src="https://widget.reviews.co.uk/questions-answers/new/dist.js"></script>
<link rel="stylesheet" href="https://assets.reviews.io/css/widgets/qna-widget.css">
<link rel="stylesheet" href="https://assets.reviews.io/iconfont/reviewsio-icons/style.css">
<div id="questions-widget" style="width:100%; max-width:1000px;"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// When the page loads, we will initialise a widget on the element with an
// id of 'questions-widget'.
questionsWidgetNew("questions-widget", {
// This is your company url key
store: "store-name",
group: '', // Enter group name. If no name is provided, then the url of the page (where widget is installed) will be used to group questions.
hideDates: true, // Change to show or hide dates
css: [
['--base-font-size: 16px'],
/* Button styles (shared between buttons): */
['--common-button-font-family: inherit'],
['--common-button-font-size: 16px'],
['--common-button-font-weight: 500'],
['--common-button-letter-spacing: 0'],
['--common-button-text-transform: none'],
['--common-button-vertical-padding: 10px'],
['--common-button-horizontal-padding: 25px'],
['--common-button-border-width: 2px'],
['--common-button-border-radius: 0px'],
/* Primary button styles: */
['--primary-button-bg-color: #0E1311'],
['--primary-button-border-color: #0E1311'],
['--primary-button-text-color: #ffffff'],
/* Secondary button styles: */
['--secondary-button-bg-color: transparent'],
['--secondary-button-border-color: #0E1311'],
['--secondary-button-text-color: #0E1311'],
/* Heading styles: */
['--heading-text-color: #0E1311'],
['--heading-text-font-weight: 600'],
['--heading-text-font-family: inherit'],
['--heading-text-line-height: 1.4'],
['--heading-text-letter-spacing: 0'],
['--heading-text-transform: none'],
/* Body text styles: */
['--body-text-color: #0E1311'],
['--body-text-font-weight: 400'],
['--body-text-font-family: inherit'],
['--body-text-line-height: 1.4'],
['--body-text-letter-spacing: 0'],
['--body-text-transform: none'],
/* Input field styles: */
['--inputfield-text-font-family: inherit'],
['--input-text-font-size: 14px'],
['--inputfield-text-font-weight: 400'],
['--inputfield-text-color: #0E1311'],
['--inputfield-border-color: rgba(0,0,0,0.2)'],
['--inputfield-background-color: transparent'],
['--inputfield-border-width: 1px'],
['--inputfield-border-radius: 0px'],
['--common-border-color: rgba(0,0,0,0.15)'],
['--common-border-width: 1px'],
['--common-sidebar-width: 190px'],
/* Badge styles: */
['--badge-icon-color: #0E1311'],
['--badge-icon-font-size: inherit'],
['--badge-text-color: #0E1311'],
['--badge-text-font-size: inherit'],
['--badge-text-letter-spacing: inherit'],
['--badge-text-transform: inherit'],
/* Author styles: */
['--author-font-size: inherit'],
['--author-text-transform: none'],
/* Author avatar styles: */
['--avatar-thumbnail-size: 60px'],
['--avatar-thumbnail-border-radius: 100px'],
['--avatar-thumbnail-text-color: #0E1311'],
['--avatar-thumbnail-bg-color: rgba(0,0,0,0.1)'],
/* Pagination & tabs styles (normal): */
['--pagination-tab-text-color: #0E1311'],
['--pagination-tab-text-transform: none'],
['--pagination-tab-text-letter-spacing: 0'],
['--pagination-tab-text-font-size: 16px'],
['--pagination-tab-text-font-weight: 600'],
/* Pagination & tabs styles (active): */
['--pagination-tab-active-text-color: #0E1311'],
['--pagination-tab-active-text-font-weight: 600'],
['--pagination-tab-active-border-color: #0E1311'],
['--pagination-tab-border-width: 3px'],
]
});
});
</script>
IMPORTANT
You will need to enter either an SKU or group name to organize your questions for specific products or categories. Use the group: 'SKU_OR_GROUP' config to group-related questions.
If no SKUs are provided e.g group: '', then the URL of the page where the widget is installed will be used to group questions.
How to use the Expert Answers widget
Any questions will appear as notifications in your Timeline. To take action, simply click on the question as you would with any other Timeline content, and from here you are able to reply to the question.
