Install Refiner with NPM

Introduction

Our official NPM package provides a simple way to install the Refiner client in your Javascript application.

The package injects the Refiner Web-client into your project and exposes an object that wraps all client methods.

The repository includes sample implementations for Next.js and Vue.js frameworks.

Install NPM package

Our NPM package is installed in the same way you would install other packages. Navigate to the source code folder of your project and execute the following NPM installation command.

npm install refiner-js

Initialize client

Depending on the framework you are using, different methods for loading the client are available.

If you are using Next.js or Vue.js, you can find sample implementations in the package repository.

For most client side Javascript frameworks, you can load and initialize the Refiner client like this:

import _refiner from 'refiner-js';

_refiner('setProject', 'REFINER_PROJECT_ID');

Please make sure to replace the static value ‘REFINER_PROJECT_ID’ with your project ID. You can find your project ID in the your Refiner dashboard under “Settings > Installation”. In case you are connected to your Refiner dashboard right now, the code snippet above should already include your project ID.

Vue.js

On frontend frameworks such as Vue.js, you can simply load the package like any other NPM package. In your Vue.js component, you can load the package and initialize the client for example like this:

import _refiner from 'refiner-js';

export default {
    name: 'YourVueComponent',
    props: [],
    components: {},
    created() {
        _refiner('setProject', 'REFINER_PROJECT_ID');
    },
}

Next.js with Server Side Rendering (SSR)

When using the Next.js framework, please make sure that the package is loaded dynamically during runtime. This is necessary because the Refiner client relies on the “window” object, which is not available e during server side rendering.

import dynamic from 'next/dynamic'

const _refiner = dynamic(() => import('refiner-js'), { ssr: false });

_refiner('setProject', 'REFINER_PROJECT_ID');

To read more about this method of loading client side libraries, please refer to the Next.js documentation.

Identify users

Refiner unleashes its full power when you identify your users and we highly recommend that you take the time to set up user identification.

Identifying users allows you to better target specific accounts, sync survey responses with your user data, trigger user specific automations etc.

Identifying a user is easy with our Javascript client. All you need to do is to call a identifyUser method once our Javasript client was loaded.

_refiner('identifyUser', {
  id: 'USER-ID-ABC-123', // Each user needs an ID or email address
  email: 'jane@awesome.com', // Each user needs an ID or email address
  name: 'Jane Doe', // The full name of the user
});

Client reference

Once your NPM package installation is working, it’s time to discover all options and methods that the Refiner client exposes for a seamless and deep integration with your SaaS application. You can continue exploring all options in our Client Reference.