Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

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

Framework7 Feedback plugin
https://github.com/nachoaguirre/framework7-feedback-plugin

feedback framework7 framework7-plugin

Last synced: 12 months ago
JSON representation

Framework7 Feedback plugin

Awesome Lists containing this project

README 

          
# Framework7 Feedback Plugin



This plugin  will show a Feedback Survey to collect user's satisfaction/mood into [Framework7](http://www.framework7.io) 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](https://framework7.io/docs/dialog.html), [Notification](https://framework7.io/docs/notification.html), [Prompt](https://framework7.io/docs/dialog.html#prompt) and [Alert](https://framework7.io/docs/dialog.html#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



1. Download plugin file (framework7.feedback.js) somewhere in your app folder.

2. Place file somewhere in your app folder (maybe /js/ folder)

3. Load file AFTER Framework7's script.



```



```



### Install & Enable Plugin



After include script file in your page, you need to initialize it. Do this BEFORE you init app:



```js

// 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

```js

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: 'rays',

		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



```javascript

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.