> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hacktionbase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Add the Hacktionbase SDK to your website.

## Script tag (recommended)

Add the SDK script to your HTML. It loads asynchronously and won't block page rendering.

```html theme={null}
<script>
  (function(w, d, s) {
    var js = d.createElement(s);
    js.src = 'https://s3.eu-west-3.amazonaws.com/hacktionbase.sdk/latest/hacktionbase.js';
    js.async = 1;
    js.onload = function() {
      Hacktionbase.init({
        sdkKey: 'YOUR_SDK_KEY',
        tenant: 'YOUR_TENANT_SLUG'
      });
    };
    d.head.appendChild(js);
  })(window, document, 'script');
</script>
```

The SDK is distributed as a single IIFE bundle — no npm package or build step required.

## Configuration options

The `init` method accepts a configuration object:

| Parameter     | Type                              | Required | Default            | Description                         |
| ------------- | --------------------------------- | -------- | ------------------ | ----------------------------------- |
| `sdkKey`      | `string`                          | Yes      | —                  | Your SDK key from the dashboard     |
| `tenant`      | `string`                          | Yes      | —                  | Your tenant slug (subdomain)        |
| `position`    | `'bottom-right' \| 'bottom-left'` | No       | `'bottom-right'`   | Widget bubble position              |
| `offset`      | `{ x: number, y: number }`        | No       | `{ x: 20, y: 20 }` | Pixel offset from the corner        |
| `hidden`      | `boolean`                         | No       | `false`            | Start with the widget bubble hidden |
| `environment` | `'prod' \| 'staging'`             | No       | `'prod'`           | Environment tag for events          |

## What happens on init

1. The SDK fetches your widget configuration from the API
2. A chat bubble is rendered in the corner of the page
3. An iframe is created (hidden) to host the widget UI
4. Automatic page view tracking starts
5. Session replay starts in buffer mode (if enabled in your settings)

<Note>
  If the SDK key is invalid or the API is unreachable, the widget will not mount and a warning is logged to the console.
</Note>

## Single Page Applications

The SDK automatically tracks page navigations in SPAs by intercepting `pushState` and `replaceState`. No additional configuration is needed for React, Vue, Angular, or other SPA frameworks.