This plugin will show a Feedback Survey to collect user's satisfaction/mood into Framework7 apps and websites.
Most aspects of the plugin are customizable by set or change the settings in your F7 initialization script.
Made with Vanilla JS and only Framework7 components (Dialog, Notification, Prompt and Alert). Tested only in PWA without other implementations (Vue, React or Svelte).
The plugin implements Google Analytics with gtag events function, so make sure to install your GA code in order to send the events to your property. It also lets you send data collected through Ajax POST to any remote server.
https://nachoaguirre.github.io/framework7-feedback-plugin/
- Download plugin file (framework7.feedback.js) somewhere in your app folder.
- Place file somewhere in your app folder (maybe /js/ folder)
- Load file AFTER Framework7's script.
<script src="path/to/framework7.min.js"></script>
<script src="path/to/framework7.feedback.js"></script>
After include script file in your page, you need to initialize it. Do this BEFORE you init app:
// install plugin to Framework7
Framework7.use(feedbackPlugin);
// init app
var app = new Framework7({
root: '#app', // or what ever your root is
name: 'your-app-name',
feedback: { // Here you can change the default parameters of the plugin based on your needs. If you dont need to change some default parameter, then there is no need to include here.
auto_init: true,
time_delay: 15000,
show_once: true,
},
...
})
feedback: {
auto_init: true,
time_delay: 15000,
show_once: true,
storage_key: 'viewedFeedback',
dialog:{
title: 'Sorry for the interruption...',
text: 'What do you think of our new site?',
btn_ok: 'Send',
btn_cancel: 'Close',
post_ajax: false,
post_ajax_url: 'https://f7feedback.free.beeceptor.com',
post_ajax_param: 'rating'
},
options:{
option_1: '🤬',
option_2: '🙁',
option_3: '😶',
option_4: '😁',
option_5: '😍',
},
notification:{
show: true,
icon: '<i class="f7-icons">rays</i>',
title: 'Thank You!',
titleRightText: 'now',
subtitle: 'You won a discount coupon for lunch with us',
text: 'Click to receive it',
closeTimeout: 5000,
},
prompt:{
show: true,
text: 'Enter your email',
response: 'We will send the instructions to ',
post_ajax: false,
post_ajax_url: 'https://f7feedback.free.beeceptor.com',
post_ajax_param: 'answer',
post_ajax_include_rating: true,
},
gtag:{
send: true,
event: 'feedback',
param_sent: 'sent',
param_rating: 'rating',
param_prompt: 'answer',
},
}
Parameter | Type | Default | Description |
---|---|---|---|
auto_init | boolean | true | Should Feedback dialog be presented on startup? (after time_delay params). |
time_delay | integer | 15000 | Time before show the feedback dialog, in miliseconds. |
show_once | boolean | true | Show dialog only once time per user, or always (based on LocalStorage data) |
storage_key | string | viewedFeedback | LocalStorage key name set when user view feedback, used with show_once parameter |
dialog » title |
string | Sorry for the interruption ... | Dialog title |
dialog » text |
string | What do you think of our new site? | Dialog inner text |
dialog » btn_ok |
string | Send | Text for submit button (could be HTML string) |
dialog » btn_cancel |
string | Close | Text for close dialog without send feedback (could be HTML string) |
dialog » post_ajax |
boolean | false | If enabled then user rating is sent to remote path/url via POST |
dialog » post_ajax_url |
string | https://f7feedback.free.beeceptor.com | URL to send the POST data from feedback. Available only if post_ajax is true |
dialog » post_ajax_param |
string | rating | Name of the key sent in POST to URL. Available only if post_ajax is true. |
options » option_1 |
string | 🤬 | Content to show for the option with value 1 |
options » option_2 |
string | 🙁 | Content to show for the option with value 2 |
options » option_3 |
string | 😶 | Content to show for the option with value 3 |
options » option_4 |
string | 😁 | Content to show for the option with value 4 |
options » option_5 |
string | 😍 | Content to show for the option with value 5 |
notification » show |
boolean | true | If user submits the feedback dialog (button with 'btn_ok' value), should be presented a notification message? |
notification » icon |
string | < i class="f7-icons" >rays < /i > | Notification icon HTML layout, e.g. < i class="f7-icons" >house< /i > or image < img src="path/to/icon.png" > |
notification » title |
string | Thank You! | Notification title |
notification » titleRightText |
string | now | Additional text on the right side of title |
notification » subtitle |
string | You won a discount coupon for lunch with us | Notification subtitle |
notification » text |
string | Click to receive it | Notification inner text |
prompt » show |
boolean | true | If user clicks the notification message, should be presented a prompt dialog? |
prompt » text |
string | Enter your email | Prompt dialog text |
prompt » response |
string | We will send the instructions to | Text presented in an alert window prepending the user response |
prompt » post_ajax |
boolean | false | If enabled then user response is sent to remote path/url via POST |
prompt » post_ajax_url |
string | https://f7feedback.free.beeceptor.com | URL to send the POST data with response. Available only if post_ajax is true |
prompt » post_ajax_param |
string | answer | Name of the key sent in POST to URL. Available only if post_ajax is true. |
prompt » post_ajax_include_rating |
boolean | true | Include the rating value set by the user on the ajax post? The value is sent as 'rating' post name. |
gtag » send |
boolean | true | If enabled then events will be sent to google analytics |
gtag » event |
string | feedback | Event name of all the hits sent to GA |
gtag » param_sent |
string | sent | Name of the parameter sent if user submit or cancel the feedback dialog |
gtag » param_rating |
string | rating | Name of the parameter of the value choosen in dialog |
gtag » param_prompt |
string | answer | Name of the parameter of the text sent by user in prompt |
The following method are available on a feedback instance
app.feedback.open(); // Open the feedback dialog. Use it if 'auto_init' parameter is set to false.
Made with effort and desire to learn in SCL.