Getting Started with the Chamaileon SDK

In order to use the Chamaileon SDK, you will need to include it in your project via a <script> tag, but shortly, we are going to publish it to npm as well.

<script src="https://plugins.chamaileon.io/static/chamaileonSdk.js"></script>

Prior to initialization, you must obtain an accessToken using your API key. To keep your API keys safe, we suggest fetching the accessToken from your backend, and pass only the token to the client side. The token validity is limited to three hours, however it is refreshed automatically if the session is alive.

Make sure you enable your domain in your API key's environment. Go to the SDK dashboard, select your entironment, go to the domains section.

const accessTokenRequest = await fetch("https://sdk-api.chamaileon.io/api/v1/tokens/generate", {
    method: "GET",
    headers: {
        "Authorization": `Bearer ${apiKey}`,
    },
});

const accessTokenResponse = await accessTokenRequest.json();
const accessToken = accessTokenResponse.result;

You can initialize the SDK by invoking the init function on the chamaileonSdk object:

const chamaileonPlugins = await window.chamaileonSdk.init({
    mode: "serverless",
    accessToken: accessToken,
    whitelabel: {
        locale: 'en', // or 'hu'. If you need other languages, please contact us.
        urls: {
            splashScreen: "https://chamaileon-sdk.github.io/splashscreen-and-logo-examples/splashScreen.html",
            createLogoJS: "https://chamaileon-sdk.github.io/splashscreen-and-logo-examples/createLogo.js"
        },
        colors: {
            primary: "#2D3291",
            secondary: "#009f4a",
            red: "#ff5546",
            darkBlue: "#2d3291",
            darkGreen: "#00af6e",
            lightGreen: "#50d791",
            weirdGreen: "#50d791",
            pink: "#ff91a0",
            yellow: "#ffd23c"
        }
    }
});

The chamaileonPlugins object exposes multiple functions. You can use our plugins included in the SDK by invoking those functions. You can navigate through the plugins by using the links on the left-hand-side.

Property Type Description
mode string Your prefered init mode of the SDK, serverless or serverfull. Now, the only available option is the 'serverless'.
whitelabel object White label config object

Whitelabel config object properties

Property Type Description
urls.splashScreen string An url of a html file, which will be displayed in an iframe, till the plugins load.
urls.createLogoJS string An url of a hosted javascript file, with a function named createLogo() in it. The logo is up to you how you customize it. You can do any kind of fancy transitions with JS. :)
colors object Your own theme colors. The colors property represents the Vuetify Theme Configuration object. In most of the cases, it is enough to set up the primary color.

See our example repo for a splashscreen and a createLogoJS example.

Example Documents

You might need some example documents (JSONs) during development: