> For the complete documentation index, see [llms.txt](https://docs.cspr.click/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cspr.click/cspr.click-sdk/integration/download-and-initialize.md).
# Downloading and initializing the SDK
This page explains how to download the CSPR.click runtime library and provide the initialization options it needs to start. These steps are the same for any browser application, whether it is built with React, another framework, or plain JavaScript.
React applications can use the [React Context Provider](/cspr.click-sdk/integration/react-context-provider.md) to wrap this setup in a provider component. Use the lower-level setup below when you want to control the runtime loading yourself.
## Add a container for CSPR.click UI
Add a container element where CSPR.click can render the top bar and modal windows. The `id` must match the `uiContainer` value used during initialization.
```html
```
The `rootAppElement` option should point to the root element of your application. CSPR.click uses it when displaying modal windows and pop-ups.
A `csprclick-ui-wrapper` div is normally used with fixed-with layouts to center the top bar and display an homogeneous background color.
## Define the initialization options
Define the UI and SDK options before downloading the runtime script. The CDN library reads `window.clickUIOptions` and `window.clickSDKOptions` when it starts.
```typescript
import type { ClickUIOptions } from '@make-software/csprclick-core-types/clickui';
import type { CsprClickInitOptions } from '@make-software/csprclick-core-types';
import { CONTENT_MODE, WALLET_KEYS } from '@make-software/csprclick-core-types';
declare global {
interface Window {
clickUIOptions: ClickUIOptions;
clickSDKOptions: CsprClickInitOptions;
}
}
const clickUIOptions: ClickUIOptions = {
uiContainer: 'csprclick-ui',
rootAppElement: '#root',
defaultTheme: 'light',
accountMenuItems: [
'AccountCardMenuItem',
'CopyHashMenuItem',
'BuyCSPRMenuItem',
],
};
window.clickUIOptions = clickUIOptions;
const clickSDKOptions: CsprClickInitOptions = {
appName: 'CSPR.click demo',
appId: 'csprclick-template',
contentMode: CONTENT_MODE.IFRAME,
providers: [
WALLET_KEYS.CASPER_WALLET,
WALLET_KEYS.LEDGER,
WALLET_KEYS.METAMASK_SNAP,
],
};
window.clickSDKOptions = clickSDKOptions;
```
{% hint style="info" %}
You can use the default `csprclick-template` application identifier while working locally. Before publishing your application, create and configure your own application id.
{% endhint %}
Read more about the available options in the [Types](/cspr.click-sdk/reference/types.md#csprclickinitoptions) and [Properties](/cspr.click-sdk/reference/properties.md) reference pages.
## Download the runtime library
After the initialization options are available on `window`, add the CSPR.click CDN script to the page.
```typescript
if (!document.querySelector('script#csprclick-client')) {
const script = document.createElement('script');
script.src = 'https://cdn.cspr.click/ui/v2.1.0/csprclick-client-2.1.0.js';
script.id = 'csprclick-client';
script.async = true;
document.head.appendChild(script);
}
```
CSPR.click emits the `csprclick:loaded` browser event after the runtime has loaded and initialized. Use that event when your application needs to run code only after the SDK is ready.
```typescript
window.addEventListener('csprclick:loaded', () => {
console.log('CSPR.click SDK loaded');
});
```
## What's next
Once the SDK is loaded, your application can listen to CSPR.click events, connect wallets, request transaction approvals, and customize the top bar.
* [Handling events](/cspr.click-sdk/integration/handling-events.md)
* [Connecting a wallet](/cspr.click-sdk/integration/connecting-a-wallet.md)
* [Signing transactions](/cspr.click-sdk/integration/signing-transactions.md)
* [Customizing the top bar](/cspr.click-sdk/integration/customizing-the-top-bar.md)