{"id":20361,"date":"2020-05-09T22:41:19","date_gmt":"2020-05-09T22:41:19","guid":{"rendered":"http:\/\/refiner.io\/documentation\/?post_type=knowledgebase&#038;p=20361"},"modified":"2025-09-08T13:23:14","modified_gmt":"2025-09-08T13:23:14","slug":"npm-package","status":"publish","type":"knowledgebase","link":"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/","title":{"rendered":"Install Refiner with NPM"},"content":{"rendered":"\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Our official <a href=\"https:\/\/www.npmjs.com\/package\/refiner-js\" target=\"_blank\" rel=\"noreferrer noopener\">NPM package<\/a> provides a simple way to install the Refiner client in your JavaScript application.<\/p>\n\n\n\n<p>The package loads our <a href=\"https:\/\/refiner.io\/docs\/kb\/javascript-client\/reference\/\">JavaScript SDK<\/a> into your project and exposes an object that wraps all client methods.<\/p>\n\n\n\n<p>The repository includes <a href=\"https:\/\/github.com\/refiner-io\/js-client-npm\/tree\/master\/examples\" target=\"_blank\" rel=\"noreferrer noopener\">sample implementations<\/a> for Next.js and Vue.js frameworks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Install NPM package<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install refiner-js<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Initialize client<\/h2>\n\n\n\n<p>Depending on the framework you are using, different methods for loading the client are available. <\/p>\n\n\n\n<p>If you are using Next.js or Vue.js, you can find <a href=\"https:\/\/github.com\/refiner-io\/js-client-npm\/tree\/master\/examples\" target=\"_blank\" rel=\"noreferrer noopener\">sample implementations<\/a> in the package repository.<\/p>\n\n\n\n<p>For most client side JavaScript frameworks, you can load and initialize the Refiner client like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import _refiner from 'refiner-js';\n\n_refiner('setProject', 'REFINER_PROJECT_ID');<\/pre>\n\n\n\n<p>Please make sure to replace the static value \u2018REFINER_PROJECT_ID\u2019 with your project ID. You can find your project ID in the your Refiner dashboard under &#8220;Settings &gt; Installation&#8221;. In case you are connected to your Refiner dashboard right now, the code snippet above should already include your project ID.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vue.js<\/h3>\n\n\n\n<p>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:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import _refiner from 'refiner-js';\n\nexport default {\n    name: 'YourVueComponent',\n    props: [],\n    components: {},\n    created() {\n        _refiner('setProject', 'REFINER_PROJECT_ID');\n    },\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Next.js<\/h3>\n\n\n\n<p>When using the Next.js framework with Server Side Rendering (SSR), please make sure that the package is loaded dynamically during runtime. This is necessary because the Refiner client relies on the &#8220;window&#8221; object, which is not available yet during server side rendering.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import dynamic from 'next\/dynamic'\n\nconst _refiner = dynamic(() => import('refiner-js'), { ssr: false });\n\n_refiner('setProject', 'REFINER_PROJECT_ID');<\/pre>\n\n\n\n<p>To read more about this method of loading client side libraries, please refer to the <a href=\"https:\/\/nextjs.org\/docs\/app\/guides\/mdx#using-dynamic-imports\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js documentation.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"identify\">Identify users <\/h2>\n\n\n\n<p>Refiner unleashes its full power when you identify your users and we highly recommend that you take the time to set up user identification.<\/p>\n\n\n\n<p><a href=\"https:\/\/refiner.io\/docs\/kb\/javascript-client\/anonymous-vs-identified-users-mode\/\">Identifying users<\/a> allows you to better target specific accounts, sync survey responses with your user data, trigger user specific automations etc.<\/p>\n\n\n\n<p>Identifying a user is easy with our JavaScript SDK. All you need to do is to call a identifyUser method once the SDK was loaded.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">_refiner('identifyUser', {\n  id: 'USER-ID-ABC-123', \/\/ Each user needs an ID or email address\n  email: 'jane@awesome.com', \/\/ Each user needs an ID or email address\n  name: 'Jane Doe', \/\/ The full name of the user\n});<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">All client methods<\/h2>\n\n\n\n<p>Once your NPM package installation is working, it&#8217;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&nbsp;<a href=\"https:\/\/refiner.io\/docs\/kb\/integrations\/javascript-integration\/\">Client Reference<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Our official NPM package provides a simple way to install the Refiner client in your JavaScript application. The package loads our JavaScript SDK 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 [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","template":"","knowledgebase_tag":[],"class_list":["post-20361","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-install-client"],"acf":[],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","ab-block-post-grid-landscape":"","ab-block-post-grid-square":"","gb-block-post-grid-landscape":"","gb-block-post-grid-square":""},"post_excerpt_stackable_v2":"<p>Introduction Our official NPM package provides a simple way to install the Refiner client in your JavaScript application. The package loads our JavaScript SDK 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&hellip;<\/p>\n","category_list_v2":"","author_info_v2":{"name":"Moritz Dausinger","url":"https:\/\/refiner.io\/docs\/author\/user\/"},"comments_num_v2":"0 comments","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Install Refiner with NPM<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Install Refiner with NPM\" \/>\n<meta property=\"og:description\" content=\"Introduction Our official NPM package provides a simple way to install the Refiner client in your JavaScript application. The package loads our JavaScript SDK 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 [...]Read More...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/\" \/>\n<meta property=\"og:site_name\" content=\"Refiner Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-08T13:23:14+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/\",\"url\":\"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/\",\"name\":\"Install Refiner with NPM\",\"isPartOf\":{\"@id\":\"https:\/\/refiner.io\/docs\/#website\"},\"datePublished\":\"2020-05-09T22:41:19+00:00\",\"dateModified\":\"2025-09-08T13:23:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/refiner.io\/docs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Install Refiner with NPM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/refiner.io\/docs\/#website\",\"url\":\"https:\/\/refiner.io\/docs\/\",\"name\":\"Refiner Documentation\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/refiner.io\/docs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/refiner.io\/docs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/refiner.io\/docs\/#organization\",\"name\":\"Refiner Documentation\",\"url\":\"https:\/\/refiner.io\/docs\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png\",\"contentUrl\":\"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png\",\"width\":400,\"height\":61,\"caption\":\"Refiner Documentation\"},\"image\":{\"@id\":\"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Install Refiner with NPM","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/","og_locale":"en_US","og_type":"article","og_title":"Install Refiner with NPM","og_description":"Introduction Our official NPM package provides a simple way to install the Refiner client in your JavaScript application. The package loads our JavaScript SDK 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 [...]Read More...","og_url":"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/","og_site_name":"Refiner Documentation","article_modified_time":"2025-09-08T13:23:14+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/","url":"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/","name":"Install Refiner with NPM","isPartOf":{"@id":"https:\/\/refiner.io\/docs\/#website"},"datePublished":"2020-05-09T22:41:19+00:00","dateModified":"2025-09-08T13:23:14+00:00","breadcrumb":{"@id":"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/refiner.io\/docs\/kb\/install-client\/npm-package\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/refiner.io\/docs\/"},{"@type":"ListItem","position":2,"name":"Install Refiner with NPM"}]},{"@type":"WebSite","@id":"https:\/\/refiner.io\/docs\/#website","url":"https:\/\/refiner.io\/docs\/","name":"Refiner Documentation","description":"","publisher":{"@id":"https:\/\/refiner.io\/docs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/refiner.io\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/refiner.io\/docs\/#organization","name":"Refiner Documentation","url":"https:\/\/refiner.io\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png","contentUrl":"https:\/\/refiner.io\/docs\/wp-content\/uploads\/2022\/11\/cropped-Group-8.png","width":400,"height":61,"caption":"Refiner Documentation"},"image":{"@id":"https:\/\/refiner.io\/docs\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/20361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/comments?post=20361"}],"version-history":[{"count":36,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/20361\/revisions"}],"predecessor-version":[{"id":27561,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase\/20361\/revisions\/27561"}],"wp:attachment":[{"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/media?parent=20361"}],"wp:term":[{"taxonomy":"knowledgebase_tag","embeddable":true,"href":"https:\/\/refiner.io\/docs\/wp-json\/wp\/v2\/knowledgebase_tag?post=20361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}