# Basic Intempt Installation # Installation Guide ## Overview When you implement Intempt, you add Intempt code to your website, app, or server. This code generates messages based on specific triggers you define. In a basic implementation, the code can be a snippet of JavaScript that you paste into the HTML of a website to track page views. It can also be as complex as a custom event tracked via a server-side library. The best way to understand how Intempt works is to see it in action. --- ## Before you begin Before starting your Intempt implementation, you need: - An Intempt account with an organization and project - Access to the code for a website or iOS app - Ability to install JavaScript or modify your codebase **Tip:** If you don’t have an existing site or app, consider creating a simple GitHub Pages website to get started quickly. --- ## Create separate development and production projects Intempt strongly recommends creating separate **dev** and **prod** projects to avoid polluting production data. Each project can be labeled by environment (e.g., "Production", "Development", "Staging") — this helps maintain clean data and isolate testing. --- # Step 1: Create a source & set up autocapture Autocapture is the fastest way to start collecting behavioral data in Intempt **without writing custom event code**. Once enabled, Intempt automatically listens to browser interactions and sends events **asynchronously** in the background — without blocking page load or affecting user experience. Autocapture is ideal for: - first-time installations - validating that data is flowing correctly - capturing baseline user behavior before adding custom events --- ## How autocapture works (async by default) The Intempt web snippet loads **asynchronously** and: - does **not** block HTML rendering - does **not** delay page load - runs continuously as users interact with the page - automatically adapts to UI changes (including SPAs and re-renders) All captured events are sent asynchronously to Intempt’s ingestion pipeline. You do **not** need to manage batching, flushing, or retries. --- ## What autocapture tracks automatically Once installed, Intempt automatically captures the following **browser-level events**. ### Page & Session Events - Page view - Page leave - Session start - Session end - Time spent on page - Previous page context These events are emitted internally as `intempt:page` and `intempt:session`. --- ### DOM Interaction Events - Clicks on elements - Input value changes - Form submissions - Focus and blur on input fields - Typing in: - `input` - `textarea` - `select` - Label interactions linked to form elements These interactions are emitted internally as `intempt:html`. --- ### Context Automatically Attached Each autocaptured event includes contextual metadata such as: - page URL - page title - screen and window dimensions - session identifier - timestamps - navigation context You do **not** need to send this data manually. --- ## To set up autocapture 1. Go to **Integrations → Sources** ![image.png](https://api.apidog.com/api/v1/projects/1137771/resources/367104/image-preview) 2. Click **Create Source** ![image.png](https://api.apidog.com/api/v1/projects/1137771/resources/367105/image-preview) 3. Select **Web** 4. Under **Installation**, copy the JavaScript snippet (script tags + initialization function) ![Screenshot 2026-01-28 142812 (2).png](https://api.apidog.com/api/v1/projects/1137771/resources/370839/image-preview) --- ## Replace the API key Replace `"YOUR_API_KEY"` in the snippet with the API key created in **Step 1**. --- ## Add the snippet to your website ![image.png](https://api.apidog.com/api/v1/projects/1137771/resources/370840/image-preview) - Paste the snippet inside the `` tag - Add it to your **base HTML template** so it loads on all pages Once added, autocapture starts immediately — no additional configuration required. All events automatically flow into Intempt. --- ## Autocapture limitations (important) Autocapture is intentionally **general-purpose**. It captures *everything*, but it does not understand **business meaning**. ### 1. High volume can create noisy data Autocapture records every interaction: - every click - every input change - every form interaction On high-traffic sites, this can overwhelm the Live Events view. This is expected behavior. --- ### 2. Autocapture ≠ product analytics Autocapture answers: > *“What did the user interact with?”* It does **not** answer: > *“What meaningful business action occurred?”* For actionable analytics, you should add **custom events** for: - onboarding completion - add to cart - checkout success - subscription upgrades - important page views - server-side actions (payments, syncs, state changes) Autocapture provides **context**. Custom events provide **meaning**. Both are designed to work together. --- ## Why this step matters This step ensures that: - your installation is working - sessions and pages are tracked correctly - data is flowing into Intempt - you can validate setup before deeper instrumentation Once autocapture is live, you are ready to move on to **custom events**. # Step 2: Set up custom events Custom events let you capture meaningful actions anywhere in your codebase — frontend, backend, or mobile. ### 1. Install the Web tracker (from previous section) Once installed, you can start logging custom events. ### 2. Add the tracking code to your codebase You can log a custom event using the `record` function: ```javascript const recordParams = { eventTitle: 'login', userId: 'john.doe@example.com', userAttributes: { loginMethod: 'OAuth', attemptCount: 3 }, data: { ipAddress: '192.168.1.1' } }; intempt.record(recordParams); ```` ### Example: Purchase event ```javascript const recordParams = { eventTitle: 'purchase', userId: 'john.doe@example.com', data: { items: [ { "item name": "item 1", "price": 20 }, { "item name": "item 2", "price": 15 } ], totalprice: 35, ispaid: true, timestamp: new Date().getTime(), name: "John Smith", age: 28, } }; intempt.record(recordParams); ``` ### Example: Signup event (frontend form data) ```javascript const btn = document.querySelector("#regBtn") btn.addEventListener("click", () => { const first_name = document.querySelector('input[name="customer[first_name]"]').value; const last_name = document.querySelector('input[name="customer[last_name]"]').value; const email = document.querySelector('input[name="customer[email]"]').value; const discount_card_number = document.querySelector('input[name="customer[note][DiscountCardNumber]"]').value; const recordParams = { eventTitle: 'signed_up', userId: 'john.doe@example.com', userAttributes: { first_name, last_name, email, discount_card_number, } }; intempt.record(recordParams); }, false) ``` --- # Getting custom events right Custom events require planning: 1. **Start with your product goals** What events matter? (e.g., checkout, onboarding, subscription) 2. **Ensure data is accessible** You may need helper functions or accessors. 3. **Send clean, consistent event structures** So you can use them in reports, actions, analytics. There are many places where you can refine event structure — naming, nesting, attributes, and consistency across pages and devices. --- # Step 3: Identify users Autocaptured events automatically associate session-level identifiers. Custom events require **manual identification**. ### Example: Identify with email ```javascript function loginRequest(user) { return authUser(user) .then(authorizedUser => { intempt.identify({ userId: user.email }) }) } ``` To track users across: * browsers * devices * mobile apps * logged-out → logged-in states Always set a **unique identifier** such as: * email * database user ID * phone number Identification allows Intempt to merge anonymous + known sessions. --- # Step 4: Create events (Event Editor) A single event might not describe a full behavior. ![image.png](https://api.apidog.com/api/v1/projects/1137771/resources/367102/image-preview) Example: A **signup** may include: * Clicking "signup" * Filling fields * Submitting form * Completing verification Defined events allow you to combine: * autocapture events * custom events * page views into a single **defined event** for cleaner analytics. Defined events also work **retroactively**, tagging past events automatically. --- # What’s next? Now that you’ve set up: * Autocapture * High-quality custom events * User identification * Defined events You will start seeing a stream of data in Intempt. Next steps: * Create reports * Explore dashboards * Build journeys * Personalize experiences * Trigger messages * Analyze product behavior * Explore template reports for inspiration This foundation now enables: * Behavioral analytics * Conversion funnels * Retention analysis * Segmentation * Personalization * Experimentation ---