> For the complete documentation index, see [llms.txt](https://docs.reo.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.reo.dev/install-javascript-using-npm-package.md).
# Install JavaScript using NPM Package
To install JavaScript code as an NPM package, follow the instructions below:
1. I**nstall the Package:** Open your terminal or command prompt.
```bash
npm i reodotdev
# or
yarn add reodotdev
```
2. **Integrate the Package into Your Project:** Within your project, identify the file or module where you want to incorporate the user activity tracking.
3. **Use with NPM:** Import the required function from the installed package and set up the script to load the Reo tracking.
#### **For Documentation**
Copy the below JavaScript code snippet
```javascript
// Use with NPM
import { loadReoScript } from 'reodotdev'
// Declare clientID from environment variable or directly as string
const clientID = process.env.CLIENT_ID || "XXXXXXXXXX";
// Resolve promise to get access to methods on Reo
const reoPromise = loadReoScript({ clientID });
reoPromise
.then(Reo => {
Reo.init({ clientID });
})
.catch(error => {
console.error('Error loading Reo', error);
})
```
Replace the Client ID XXXXXXXX in the above code with the client code in Integrations > Input Sources > Documentation
#### **For Website**
Copy the below JavaScript code snippet
```javascript
// Use with NPM
import { loadReoScript } from 'reodotdev'
// Declare clientID from environment variable or directly as string
const clientID = process.env.CLIENT_ID || "XXXXXXXXXX";
// Resolve promise to get access to methods on Reo
const reoPromise = loadReoScript({ clientID });
reoPromise
.then(Reo => {
Reo.init({ clientID });
})
.catch(error => {
console.error('Error loading Reo', error);
})
```
Replace the Client ID XXXXXXXX in the above code with the client code in Integrations > Input Sources > Website
4. **Adjust Environment Variables (if needed)**
If using environment variables, make sure to set them up in your environment configuration or `.env` files.
5. **Save Changes:**
Save the file containing the updated code.
6. **Build and Deploy:**
Compile or bundle your project based on your build process, and deploy the changes to your server or hosting service.
7. **Verification:**
8. Go to any screen after login and right-click anywhere
9. In the dropdown menu, select Inspect.
10. In the elements tab, Use the Ctrl + F or Cmd + F and search for “reo”
11. If the tracking code appears, verify that the **code matches.**
#### **For Cloud Product**
Copy the below JavaScript code snippet
```javascript
import { loadReoScript } from 'reodotdev'
// Declare clientID from environment variable or directly as string
const clientID = process.env.CLIENT_ID || "XXXXXXXXXX";
// Resolve promise to get access to methods on Reo
const reoPromise = loadReoScript({ clientID });
reoPromise
.then(Reo => {
Reo.init({ clientID });
})
```
Replace the Client ID XXXXXXXX in the above code with the client code in Integrations > Input Sources > Cloud Product
Invoke sign-in event - This is an essential step to track product logins. Sign-in flows can be in-house, using a 3rd party or IDP based. Hence we have exposed an event which needs to be invoked in the call-back of your successful sign-in with appropriate payload.
The **payload for sign-in needs to contain two mandatory attributes *****username***** and *****type*****.** Invoke **`identify` method to send sign-in details** which basically tells Reo who the user is and that they have logged in.
{% code overflow="wrap" %}
```javascript
//Prepare the payload post successful login.
const identity = {
"username": "johndoe83",
"type": "github", // can be one of email, github, linkedin
"other_identities": [
{
"username": "johndoe@microsoft.com",
"type": "email"
}
],
"firstname": "John",
"lastname": "Doe",
"company": "microsoft.com" // domain name
}
Reo && Reo.identify(identity);
```
{% endcode %}
In case of use with NPM, we need to resolve the promise before we can invoke `identify` method on it. Make sure to initialise the snippet using `Reo.init` before using `Reo.identify`
**Quick note:** By default, we track copy commands in your product environment. This is needed so that you can learn which of your logged in prospects (e.g. free users/ trial users) are showing high intent activities such as copy pasting code blocks or executing CLIs, which are a great proxy to learn their evaluation maturity and intent. We take multiple measures to ensure no sensitive information is captured or stored:
* A locally deployed AI model automatically identifies and skips sensitive information such as passwords, API keys, and card numbers, ensuring we skip as much of sensitive information as possible.
* Additionally, since the AI model can make mistakes, all captured data, including emails and copied text, is encrypted in our database. Decryption is handled via a tenant hash stored in a remote cloud vault, accessible only where applicableAll captured data, including emails and copied text, is encrypted in our database. Decryption is handled via a tenant hash stored in a remote cloud vault, accessible only where applicable.
To disable tracking for copy commands - use the `dnt` track flag. Copy the tracking code snippet below:
```javascript
import { loadReoScript } from 'reodotdev'
// Declare clientID from environment variable or directly as string
const clientID = process.env.CLIENT_ID || "XXXXXXXXXX";
// Resolve promise to get access to methods on Reo
const reoPromise = loadReoScript({ clientID });
reoPromise
.then(Reo => {
Reo.init({ clientID, dnt: ["copy"] });
})
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.reo.dev/install-javascript-using-npm-package.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.