# Installation

## To install using Package Manager

Wepin Widget Javascript SDK can be installed an an npm package.&#x20;

{% hint style="info" %}
This package can only be used in web environment. It cannot be used in Android or iOS hybrid apps (Webview).
{% endhint %}

Enter the following <mark style="color:blue;">`npm install`</mark> command in the terminal.

```shell
npm install @wepin/widget-sdk
```

Once the installation is complete, you can confirm that it has been added to the "dependencies" section in the package.json file.

```json
{
  "name": "wepin-widget-test-app",
  "version": "1.0.0",
  "description": "Wepin Widge Test App"
  "main": "app.js",
  "author": "honggildong@test.wepin.io",
  "dependencies": {
    "@wepin/widget-sdk": "^1.0.0"
  }
}
```

Once the installation is complete, you can prepare to use Wepin by inserting your App ID and App Key and calling the init function as shown below.

<pre class="language-javascript"><code class="lang-javascript"><strong>// 1. import SDK
</strong><strong>import '@wepin/widget-sdk'
</strong><strong>const testAppKey = 'ak_test_ghq1D5s1sfG234sbnhdsw24mnovk313' // Test App Key
</strong>const testAppId = 'app_id_eg12sf3491azgs520' // Test App ID
// 2. Initialize
const Wepin = window.Wepin
const wepin = await Wepin.init( 
  testAppId,
  testAppKey  
)
</code></pre>

## To install using `<script>` Tag&#x20;

Add the JavaScript file to the HTML page where you want to integrate the Wepin widget.

Once the script is loaded, a <mark style="color:blue;">`Wepin`</mark> object is created in the global object (window), and you can use this object to proceed with initialization.

```html
<head>
  <title>Connect WEPIN<title>
  <!-- 1. Add Script -->
  <script src="https://cdn.jsdelivr.net/npm/@wepin/widget-sdk@1.0.0/dist/wepin-widget-sdk.min.js" defer async></script>
</head>
<script>
  const testAppKey = 'ak_test_ghq1D5s1sfG234sbnhdsw24mnovk313' // Test App Key 
  const testAppId = 'app_id_eg12sf3491azgs520' // Test App ID
  // 2. Initialize
  const wepin = await Wepin.init( 
    testAppId,
    testAppKey
  )
</script>
```


---

# 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/en/deprecated/web-javascript-sdk/sdk/installation.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.
