Bắt đầu

Phần này sẽ hướng dẫn bạn cài đặt Kalapa CMP SDK trong ứng dụng hoặc website của bạn.

Cài đặt

Bạn có thể cài đặt SDK bằng một trong các phương pháp sau:

1. Cài đặt qua NPM.

   npm

   npm i kalapa-cmp-sdk@1.0.27

   pnpm

   pnpm add kalapa-cmp-sdk1.0.27

   yarn

   yarn add kalapa-cmp-sdk1.0.27

2. Dùng phiên bản được host trên CDN.

   ESM:

   https://cdn.jsdelivr.net/npm/kalapa-cmp-sdk@1.0.27/dist/kalapa-cmp-sdk.min.js

   UMD:

   https://cdn.jsdelivr.net/npm/kalapa-cmp-sdk@1.0.27/dist/kalapa-cmp-sdk.und.min.js

3. Dùng phiên bản được host trên server Kalapa.

   ESM:

   https://sdk.cmp.kalapa.vn/kalapa-cmp-sdk-v1.0.27.js

   UMD:

   https://sdk.cmp.kalapa.vn/kalapa-cmp-sdk-v1.0.27.umd.js

Sử dụng

Đây là một số cài đặt phổ biến nhất để giúp bạn bắt đầu.

• HTML
• React
• Vue
• Angular

HTML

Cài đặt và cấu hình the SDK:

<script src="https://cdn.jsdelivr.net/npm/kalapa-cmp-sdk@1.0.13/dist/kalapa-cmp-sdk.und.min.js"></script>

const KalapaCMPSDK = new window.KalapaCMPSDK({
  // cấu hình của bạn ở đây
});

React

Import SDK vào component root/App của bạn và đặt cấu hình nó trong useEffect hook:

import { useEffect } from "react";

import KalapaCMPSDK from "kalapa-cmp-sdk";

export default function App() {

    useEffect(() => {
        const KalapaCMPSDK = new KalapaCMPSDK({
          // cấu hình của bạn ở đây
        });
    }, []);

    // ...
}

Vue

Tạo một Vue plugin: KalapaCMPSDKVue.js:

import KalapaCMPSDK from "kalapa-cmp-sdk";

export default {
  install: (app, pluginConfig) => {
    app.config.globalProperties.$KalapaCMPSDK = new KalapaCMPSDK({
      // cấu hình của bạn ở đây
    });
  },
};

INFO

Plugin Vue mới được tạo sẽ cho phép bạn truy cập Kalapa CMP SDK từ bất kỳ component nào, bằng cách sử dụng this.$KalapaCMPSDK hoặc $KalapaCMPSDK.

"Đăng ký" plugin trong component root/APP của bạn, bên trong main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import KalapaCMPSDKVue from 'path-to-KalapaCMPSDKVue.js'

createApp(App)
    .use(router),
    .use(KalapaCMPSDKVue, {
      // cấu hình của bạn ở đây
    })
    .mount('#app');

Angular

Import SDK vào component Angular của bạn (thường là app.component.ts):

import { Component, AfterViewInit } from '@angular/core';
import KalapaCMPSDK from "kalapa-cmp-sdk";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit{
    title = 'angular-javascript-demo';

    ngAfterViewInit(): void{
         const KalapaCMPSDK = new KalapaCMPSDK({
            // Cấu hình của bạn ở đây
        });
    }
}

Cuối cùng, cấu hình SDK

Cấu hình

Toàn bộ cấu hình, cần 2 trường này được cấu hình đúng cách

• credentials
• options

Example

/**
 * Toàn bộ cấu hình có ở đây
 * https://docs.cmp.kalapa.vn/web/config/full.html
 */
new KalapaCMPSDK({
  credentials: {
    url: "provided-url",
    key: "provided-key",
    trackingId: "your-customer-tracking-id",
  },
  options: {
    guiOptions: {
      consentModal: {
        layout: "cloud",
        position: "bottom center",
      },
      preferencesModal: {
        layout: "box",
      },
    },
    language: "vi",
    forceConsent: true,
    darkMode: false,
  },
});

Toàn bộ cấu hình có thể tham khảo ở Cấu hình

Nếu có vấn đề trong quá trình cài đặt, bạn có thể xem qua ví dụ ở Playground