1. SDK or Script

You can integrate Clice in 2 ways: by script tag or by SDK (Javascript compatible with all frameworks. Both snippets can be found in the Integrate section.

For a SaaS we recommend using the SDK.

A. SDK

It looks like this. Just copy yours and paste it in the code of your app, (whether you are in vanilla js, React, Angular, VUE...). Just make sure to import the npm package.

// npm install clice-sdk-2604@latest
import { Clice } from "clice-sdk-2604";

// Init the widget
Clice.init({
    appId: "12345678-abcd-efgh-ijkl-9876543210z",
    language: "en",
    colorLight: "#0693ff",
    colorDark: "#153c8a",
    iType: "auth",
    initEndpoint: "<https://api.example.com/auth/init-clice>",
    useOnboarding: "false",
});

// Shutdown the widget
Clice.shutdown();

B. Script

It looks like this. Just copy yours and paste it in the HTML of your website.

<script type="text/javascript" id="clice-ext-loader">
    (function () {
        var root = document.createElement("div");
        root.id = "clice-ext-root";
        document.body.appendChild(root);
        var script = document.createElement("script");
        script.id = "clice-ext-script";
        script.src =
            "<https://cdn.jsdelivr.net/npm/[email protected]/clice-ext-widget.iife.js>";
        script.type = "module";

        script.setAttribute(
            "data-app-id",
            "12345678-abcd-efgh-ijkl-9876543210z"
        );
        script.setAttribute("data-language", "en");
        script.setAttribute("data-color-light", "#ffc894");
        script.setAttribute("data-color-dark", "#153c8a");
        script.setAttribute("data-init-endpoint", "<https://api.example.com/auth/init-clice>");
        script.setAttribute("data-i-type", "auth");
        script.setAttribute("data-use-onboarding", "false");

        document.body.appendChild(script);
    })();
</script>

2. Data Attributes

In the SDK init (or script), replace the props following these rules.

Prop	Description	Possible values
`app-id`	The unique ID of your Clice app	Do not change this value
`language`	The widget language	`fr` (French) or `en` (English)
`color-light`	The widget color in light mode	A color in hex code
`color-dark`	The widget color in dark mode	A color in hex code
`init-endpoint`	Clice will send a request to this endpoint to initialize the user’s connection	The endpoint on your backend configured in Backend
`i-type`	-	Leave as `auth`
`use-onboarding`	Do you use onboarding in this Clice application?	`true` or `false`
`onboarding-name`	If you use Clice onboarding, the name of the onboarding for this user.	Nothing if you don’t use Clice onboarding, otherwise the name of an existing onboarding.

3. Security

For more information, see Security.