설치

패키지 매니저로 설치하기

Wepin Widget Javascript SDK를 npm 패키지로 설치 가능합니다.

해당 패키지는 웹 환경에서만 사용 가능합니다. Android, iOS 하이브리드 앱(Webview)에서는 사용할 수 없습니다.

터미널에서 아래와 같이 npm install 명령어를 입력합니다.

npm install @wepin/widget-sdk

설치가 완료되면 package.json에서 아래와 "dependencies"에 추가된 것을 확인할 수 있습니다.

{
  "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"
  }
}

설치가 완료되면 아래와 같이 앱 ID와 앱 키를 넣고 init함수를 호출하면 wepin을 사용할 준비가 완료됩니다.

// 1. 패키지 import
import '@wepin/widget-sdk'
const testAppKey = 'ak_test_ghq1D5s1sfG234sbnhdsw24mnovk313' // 테스트용 앱 키 
const testAppId = 'app_id_eg12sf3491azgs520' // 테스트용 앱 ID
// 2. 초기화
const Wepin = window?.Wepin
const wepin = await Wepin.init( 
  testAppId,
  testAppKey  
)

<script> 태그로 설치하기

위핀 위젯을 연동할 HTML 페이지에 Javascript 파일을 추가 합니다.

스크립트 로드가 완료되면 전역 객체(window)에 Wepin이 생성 되고, 이 객체를 이용해서 초기화를 진행할 수 있습니다.

<head>
  <title>위핀 연결 하기<title>
  <!-- 1. 스크립트 추가 -->
  <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' // 테스트용 앱 키 
  const testAppId = 'app_id_eg12sf3491azgs520' // 테스트용 앱 ID
  // 2. 초기화
  const wepin = await Wepin.init( 
    testAppId,
    testAppKey
  )
</script>

Last updated