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();
        });
    }