<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',
  },
});

FAQs

What is @voxie/contacts.js?

Is @voxie/contacts.js popular?

Is @voxie/contacts.js well maintained?

Last updated on 15 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@voxie/contacts.js

contacts.js

Quick Start

Vanilla DOM

React

Vue 3

Installing via package manager

Related posts

Introducing SSO

tea.xyz Spam Plagues npm and RubyGems Package Registries