@voxie/contacts.js
v1.2.0
Published
Start capturing contacts quickly
Downloads
2,139
Readme
contacts.js
Quick Start
Vanilla DOM
<head>
<!-- inject contacts library inside head tag-->
<script src="https://unpkg.com/@voxie/contacts.js@^1.2/dist/contacts.js"></script>
</head>
<body>
<!-- display your form -->
<form name="myForm">
<label>
Phone:
<input name="phone" type="tel" />
</label>
<input type="submit" />
</form>
<script>
const form = document.forms.myForm;
// attach event handler
form.addEventListener('submit', async (e) => {
e.preventDefault();
// initialize contacts library
const voxie = await Voxie.init({
publicKeyId: '<YOUR_PUBLIC_KEY_ID>',
publicSecret: '<YOUR_PUBLIC_KEY_ID>',
});
const phone = form.phone.value;
// push contact data
voxie.capture(phone);
});
</script>
</body>React
import { Voxie } from '@voxie/contacts.js';
// we can export this instance to share with rest of our codebase.
export const voxie = await Voxie.init({
publicKeyId: '<YOUR_PUBLIC_KEY_ID>',
publicSecret: '<YOUR_PUBLIC_KEY_ID>',
});
const App = () => (
// (inlined for brevity) - pass telephone input to voxie capture
<form
onSubmit={(e) => {
e.preventDefault();
const phone = e.target.phone.value;
voxie.capture(phone);
}}
>
<label>
Phone:
<input name="phone" type="tel" />
</label>
<input type="submit" value="Submit" />
</form>
);Vue 3
- Create composable file voxie.ts
import { voxie } from '@voxie/contacts.js';
export function useVoxie() = {
return await Voxie.init({
publicKeyId: '<YOUR_PUBLIC_KEY_ID>',
publicSecret: '<YOUR_PUBLIC_KEY_ID>',
});
}- In component
<template>
<!-- (inlined for brevity) - pass telephone input to voxie capture -->
<form @submit.prevent="capture($event)">
<label>
Phone:
<input name="phone" type="tel" />
</label>
<input type="submit" value="Submit" />
</form>
</template>
<script>
import { defineComponent } from 'vue';
import { useVoxie as voxie } from './services/voxie';
export default defineComponent({
setup() {
function capture(event) {
voxie.capture(event.target.phone.value);
}
return {
capture,
};
},
});
</script>Installing via package manager
# npm
npm install @voxie/contacts.js
# yarn
yarn add @voxie/contacts.js
# pnpm
pnpm add @voxie/contacts.jsimport { Voxie } from '@voxie/contacts';
const voxie = Voxie.init({
publicKeyId: '<YOUR_PUBLIC_KEY_ID>',
publicSecret: '<YOUR_PUBLIC_KEY_ID>',
});
voxie.capture('+15551231234', {
firstName: 'John',
lastName: 'Doe',
email: '[email protected]',
timeZone: 'America/Los_Angeles',
// tags and custom attribute keys must be lowercase
tags: ['purchased', 'online'],
customAttributes: {
last_purchase_sku: 'vxe123',
last_product_viewed_sku: 'vxe456',
},
});