Copy & Paste Code Snippet

Intro

To launch Refiner surveys in your web app or on your website, install the JavaScript SDK. You only need to do this once. On this page we show you how to install the code in your web application or website.

Code snippet for web applications

Paste this snippet into your HTML, right before the closing </body> tag to install Refiner JavaScript SDK in your web application.

<!-- Start of Refiner JavaScript SDK code -->
<script type="text/javascript">

window._refinerQueue = window._refinerQueue || []; function _refiner(){_refinerQueue.push(arguments);} (function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://js.refiner.io/v001/client.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

_refiner('setProject', 'YOUR-PROJECT-ID');

_refiner('identifyUser', {
    id: 'REPLACE-WITH-USER-ID', // Replace with your user ID
    email: 'jane@example.com', // Replace with user Email
    name: 'Jane Doe', // Replace with user name
    // Add more traits here, e.g. role, plan, signed_up_at, ...
});

</script>
<!-- End of Refiner client code snippet -->

Replace the placeholder values before you ship the snippet:

• YOUR-PROJECT-ID with the project ID from Settings > JavaScript SDK.
• REPLACE-WITH-USER-ID with a stable ID for the current user.
• jane@example.com and Jane Doe with that user’s email and name.

The code snippet calls identifyUser, so each response is attached to the signed-in user.

You can add any other data to identifyUser, such as role, plan, or signup date. The JavaScript SDK reference explains how user traits work.

You can also copy this snippet from your Refiner dashboard. Open Settings > JavaScript SDK and choose Logged-in users. The snippet there already includes your project ID.

Code snippet for websites

Paste this snippet in the same place. It is the web application snippet with the identifyUser call removed.

<!-- Start of Refiner JavaScript SDK code -->
<script type="text/javascript">

window._refinerQueue = window._refinerQueue || []; function _refiner(){_refinerQueue.push(arguments);} (function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://js.refiner.io/v001/client.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

_refiner('setProject', 'YOUR-PROJECT-ID');

</script>
<!-- End of Refiner client code snippet -->

Use this version when you do not know who the visitor is, for example on a public marketing website. Without identifyUser, responses are not attached to a user profile. Replace YOUR-PROJECT-ID with the project ID from your dashboard, and set the survey’s Audience Type to Website visitors.

Refiner works best when you identify your users. Identify & Track Users explains the differences between identified and anonymous responses.

All client methods

After the SDK is installed, you can call other methods from your app. For example, trackEvent records an action such as completing onboarding or upgrading a plan.

The JavaScript SDK reference lists every method.

Alternative installation methods

You can also install the JavaScript SDK with:

• The NPM package
• Google Tag Manager