@voxie/contacts.js NPM

contacts.js

Quick Start

Vanilla DOM

<head>
  <!-- inject contacts library inside head tag-->
  <script src="https://unpkg.com/@voxie/contacts.js@^1.1/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.js

import { 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: 'john.doe@example.com',
  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',
  },
});

@everything-registry/sub-chunk-992 @infinitebrahmanuniverse/nolb-_vox @zalastax/nolb-_vox

11 days ago

1 month ago

1 month ago

2 months ago

4 months ago