Getting Started

This section will guide you through installing the Kalapa CMP SDK in your application or website.

Installation

You can install the SDK using one of the following methods:

1. Install via NPM.

   npm

   npm i kalapa-cmp-sdk@1.0.27

   pnpm

   pnpm add kalapa-cmp-sdk@1.0.27

   yarn

   yarn add kalapa-cmp-sdk@1.0.27

2. Use the version hosted on 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. Use the version hosted on Kalapa's server.

   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

Usage

Here are some common setups to help you get started.

• HTML
• React
• Vue
• Angular

HTML

Install and configure 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({
  // your configuration here
});

React

Import the SDK into your root/App component and set up the configuration inside the useEffect hook:

import { useEffect } from "react";

import KalapaCMPSDK from "kalapa-cmp-sdk";

export default function App() {

    useEffect(() => {
        const KalapaCMPSDK = new KalapaCMPSDK({
          // your configuration here
        });
    }, []);

    // ...
}

Vue

Create a Vue plugin: KalapaCMPSDKVue.js:

import KalapaCMPSDK from "kalapa-cmp-sdk";

export default {
  install: (app, pluginConfig) => {
    app.config.globalProperties.$KalapaCMPSDK = new KalapaCMPSDK({
      // your configuration here
    });
  },
};

INFO

The newly created Vue plugin allows you to access the Kalapa CMP SDK from any component using this.$KalapaCMPSDK or $KalapaCMPSDK.

"Register" the plugin in your root component/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, {
      // your configuration here
    })
    .mount('#app');

Angular

Import the SDK into your Angular component (typically 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({
            // your configuration here
        });
    }
}

Finally, configure the SDK

Configuration

The complete configuration requires two fields to be set up correctly:

• credentials
• options

Example

/**
 * Full configuration can be found here
 * 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: "en",
    forceConsent: true,
    darkMode: false,
  },
});

For the full configuration reference, see Configuration

If you encounter issues during installation, check out examples on the Playground