@soyio/soyio-widget 0.0.34 → 0.0.35
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 +65 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,31 +1,52 @@
|
|
|
1
|
-
|
|
1
|
+
<h1 align="center">Soyio desktop widget</h1>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<p align="center">
|
|
4
|
+
<em>
|
|
5
|
+
Use the Soyio widget within your web application as a Window.
|
|
6
|
+
</em>
|
|
7
|
+
</p>
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://www.npmjs.com/package/@soyio/soyio-widget" target="_blank">
|
|
11
|
+
<img src="https://img.shields.io/npm/v/@soyio/soyio-widget?label=version&logo=nodedotjs&logoColor=%23fff&color=306998" alt="NPM - Version">
|
|
12
|
+
</a>
|
|
13
|
+
</p>
|
|
6
14
|
|
|
7
|
-
##
|
|
15
|
+
## Installation
|
|
8
16
|
|
|
9
|
-
|
|
17
|
+
Install using npm! (or your favorite package manager)
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
# Using npm
|
|
21
|
+
npm install @soyio/soyio-widget
|
|
22
|
+
|
|
23
|
+
# Using yarn
|
|
24
|
+
yarn add @soyio/soyio-widget
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
Integrate the widget into your frontend framework using the script below. Ensure to replace placeholders (e.g., <flow>, <company id>) with actual values relevant to your implementation.
|
|
10
30
|
|
|
11
31
|
```html
|
|
12
32
|
<script>
|
|
33
|
+
// Widget configuration
|
|
13
34
|
const widgetConfig = {
|
|
14
|
-
flow:
|
|
15
|
-
configProps
|
|
16
|
-
companyId:
|
|
17
|
-
userReference:
|
|
18
|
-
userEmail:
|
|
19
|
-
flowTemplateId:
|
|
20
|
-
identityId:
|
|
21
|
-
}
|
|
22
|
-
onEvent: (data) => console.log(
|
|
23
|
-
isSandbox: true
|
|
24
|
-
}
|
|
35
|
+
flow: "<flow>",
|
|
36
|
+
configProps: {
|
|
37
|
+
companyId: "<company id>",
|
|
38
|
+
userReference: "<user identifier of company>",
|
|
39
|
+
userEmail: "<user email>",
|
|
40
|
+
flowTemplateId: "<flow template id>",
|
|
41
|
+
identityId: "<identity id>",
|
|
42
|
+
},
|
|
43
|
+
onEvent: (data) => console.log("Data: ", data),
|
|
44
|
+
isSandbox: true,
|
|
45
|
+
};
|
|
25
46
|
|
|
26
47
|
// Create widget when needed. In this example, widget is created when page is loaded.
|
|
27
|
-
document.addEventListener(
|
|
28
|
-
new Widget(widgetConfig)
|
|
48
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
49
|
+
new Widget(widgetConfig);
|
|
29
50
|
});
|
|
30
51
|
</script>
|
|
31
52
|
|
|
@@ -33,3 +54,29 @@ For frontend frameworks, this should be imported as follows.
|
|
|
33
54
|
<div id="soyio-widget-iframe-container"></div>
|
|
34
55
|
</body>
|
|
35
56
|
```
|
|
57
|
+
|
|
58
|
+
#### Attribute Descriptions
|
|
59
|
+
|
|
60
|
+
- **`flow`**: A string that can only take the values `'register'` or `'authenticate'`. Specifies the workflow of the widget.
|
|
61
|
+
- **`companyId`**: The unique identifier for the company, must start with `'com_'`.
|
|
62
|
+
- **`userReference`**: (Optional) A reference identifier provided by the company for the user engaging with the widget. This identifier is used in events (`onEvent` and `webhooks`) to inform the company which user the events are associated with.
|
|
63
|
+
- **`userEmail`**: The user's email address. This field is optional when the flow is `'register'`, where if not provided, Soyio will prompt the user to enter their email. However, for the `'authenticate'` flow, this field should not be provided.
|
|
64
|
+
- **`flowTemplateId`**: : Required only in the `'register'` flow, this identifier specifies the order and quantity of documents requested from the user. It must start with `'vft_'`.
|
|
65
|
+
- **`identityId`**: Necessary only in the `'authenticate'` flow, this identifier must start with `'id_'` and signifies the user's identity.
|
|
66
|
+
- **`onEvent`**: A callback function triggered upon event occurrences, used for capturing and logging event-related data.
|
|
67
|
+
- **`isSandbox`**: (Optional) Indicates if the widget should operate in sandbox mode, defaulting to false.
|
|
68
|
+
|
|
69
|
+
#### Events
|
|
70
|
+
|
|
71
|
+
The `onEvent` callback is designed to handle various events that occur during widget interaction. Specifically, it receives detailed information upon the successful completion of user flows. Here are the events it handles:
|
|
72
|
+
|
|
73
|
+
- **`IDENTITY_REGISTERED`**: This event is dispatched when a user successfully completes the registration flow. The event object contains:
|
|
74
|
+
|
|
75
|
+
- `eventName`: The name of the event, in this case, `'IDENTITY_REGISTERED'`.
|
|
76
|
+
- `identityId`: The unique identifier for the newly registered identity.
|
|
77
|
+
- `userReference`: The reference identifier for the user, facilitating the association of the event with the user within the company's context.
|
|
78
|
+
|
|
79
|
+
- **`IDENTITY_AUTHENTICATED`**: This event occurs when a user successfully completes the authentication flow. The event object includes:
|
|
80
|
+
- `eventName`: The name of the event, here `'IDENTITY_AUTHENTICATED'`.
|
|
81
|
+
- `identityId`: The unique identifier for the authenticated identity.
|
|
82
|
+
- `userReference`: The reference identifier for the user, facilitating the association of the event with the user within the company's context.
|