Framework7 Feedback Plugin

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.

Live Preview

https://nachoaguirre.github.io/framework7-feedback-plugin/

Installation

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>

Install & Enable Plugin

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,
	},
    ...
})

Full Parameters List

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',
	},
}

Parameters Description

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

API

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.

Credits

Made with effort and desire to learn in SCL.

nachoaguirre/framework7-feedback-plugin