# Web: JavaScript SDK

JavaScript SDK 브라우저 환경에서 사용할 수 있는 SDK(Software Development Kit)입니다. 이 문서는 위핀 위젯을 Javascript SDK를 이용하여 WEB에 통합하기 위한 절차를 설명합니다.

#### 패키지 리스트 <a href="#package-list" id="package-list"></a>

* [sdk](https://docs.wepin.io/widget-integration/web-javascript-sdk/widget): @wepin/sdk-js
  * 위핀 위젯을 사용하기 위한 기능을 제공합니다.
* [login](https://docs.wepin.io/widget-integration/web-javascript-sdk/login-library): @wepin/login-js
  * 소셜 로그인과 같은 OAuth 인증 토큰으로 위핀에 로그인하는 기능을 제공합니다.
* [provider](https://docs.wepin.io/widget-integration/web-javascript-sdk/provider): @wepin/provider-js, @wepin/wagmi-connector
  * 이더리움 및 EVM, 솔라나 등 위핀에서 지원하는 블록체인과 상호작용하기 위한 프로바이더를 제공합니다.

{% hint style="danger" %}
&#x20;Wepin 패키지는 모두 **클라이언트 사이드 렌더링(CSR: Client Side Rendering)** 환경에서만 동작합니다. 서버 사이드 렌더링(SSR: Server Side Rendering) 환경에서 이 패키지를 사용할 경우, CSR에서만 패키지를 불러올 수 있도록 설정이 필요합니다.

아래 코드를 참고하여 설정하세요:

```javascript
const initWepin = async () => {
    const { WepinSDK } = await import('@wepin/sdk-js');
    const wepinSDK = new WepinSDK({
        appKey: '',
        appId: '',
    });
    await wepinSDK.init();
}
```

{% endhint %}


---

# 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.wepin.io/widget-integration/web-javascript-sdk.md?ask=<question>
```

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.