Widget SDK

You can deeply integrate the PicoBot widget into your website by passing initial configurations upon launch and programmatically controlling its behavior using the exposed SDK methods.

Configuration

You can fully configure the widget during launch by setting the window.picoConfig object in your website’s <head>, just above where you place the widget snippet, as shown below:

window.picoConfig = {
    // Configuration options
};

Below are the available properties you can set on the configuration object.

`chatIconVisible`

Whether to natively display the chat icon bubble (the open and close buttons).

Type: boolean
Possible values: true, false
Default: true

window.picoConfig = {
    chatIconVisible: true,
    // ... other config options
};

`display`

The type of widget to visually display on the page.

Type: string
Possible values: 'floating', 'fullscreen', 'inline'
Default: 'floating'

window.picoConfig = {
    display: 'floating',
    // ... other config options
};

`language`

The language of the widget in ISO 639-1 format. This will firmly override any language set in your AI Agent’s appearance settings in the dashboard.

Type: string
Possible values: en, ar, az, bg, bn, bs, ca, cs, da, de, el, es, et, fa, fi, fr, he, hi, hr, hu, hy, id, it, ja, ko, lt, lv, mn, ms, nl, no, pl, pt, pt-br, ro, ru, sk, sl, sq, sr, sv, th, tr, uk, ur, vi, zh-cn, zh-tw

window.picoConfig = {
    language: 'en',
    // ... other config options
};

`variables`

An object containing custom variable names and their values to securely pass to the AI Agent during launch. (Note: The variables must have already been created in your AI Agent builder, and the JSON keys must match the variable names exactly).

window.picoConfig = {
    variables: {
        "contact_name": "John Doe",
        "contact_email": "john.doe@example.com",
        "age": 25
    },
    // ... other config options
};

Methods

Below are the SDK methods you can call from your frontend code to interact with the widget.

[!IMPORTANT] You must ensure that the widget script has fully loaded on the page before calling these methods.

`open()`

Opens the AI Agent window, identical to when a user clicks the chat icon bubble.

window.PicoBot.open();

`minimize()`

Minimizes the AI Agent window, identical to when a user clicks the minimize button in the widget header.

window.PicoBot.minimize();

`hideChatIcon()`

Completely hides the chat icon bubble from the screen.

window.PicoBot.hideChatIcon();

`showChatIcon()`

Shows the chat icon bubble on the screen.

window.PicoBot.showChatIcon();

`setVariables()`

You can dynamically pass custom values to the AI Agent at any point after it’s loaded. The method takes a strict object containing the variable names and values.

(Note: Just like the startup config, you must ensure that the variables have been created in the builder and that the names match exactly).

window.PicoBot.setVariables({
    "contact_name": "Rick Astley",
    "contact_email": "rick.astley@example.com",
    "age": 30
}, function(success, errorMessage) {
    if (!success) {
        console.error("PicoBot variables error:", errorMessage);
    }
});

`destroy()`

Permanently removes the AI Agent and all its DOM nodes from the page.

window.PicoBot.destroy();