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 Growing Business 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.

Did this answer your question?