SDK

If your using our embed snippet to load your bot into your website, then you already have access to our software development kit. The Software Development Kit (SDK) can be accessed via a property on the global window object window.chatThing.

As a reminder our chat embed script looks like this & you can obtain this by visiting your bots dashboard, clicking on the "Embed" button (top right), then copy the snippet under "Embed as chat widget".

<script src="https://chatthing.ai/chat-widget.js" type="text/javascript" id="98c8bb01-129e-4459-b496-648f6601cd70" async defer></script>

If you're using this method to embed your bot, then you have access to the following functionality.

Show or hide the chat window

/* show the chat window */
window.chatThing.show(): void;

/* hide the chat window */
window.chatThing.hide(): void;

/* toggle the chat window */
window.chatThing.toggle(): void;

Show or hide the trigger button

/* show the trigger button */
window.chatThing.showTrigger(): void;

/* hide the trigger button */
window.chatThing.hideTrigger(): void;

/* toggle the trigger button */
window.chatThing.toggleTrigger(): void;

Send messages or start new conversations

/* send a message to the chat interface */
window.chatThing.sendMessage(message: string): void;

/* start a new conversation */
window.chatThing.newConversation(message?: string): void;

Send message previews (message bubbles)

/* show chat message preview */
window.chatThing.showPreview(message: string, delay?: number): void;

/* hide chat message preview */
window.chatThing.hidePreview(): void;

Extend chat interface theme

type TExtendThemeData = {
  theme?: "dark" | "light";
  colours?: {
    primaryColour?: string;
    primaryColourInverted?: string;
    secondaryColour?: string;
    secondaryColourInverted?: string;
  };
}

/* extend chat interface theme */
window.chatThing.extendTheme(data: TExtendThemeData): void;

Identify user

type TIdentifyUser = {
  name?: string;
};

type TIdentifyUserId = TIdentifyUser & {
  id: string | number;
};

type TIdentifyUserEmail = TIdentifyUser & {
  email: string;
};

/* identify user */
window.chatThing.identifyUser(data: TIdentifyUserId | TIdentifyUserEmail): void;

Override or extend the system message

/* overide the system message */
window.chatThing.systemMessage(mode: "override", message: string): void;

/* extend the system message */
window.chatThing.systemMessage(mode: "extend", message: string): void;

Register client side power ups

Client side power-ups allows you to create custom power-ups for your bots allowing it to take actions on behalf of your users. This is extremely powerful and allows you to create AI co-pilots for your apps that can do things like add items to a user's basket etc.

For a detailed example of how to use client-side power-ups to build an AI shopping assistant, checkout this blog post and video: Build an AI shopping co-pilot

/* register a client side power up */
window.chatThing.registerPowerUp(data: TRegisterPowerUpData): TRegisteredPowerUp;

type TPowerUpArgs = Record<string, any>;
type TPowerUpHandler = (args: TPowerUpArgs) => Record<string, any>;
type TRegisterPowerUpParameters = {
  [key: string]: {
    type: "string" | "number" | "boolean" | "object";
    values?: (string | number | boolean)[];
    description: string;
    required: boolean;
  };
};

type TRegisterPowerUpData = {
  id?: string;
  name: string;
  description: string;
  parameters: TRegisterPowerUpParameters;
  handler?: TPowerUpHandler;
};

type TRegisteredPowerUp = {
  id: string;
  enabled: boolean;
  setEnabled: (enabled: boolean) => void;
  destroy: () => void;
  handler?: TPowerUpHandler;
};

Example: Adding to cart

Let's demonstrate a basic example where we allow our bot to add products to a users cart. Assume we already have a basic add to cart function in the frontend of our app that looks something like this:

function addToCart(itemId: string, qty: number): Promise<any> {
    // Add to cart implementation goes here. You may post to an API or handle adding to cart
    // entirely on the frontend 
}

We can now allow our bot to use the function when a user would like to add a product to the cart by adding a client side power-up.

const addToCartPowerUp = window.chatThing.registerPowerUp({
    name: 'Add to cart',
    description: 'Add a product to the shopping cart',
    parameters: {
        itemId: {
            type: 'string',
            description: 'The unique product id',
            required: true
        },
        qty: {
            type: 'number',
            description: 'The number of items to add',
            required: true
        }
    },
    handler: async (args: { itemId: string, qty: number }) => {
        // In the power-up handler you can now call your original add to cart function using
        // the arguments provided by the bot
        try {
            const res = await addToCart(itemId, qty);
            
            // You should return a string from the handler functions
            return res;
        } catch (e) {
             // If there has been an error return an error message so the bot
             // knows something has gone wrong
             return e.message;
        }
    }
});