This class allows creation of FAQ list component which can be used to display most popular answers according to specific criteria.
1. Add script to your page:
<script src="https://product_demo.nanorep.co/web/include.js?sdk=faq"></script>
2. Create empty <div>:
<div id="faq-example"></div>
3. Initialize FAQ component:
nanorep.sdk.init({
host: 'product_demo.nanorep.co',
account: 'product_demo',
kb: 'docs'
});
var faqWidget = new nanorep.sdk.FAQ({
apiParams: { days: 17, items: 9 }
}, document.getElementById('faq-example'));
Type: object
Specify query options object (passed to API "as is")
days: Number |
The number of days to show most popular answers from (1 - 1000) |
items: Number |
The number of answers to show (1 - 30) |
kb (Optional): String |
Knowledge base id |
labelId (Optional): String |
Select to filter items by a specific label (label id in HEX) |
query (Optional): String |
The search term to filter the results by (encoded via Base64 under the hood) |
context (Optional): Object |
Simple key-value object with context |
new nanorep.sdk.FAQ({
apiParams: { days: 17, items: 9, labelId: '3e7c63fc' }
}, document.getElementById('example-options-apiParams'));
<div id="example-options-apiParams"></div>
Type: String
Default: 'icons'
Specify which feedback type to use - 'icons' or 'textual'
new nanorep.sdk.FAQ({
feedbackType: 'textual',
apiParams: { days: 17, items: 9 }
}, document.getElementById('example-options-feedbackType'));
<div id="example-options-feedbackType"></div>
Type: String
Default: 'auto'
Feedback dialog type could be one of these 'multipleChoiceOpenText', 'multipleChoice', 'openText'
new nanorep.sdk.FAQ({
feedbackDialogType: 'multipleChoice',
apiParams: { days: 17, items: 9 }
}, document.getElementById('example-options-feedbackDialogType'));
<div id="example-options-feedbackDialogType"></div>
loadAnswers(apiParams) : void
Reload widget with another API params to display different set of answers. Returns nothing
apiParams: Object |
Same as apiParams option |
var faqInstance = new nanorep.sdk.FAQ({
apiParams: { items: 3, days: 17 }
}, document.getElementById('example-methods-loadAnswers'));
faqInstance.loadAnswers({ items: 3, days: 17, labelId: '3e7c63fc' }); // load answers with specific label
<div id="example-methods-loadAnswers"></div>
openAnswer(answerId) : void
Open answer by id (can be used after the ready event when all answers are loaded). Returns nothing
answerId: String |
Specific answer ID to open in list |
var faqInstance = new nanorep.sdk.FAQ({
apiParams: { items: 3, days: 17 }
}, document.getElementById('example-methods-openAnswer')).on('ready', function() {
faqInstance.openAnswer(faqInstance.getAnswers()[0].id); // lets open first answer
});
<div id="example-methods-openAnswer"></div>
faqInstance.on('ready', function(answers) {})
Occurred when FAQ answers were loaded
answers: Array |
Array of answers |
new nanorep.sdk.FAQ({
apiParams: { days: 17, items: 9 }
}, document.getElementById('example-events-ready')).on('ready', function(answers) {
alert('There are '+ answers.length +' answers');
});
<div id="example-events-ready"></div>
faqInstance.on('answerOpened', function(answer) {})
Occurred when answer is opened
answer: Object |
Answer model object |
new nanorep.sdk.FAQ({
apiParams: { days: 17, items: 9 }
}, document.getElementById('example-events-answerOpened')).on('answerOpened', function(answer) {
alert('Answer '+ answer.id +' is opened');
});
<div id="example-events-answerOpened"></div>
faqInstance.on('answerClosed', function(answer) {})
Occurred when answer is closed
answer: Object |
Answer model object |
new nanorep.sdk.FAQ({
apiParams: { days: 17, items: 9 }
}, document.getElementById('example-events-answerClosed')).on('answerClosed', function(answer) {
alert('Answer '+ answer.id +' is closed');
});
<div id="example-events-answerClosed"></div>
faqInstance.on('noAnswers', function(answers) {})
Occurred when FAQ is loaded and it has no answers
new nanorep.sdk.FAQ({
apiParams: { days: 17, items: 9, labelId: 'aaaa' }
}, document.getElementById('example-events-noAnswers')).on('noAnswers', function() {
alert('There aren\'t any answers for current labelId');
});
<div id="example-events-noAnswers"></div>