@survicate/survicate-web-surveys-wrapper

Survicate Web Surveys Wrapper

This package is a wrapper which allows you to install the Survicate tracking code and use API methods directly in your code. It's built on top of Preact using Typescript

Installation

npm install @survicate/survicate-web-surveys-wrapper --save

Initialization

Find your workspace key in the Survicate Panel.

Initialize Survicate using initSurvicate

Please note: initSurvicate is asynchronous, so the user has to await its resolution. This should be done once. Handling asynchronous code depends on the use case.

import { initSurvicate, getSurvicateInstance, ApiEvent } from '@survicate/survicate-web-surveys-wrapper/widget_wrapper';

  const config = { workspaceKey: 'workspace key' };

  await initSurvicate(config).then(() => {
    const survicate = getSurvicateInstance();
    survicate.addEventListener(ApiEvent.questionAnswered, () => console.log('questionAnswered'));
  })

To define user attributes on Survicate initialization, pass it to initSurvicate

const config = { workspaceKey: 'workspace key', traits: { name: 'John Doe', email: '[e-mail]'} };

await initSurvicate(config);

Examples:

Usage in React:

//Main component
import { getSurvicateInstance, initSurvicate } from '@survicate/survicate-web-surveys-wrapper/widget_wrapper';
import { Survicate } from '@survicate/survicate-web-surveys-wrapper';

function App() {
  const [survicate, setSurvicate] = useState<Survicate | null>(null);

  useEffect(() => {
    initSurvicate({ workspaceKey: 'workspace key' }).then(() => {
      setSurvicate(getSurvicateInstance());
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <ChildComponent survicate={ survicate }/>
      </header>
    </div>
  );
}

export default App;

//Child component
import { Survicate } from '@survicate/survicate-web-surveys-wrapper';
import { ApiEvent } from '@survicate/survicate-web-surveys-wrapper/widget_wrapper';

interface Props {
  survicate: Survicate | null;
}

export const ChildComponent = ({survicate}: Props ) => {

useEffect(() => {
  if (!survicate) {
    return
  }

  survicate.addEventListener(ApiEvent.questionAnswered, () => console.log('questionAnswered'))
}, [survicate])

  return (
    <div>
      <h1>ChildComponent</h1>
    </div>
  )
}

To call available methods:

import  { getSurvicateInstance , ApiEvent } from '@survicate/survicate-web-surveys-wrapper/widget_wrapper';

//Initialize survicate, then use:
const survicate = getSurvicateInstance();

// Set user attributes
survicate.setVisitorTraits({newName: 'newName', newEmail: 'newEmail'});

Please refer to the documentation for the rest of the methods.