# Ingest users from websites ## Learn how to ingest users from your websites and web apps. Collecting data directly from your websites and web apps lets you build accurate, real-time customer profiles from every user interaction. Use the Krenalis JavaScript SDK to automatically capture, map, and unify this data across all your systems. ## Prerequisites Before getting started, make sure you have everything you need: * Access to the website pages you want to connect with Krenalis. * The ability to edit those pages or web application so you can integrate the Krenalis JavaScript SDK. ## Steps ### 1. Connect a website Create a source connection to start tracking user data from your site. This connection links your web pages to Krenalis. 1. Go to the **Sources** page of your Krenalis workspace. 2. Click on **Add a new source ⊕** and click on the **JavaScript** card. 3. Click on **Add source...**. 4. Optionally rename the connection. 5. Click **Add** to confirm. The connection you just created is a source connection. You can access it later by clicking **Sources** section in the sidebar. If you manage multiple websites that share the same user base (for example, through a unified login), it's preferable to create a single source connection for all of them. ### 2. Set up your website Choose **one of the following alternative methods** to integrate the SDK, depending on your project setup #### Snippet 💡 Use this method if your website doesn't use a build system and you can directly edit the HTML source. 1. In the new created JavaScript connection, copy the JavaScript snippet: [JavaScript snippet](https://www.krenalis.com/docs/ingest-users/images/javascript-snippet.png)! 2. Paste it into all pages of your website between `` and ``. 3. As a test, add the following code to one of your pages to collect user data and send it to Krenalis: ```html ``` 💡 For detailed SDK methods and configuration options, see the [JavaScript SDK](https://www.krenalis.com/docs/integrations/javascript-sdk.md). #### Import 💡 Use this method if your project uses ES6 modules or TypeScript and is bundled for the browser. The JavaScript SDK can be imported with `import` into TypeScript and JavaScript projects, using ES6 modules, that will be bundled to run in the browser. 1. In the new created JavaScript connection, navigate to **Settings**. 2. Click on **Event write keys**. 3. Copy the _event write key_ and the _endpoint_. 4. In your project, install the `krenalis-javascript-sdk` npm package: ```sh npm install krenalis-javascript-sdk --save ``` 5. Import and use the SDK, replacing `` and `` respectively with the previously copied _event write key_ and _endpoint_: ```javascript import Krenalis from 'krenalis-javascript-sdk'; const krenalis = new Krenalis('', ''); // As a test, collect user data and send it to Krenalis: krenalis.identify("703991475", { email: "emily.johnson@example.com", plan: "Enterprise", company: "Acme Corp", jobTitle: "Product Manager", country: "United States" }); ``` 💡 For detailed SDK methods and configuration options, see the [JavaScript SDK](https://www.krenalis.com/docs/integrations/javascript-sdk.md). #### Require 💡 Use this method if your project uses CommonJS modules and is bundled for the browser. The JavaScript SDK can be imported with `require` into JavaScript projects, using CommonJS modules, that will be bundled to run in the browser. 1. In the new created JavaScript connection, navigate to **Settings**. 2. Click on **Event write keys**. 3. Copy the event write key and the endpoint. 4. In your project, install the `krenalis-javascript-sdk` npm package: ```sh npm install krenalis-javascript-sdk --save ``` 5. Import and use the SDK, replacing `` and `` respectively with the previously copied event write key and Endpoint: ```javascript const { Krenalis } = require('krenalis-javascript-sdk'); const krenalis = new Krenalis('', ''); // As a test, collect user data and send it to Krenalis: krenalis.identify("703991475", { email: "emily.johnson@example.com", plan: "Enterprise", company: "Acme Corp", jobTitle: "Product Manager", country: "United States" }); ``` 💡 For detailed SDK methods and configuration options, see the [JavaScript SDK](/docs/integrations/javascript-sdk). ### 3. Debug the events 1. In the source JavaScript connection, click on the **Event debugger** tab: [Event debugger](/docs/ingest\-users/images/event\-debugger\.javascript\.png)! The **Event debugger** shows a sample of events currently received for the current connection. Use it whenever you need to quickly confirm that events are arriving as expected and to inspect their contents in real time. 2. Open your website page where you added the `identify` call, the event should appear almost immediately: [Event debugger](/docs/ingest\-users/images/event\-debugger\-identify\.javascript\.png)! If the event **does not appear** after a few seconds, open your browser's console, reload the page, and check that no errors occurred and that the event was successfully sent. 3. Click the collected event in the **Event debugger** list to view its JSON payload, which contains the data sent by the browser. The following example shows what a typical event payload looks like: ```json { "anonymousId": "b27c5d9f-92a7-4d30-b21a-4df21a6872c2", "context": { "browser": { "name": "Safari", "version": "17.2.1" }, "ip": "172.91.24.57", "library": { "name": "krenalis.js", "version": "1.0.0" }, "locale": "en-US", "os": { "name": "macOS", "version": "14.5" }, "page": { "path": "/dashboard", "title": "User Dashboard", "url": "https://app.example.com/dashboard" }, "screen": { "width": 3024, "height": 1964, "density": 2 }, "session": { "id": "1766272512048" }, "timezone": "America/Los_Angeles", "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15" }, "messageId": "f9189a52-b37b-4d7d-9f2d-08b91d85fa9c", "receivedAt": "2025-10-20T16:15:24.340Z", "sentAt": "2025-10-20T16:15:24.327Z", "originalTimestamp": "2025-10-20T16:15:23.992Z", "timestamp": "2025-10-20T16:15:24.010Z", "traits": { "email": "emily.johnson@example.com", "plan": "Enterprise", "company": "Acme Corp", "jobTitle": "Product Manager", "country": "United States" }, "type": "identify", "userId": "703991475" } ``` 💡 You can read the [Event spec](/docs/collect-events/spec) for full details on the schema of an event after it has been received by Krenalis. ### 4. Add a pipeline to import user data 1. Click on the **Pipelines** tab of the connection for JavaScript. 2. Next to the **Import users into warehouse** pipeline, click **Add pipeline...**. [Import users into warehouse](/docs/ingest\-users/images/import\-users\-into\-warehouse\.javascript\.png)! ### 5. Filter events The filter selects which users to import based on the collected events: [Filter events](/docs/ingest\-users/images/filter\-users\-via\-events\.png)! It is preset to import user data only if the event is of type `identify`—with or without traits—or if it is not an `identify` event but includes traits. For now, you can leave it as configured. It's recommended to adjust this filter only after you've gained experience with event handling. ### 6. Transformation The **Transformation** section lets you populate your Customer Model properties using user traits from collected events. You can choose between a **Visual Mapping interface** or **advanced transformations** written in JavaScript or Python. You have full control over which properties to map—assign only those relevant to your business context and leave others unassigned when no matching values are available. [Visual Mapping](/docs/ingest\-users/images/user\-via\-event\-visual\-mapping\.png)! For complete details on how transformations work for harmonization, see how to [harmonize data](harmonization). ### 7. Save your changes When you're done, click **Add** (or **Save** if you're editing an existing pipeline). ## Pipelines Once saved, the new pipeline appears in the pipelines list for JavaScript. From here, you can monitor imports, adjust filters, and manage transformations. Each pipeline defines how and when users flow websites into your warehouse. [Pipeline to import user data](/docs/ingest\-users/images/pipelines\.javascript\.png)! | Column | Description | |--------------|---------------------------------------------------------------------------------------------| | **Pipeline** | Name and description of the pipeline. | | **Filters** | Conditions that determines which events are processed. If not set, all events are included. | | **Enable** | Switch to activate or deactivate the pipeline. When disabled, no events are processed. | | **Manage** | Edit settings such as filter and transformation. | | **⋮ (More)** | Additional options, such as deleting the pipeline. | ## Continue reading ### Process ingested users - [Profile Unification](/docs/profile-unification). Detect and merge duplicate profiles to build a single, reliable customer record. - [Views and tables](/docs/views-and-tables). Access and analyze your profiles directly in your data warehouse. - [Activate user profiles](/docs/activate-profiles). Activate your customer profiles on Apps, databases, and files.