Setup
Defaults
Default values set when instance is created, this can be overwritten.
private defaultSettings: DefaultSettings = {
default: {
defaults: true,
history: false,
historyMax: 10,
},
templates: {
'fixed': require('BobjollPath/templates/feedback-v1.0/fixed.hbs'),
'fixed_question': require('BobjollPath/templates/feedback-v1.0/fixed-question.hbs'),
'message': require('BobjollPath/templates/feedback-v1.0/message.hbs'),
'static': require('BobjollPath/templates/feedback-v1.0/static.hbs'),
}
};
Instance Settings
import Feedback from 'BobjollFeedback';
const feedback = new Feedback({
action: string;
method: 'POST' | 'GET';
text: {
'close': string;
'submit': string;
'cancel': string;
'msg_error': string;
'email_info': string;
'email_error': string;
'email_label': string;
'email_placeholder': string;
'request_error': string;
};
default: {
overlay?: boolean; // Show feedback overlay
defaults?: boolean;
options: {
id?: string;
icon?: string;
order?: number;
class?: string;
feedback?: { // Feedback settings in case we want a staged user feedback for first data and more extensive data collecetion.
contact?: boolean;
contactRequired?: boolean;
staged?: boolean;
label?: string;
required?: boolean;
placeholder: string;
};
success_msg?: string;
text?: string;
value: string;
}[];
success_msg?: string;
history?: boolean;
historyMax?: number;
view?: string;
viewCounter?: {
view?: string;
'%': number;
times?: number;
}[];
}
questions: {
id?: string;
class?: string;
views?: string[],
question: string,
options?: {
id?: string;
icon?: string;
order?: number;
class?: string;
feedback?: {
contact?: boolean;
contactRequired?: boolean;
staged?: boolean;
label?: string;
required?: boolean;
placeholder: string;
};
success_msg?: string;
text?: string;
value: string;
}[];
}[];
templates?: {
'fixed': Function;
'fixed_question': Function;
'message': Function;
'static': Function;
},
user?: () => {
id: number;
login: string;
email: string;
avatar: string;
premium: boolean;
cc_will_expire: boolean;
connected_google?: boolean;
connected_facebook?: boolean;
connected_twitter?: boolean;
};
});
Update view method
There is a public method you can use to trigger manually a page view, this is extremely useful for single page based projects.
feedback.updateView(view: string, url: string);
Hide method
You can hide the feedback form whenever you need to with the public method
feedback.hide();
Show method
You can show the feedback form whenever you need to with the public method
feedback.show();
Example 1
import Feedback from 'BobjollFeedback';
const feedback = new Feedback({
action: '/xhr/report/feedback',
method: 'POST',
text: {
'close': _lang('Close'),
'submit': _lang('Send'),
'cancel': _lang('No thanks'),
'msg_error': _lang('Write us a comment'),
'email_info': _lang('We promise not to send you spam :)'),
'email_error': _lang('The email you entered is incorrect.'),
'email_label': _lang('If you have a problem, we would like to help you.'),
'email_placeholder': _lang('Write your email'),
'request_error': _lang('We are experiencing some problems. Please try one more time in a moment.'),
},
default: {
overlay: true,
defaults: true,
history: true,
options: [
{
icon: '/media/img/icons/sad.svg',
feedback: {
contact: true,
contactRequired: true,
required: true,
staged: true,
placeholder: _lang('Why not? What would you improve?')
},
value: 'Sad'
},
{
icon: '/media/img/icons/neutral.svg',
feedback: {
required: true,
staged: true,
placeholder: _lang('Why not? What would you improve?')
},
value: 'Neutral'
},
{
icon: '/media/img/icons/happy.svg',
feedback: {
required: true,
staged: true,
placeholder: _lang('We are pleased! Would you improve something?')
},
value: 'Happy'
}
],
success_msg: _lang(`Thanks for helping us!`),
view: document.body.dataset.hbsTemplate,
viewCounter: [
{
times: 1,
'%': 10,
},
{
'view': 'download',
'%': 20,
}
]
},
questions: [
{
question: _lang('Do you think Freepik makes your job easier?')
},
{
question: _lang('Do you like the design of the website?')
},
{
question: _lang('Do you find Freepik easy to use?')
},
{
question: _lang('Do you like our service?')
},
{
question: _lang('Do you like our web?')
},
{
views: ['search'],
question: _lang('Did you find what you wanted for this search?')
},
{
views: ['detail', 'download'],
question: _lang('Do you like the process to download vectors?')
}
],
user: () => {
return gr.user;
}
});
if (example1) {
let example1 = document.getElementById('feedback-example-1');
let page = 0;
feedback.updateView('test-' + (page++));
example1.addEventListener('click', function() {
feedback.updateView('test-' + (page++));
feedback.show();
});
}