Getting Started with the Chamaileon SDK v1

You are reading the documentation for Chamaileon SDK v1. You can find the v2 documentation here.

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: