@magicfeedback/native 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -52
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,9 @@ MagicFeedback AI JavaScript Library for [MagicFeedback.io](https://magicfeedback
|
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
7
|
-
This library is available as a [package on NPM](https://www.npmjs.com/package/@magicfeedback/native). To install into a
|
|
7
|
+
This library is available as a [package on NPM](https://www.npmjs.com/package/@magicfeedback/native). To install into a
|
|
8
|
+
project using NPM with a front-end packager such as [Browserify](http://browserify.org/)
|
|
9
|
+
or [Webpack](https://webpack.github.io/):
|
|
8
10
|
|
|
9
11
|
```sh
|
|
10
12
|
npm i @magicfeedback/native
|
|
@@ -33,37 +35,54 @@ magicfeedback.init({
|
|
|
33
35
|
```
|
|
34
36
|
|
|
35
37
|
## How to use
|
|
36
|
-
|
|
38
|
+
|
|
39
|
+
This guide provides instructions for utilizing various features and functionalities of the application. Each section
|
|
40
|
+
below highlights a specific use case and provides a code snippet to demonstrate its implementation.
|
|
37
41
|
|
|
38
42
|
### A. Generate feedback forms
|
|
39
|
-
|
|
43
|
+
|
|
44
|
+
The feedback form generation functionality allows you to easily create and display feedback forms on your website. This
|
|
45
|
+
section provides an overview of how to use this feature and the necessary code snippets.
|
|
40
46
|
|
|
41
47
|
To generate a feedback form, you need to include the following HTML code snippet in your web page:
|
|
42
48
|
|
|
43
49
|
```html
|
|
50
|
+
|
|
44
51
|
<div id="demo_form_div"></div>
|
|
45
52
|
```
|
|
53
|
+
|
|
46
54
|
This code snippet creates a placeholder element with the ID "demo_form_div" where the feedback form will be inserted.
|
|
47
55
|
|
|
48
56
|
Next, you need to include the following JavaScript code snippet in your application:
|
|
49
57
|
|
|
50
58
|
```js
|
|
51
|
-
let form = window.magicfeedback.form(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
let form = window.magicfeedback.form(
|
|
60
|
+
"$_APP_ID",
|
|
61
|
+
"$_PUBLIC_KEY"
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
form.generate(
|
|
65
|
+
"demo_form_div",
|
|
66
|
+
{
|
|
67
|
+
addButton: true | false // Default false
|
|
68
|
+
beforeSubmitEvent: function (), //Function to execute before send the form
|
|
69
|
+
afterSubmitEvent: function (response), //Function to execute after send the form with the response
|
|
70
|
+
}
|
|
71
|
+
)
|
|
57
72
|
```
|
|
58
73
|
|
|
59
|
-
In this code snippet, you need to replace $_APP_ID with the actual ID of your feedback application. This ID is provided
|
|
60
|
-
|
|
74
|
+
In this code snippet, you need to replace $_APP_ID with the actual ID of your feedback application. This ID is provided
|
|
75
|
+
by the magicfeedback service.
|
|
61
76
|
|
|
62
|
-
The **form.generate()** function generates the feedback form inside the specified container element ("demo_form_div" in
|
|
77
|
+
The **form.generate()** function generates the feedback form inside the specified container element ("demo_form_div" in
|
|
78
|
+
this example). You can customize the form generation by including the optional parameters:
|
|
63
79
|
|
|
64
|
-
* **addButton**: This setting determines whether to include a "Submit" button that enables users to submit the form
|
|
65
|
-
|
|
66
|
-
* **
|
|
80
|
+
* **addButton**: This setting determines whether to include a "Submit" button that enables users to submit the form
|
|
81
|
+
themselves. By default, this value is set to false, indicating that the button will not be displayed.
|
|
82
|
+
* **beforeSubmitEvent**: An optional function that you can define to execute some actions or validations before the form
|
|
83
|
+
is submitted.
|
|
84
|
+
* **afterSubmitEvent**: An optional function that you can define to execute actions after the form is submitted. This
|
|
85
|
+
function receives the server response as a parameter.
|
|
67
86
|
|
|
68
87
|
Finally, to send the form, you can use the form.send() function.
|
|
69
88
|
|
|
@@ -75,40 +94,5 @@ This function triggers the submission of the generated feedback form.
|
|
|
75
94
|
|
|
76
95
|
|
|
77
96
|
|
|
78
|
-
By following these steps and including the appropriate HTML and JavaScript code snippets, you can easily generate and
|
|
79
|
-
|
|
80
|
-
### B. Send feedback directly
|
|
81
|
-
The "Send feedback directly" functionality allows you to send user feedback data to the server without generating a feedback form. This section provides an overview of how to use this feature and the necessary code snippets.
|
|
82
|
-
|
|
83
|
-
To send feedback directly, you need to include the following JavaScript code snippet in your application:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
```js
|
|
87
|
-
|
|
88
|
-
// Initialize an empty array to store user feedback answers
|
|
89
|
-
const answers = [];
|
|
90
|
-
|
|
91
|
-
// Add user feedback answer objects to the 'answers' array
|
|
92
|
-
// Each answer object should have a 'id' key (string) and a 'value' key (array of string values)
|
|
93
|
-
answers.push({ id: "rating", value: ["Ok"] });
|
|
94
|
-
answers.push({ id: "improve", value: ["Maybe the interface is a bit slow on my OSX"] });
|
|
95
|
-
|
|
96
|
-
// Create a profile object to store additional information
|
|
97
|
-
// You can include any information you want in this object
|
|
98
|
-
const profile = { email: "farias@magicfeedback.io" };
|
|
99
|
-
|
|
100
|
-
// Send the user feedback data to the server
|
|
101
|
-
// Make sure to provide the required App Id as a parameter
|
|
102
|
-
magicfeedback.send("$_APP_ID", answers, profile);
|
|
103
|
-
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
In this code snippet, you need to replace $_APP_ID with the actual ID of your feedback application. This ID is provided by the magicfeedback service.
|
|
107
|
-
|
|
108
|
-
The answers array stores user feedback answer objects. Each answer object should have an id key, which represents the question or feedback category, and a value key, which holds an array of string values representing the user's response(s) to that question or category. You can add as many answer objects as needed to capture the user's feedback.
|
|
109
|
-
|
|
110
|
-
Additionally, you can create a profile object to store additional information about the user. This object can include any information you want, such as the user's email, name, or any other relevant details.
|
|
111
|
-
|
|
112
|
-
Finally, to send the user feedback data to the server, you can use the magicfeedback.send() function. This function takes three parameters: the App Id, the answers array, and the profile object. The App Id is required and identifies your feedback application within the magicfeedback service.
|
|
113
|
-
|
|
114
|
-
By following these steps and including the appropriate JavaScript code snippet, you can send user feedback data directly to the server using the magicfeedback service.
|
|
97
|
+
By following these steps and including the appropriate HTML and JavaScript code snippets, you can easily generate and
|
|
98
|
+
display feedback forms on your website using the magicfeedback service.
|