@voxie/contacts.js 0.1.1
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 +151 -0
- package/dist/contacts.js +1654 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# contacts.js
|
|
2
|
+
|
|
3
|
+
## Quick Start
|
|
4
|
+
|
|
5
|
+
### Vanilla DOM
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<head>
|
|
9
|
+
<!-- inject contacts library inside head tag-->
|
|
10
|
+
<script src="./dist/contacts.js"></script>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<!-- display your form -->
|
|
14
|
+
<form name="myForm">
|
|
15
|
+
<label>
|
|
16
|
+
Phone:
|
|
17
|
+
<input name="phone" type="tel" />
|
|
18
|
+
</label>
|
|
19
|
+
<input type="submit" />
|
|
20
|
+
</form>
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
const form = document.forms.myForm;
|
|
24
|
+
|
|
25
|
+
// attach event handler
|
|
26
|
+
form.addEventListener("submit", async (e) => {
|
|
27
|
+
e.preventDefault();
|
|
28
|
+
// initialize contacts library
|
|
29
|
+
const voxie = await Voxie.init({
|
|
30
|
+
publicKey: "<YOUR_WRITE_KEY>",
|
|
31
|
+
publicSecret: "<YOUR_SECRET_KEY>",
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
const phone = form.phone.value;
|
|
35
|
+
// push contact data
|
|
36
|
+
voxie.capture(phone);
|
|
37
|
+
});
|
|
38
|
+
</script>
|
|
39
|
+
</body>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### React
|
|
43
|
+
|
|
44
|
+
```jsx
|
|
45
|
+
import { Voxie } from "@voxie/contacts.js";
|
|
46
|
+
|
|
47
|
+
// we can export this instance to share with rest of our codebase.
|
|
48
|
+
export const voxie = await Voxie.init({
|
|
49
|
+
publicKey: "<YOUR_WRITE_KEY>",
|
|
50
|
+
publicSecret: "<YOUR_SECRET_KEY>",
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
const App = () => (
|
|
54
|
+
// (inlined for brevity) - pass telephone input to voxie capture
|
|
55
|
+
<form
|
|
56
|
+
onSubmit={(e) => {
|
|
57
|
+
e.preventDefault();
|
|
58
|
+
const phone = e.target.phone.value;
|
|
59
|
+
voxie.capture(phone);
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
<label>
|
|
63
|
+
Phone:
|
|
64
|
+
<input name="phone" type="tel" />
|
|
65
|
+
</label>
|
|
66
|
+
<input type="submit" value="Submit" />
|
|
67
|
+
</form>
|
|
68
|
+
);
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Vue 3
|
|
72
|
+
|
|
73
|
+
1. Create composable file voxie.ts
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
import { voxie } from "@voxie/contacts.js";
|
|
77
|
+
|
|
78
|
+
export function useVoxie() = {
|
|
79
|
+
const voxie = await Voxie.init({
|
|
80
|
+
publicKey: "<YOUR_WRITE_KEY>",
|
|
81
|
+
publicSecret: "<YOUR_SECRET_KEY>",
|
|
82
|
+
});
|
|
83
|
+
return voxie;
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
2. In component
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<template>
|
|
91
|
+
<!-- (inlined for brevity) - pass telephone input to voxie capture -->
|
|
92
|
+
<form @submit.prevent="capture($event)">
|
|
93
|
+
<label>
|
|
94
|
+
Phone:
|
|
95
|
+
<input name="phone" type="tel" />
|
|
96
|
+
</label>
|
|
97
|
+
<input type="submit" value="Submit" />
|
|
98
|
+
</form>
|
|
99
|
+
</template>
|
|
100
|
+
|
|
101
|
+
<script>
|
|
102
|
+
import { defineComponent } from "vue";
|
|
103
|
+
import { useVoxie } from "./services/voxie";
|
|
104
|
+
|
|
105
|
+
export default defineComponent({
|
|
106
|
+
setup() {
|
|
107
|
+
function capture(event) {
|
|
108
|
+
const phone = event.target.phone.value;
|
|
109
|
+
useVoxie.capture(phone);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
return {
|
|
113
|
+
capture,
|
|
114
|
+
};
|
|
115
|
+
},
|
|
116
|
+
});
|
|
117
|
+
</script>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Installing via package manager
|
|
121
|
+
|
|
122
|
+
```sh
|
|
123
|
+
# npm
|
|
124
|
+
npm install @voxie/contacts.js
|
|
125
|
+
|
|
126
|
+
# yarn
|
|
127
|
+
yarn add @voxie/contacts.js
|
|
128
|
+
|
|
129
|
+
# pnpm
|
|
130
|
+
pnpm add @voxie/contacts.js
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
import { Voxie } from "@voxie/contacts";
|
|
135
|
+
|
|
136
|
+
const voxie = Voxie.init({
|
|
137
|
+
publicKey: "<YOUR_WRITE_KEY>",
|
|
138
|
+
publicSecret: "<YOUR_SECRET_KEY>",
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
voxie.capture("+15551231234", {
|
|
142
|
+
firstName: "John",
|
|
143
|
+
lastName: "Doe",
|
|
144
|
+
// tags and custom attribute keys must be lowercase
|
|
145
|
+
tags: ["purchased", "online"],
|
|
146
|
+
customAttributes: {
|
|
147
|
+
last_purchase_sku: "vxe123",
|
|
148
|
+
last_product_viewed_sku: "vxe456",
|
|
149
|
+
},
|
|
150
|
+
});
|
|
151
|
+
```
|