# Install
## Authentication
Each customer of Spindl needs their own SDK Key to use the SDK. If you don't already have an SDK key, you can generate one on the [Settings](https://app.spindl.xyz/settings) page in the Spindl app.
## Installation via NPM/Yarn
The Spindl SDK is a lightweight npm package. You can install it below. Also here is the npm
* For differences between Default & Lite versions, you can check our [Default vs Lite SDK Versions](/spindl/techncial/javascript-sdk-html-script-guide/default-vs-lite-sdk-versions.md) section
{% tabs %}
{% tab title="Default\*" %}
```bash
npm install @spindl-xyz/attribution
yarn add @spindl-xyz/attribution
```
{% endtab %}
{% tab title="Lite\*" %}
npm install @spindl-xyz/attribution-lite
yarn add @spindl-xyz/attribution-lite
{% endtab %}
{% endtabs %}
*\*Unsure of whether to use \`Default\` or `Lite`? The vast majority of clients use `default` but feel free to read more about the differences* [*here*](/spindl/techncial/javascript-sdk-html-script-guide/default-vs-lite-sdk-versions.md)*.*
#### Initialization via library
The Spindl SDK only needs to be configured once in a browser or Node session.
* If you're using Next.js, in page router, you can do this in `pages/_app.tsx`
* If using app router, you need to implement it in a client side component
* For example on how to implement in either one, checkout our [examples repo.](https://github.com/spindl-xyz/sdk-examples/tree/main)
{% tabs %}
{% tab title="Default" %}
import spindl from "@spindl-xyz/attribution";
spindl.configure({
sdkKey: "<your SDK API key here>",
debugMode: true/false, // we recommend only to have debugMode=true when testing.
// you will see console.logs of emitted events in browser
});
{% endtab %}
{% tab title="Lite" %}
```typescript
import spindl from "@spindl-xyz/attribution-lite";
spindl.configure({
sdkKey: "",
debugMode: true/false, // we recommend only to have debugMode=true when testing.
// you will see console.logs of emitted events in browser
});
```
{% endtab %}
{% tab title="HTML Script" %}
```javascript
window.spindl.configure({
sdkKey: "",
debugMode: true/false, // we recommend only to have debugMode=true when testing.
// you will see console.logs of emitted events in browser
});
```
{% endtab %}
{% endtabs %}
## Installation via Script/CDN
Add async script tag at the top of html file within `head` tag. Please make sure you to use your sdk key.
{% tabs %}
{% tab title="Default" %}
```html
...
```
{% endtab %}
{% tab title="Lite" %}
```typescript
...
```
{% endtab %}
{% endtabs %}
#### Initialization via Script
Script automatically is instantiated and will track page view events & wallet connect events so you don't need to do anything
You will still be able to fire custom "Wallet Connects" & "Page Views" if you want by accessing spindl via window object. Example:
* For example on how to implement, checkout our [examples repo.](https://github.com/spindl-xyz/sdk-examples/tree/main)
```html
```
---
# Agent Instructions: 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.spindl.xyz/spindl/techncial/javascript-sdk-html-script-guide/install.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.