Web Component Configuration

Branding & Customization

The convo web component enables extending and customizing the convos user experience with which you're already familiar in our web app to your own JavaScript app.

But when you add convos to your own app, your end users will not necessarily know it's Kallo standing behind the curtain; you have complete flexibility to rebrand, alter, and tailor the experience for your own app's needs.

Optional customizations include:

• Branding options to create a seamless look and feel with your app
  • Color, font, and other style options
  • Giving the AI persona a name of your choice (instead of "Kallo")
• Custom prompting for the LLM
  • Give the LLM instructions it must follow (e.g. "Always talk like a pirate, and keep your messages under 100 words!")
  • Confine the LLM's knowledge to only the sources you provide
• Pre-select any of Kallo's supported LLMs (GPT, Claude, Gemini, etc.)
• User context awareness—or total user anonymity

Component Inputs

Accessing the configuration inputs is simple.

After inserting a <kallo-sdk-convo> element, store a reference to it:

const element = document.querySelector('kallo-sdk-convo');

With this reference, you can now access its configurable inputs:

element.systemConfig // identifiers and access token
element.appearanceConfig // for customizing visual aspects

systemConfig (required)

This configuration object is essential for instantiating the web component.

element.systemConfig = {
  accessToken: "<JWT_STRING>",
  userId: "<USER_ID>",
  convoId: "<CONVO_ID>"
}

appearanceConfig (optional)

You can style convo by providing appearanceConfig input object

element.appearanceConfig = {
  roles: {
    system: {
      image: "url/to/the/image",
      name: "notKallo",
      styles: {
        color: "black",
      }
    },
    user: {
      image: "url/to/the/image",
      name: "Brad",
      styles: {
        color: "dodgerblue",
      }
    }
  },
  bubbles: {
    sent: {
      styles: {
        background: "linear-gradient(to right, #faf3ff, #fae9e8)",
        border: "1px solid black",
        borderRadius: "30px",
        textColor: "black"
      }
    },
    received: {
      styles: {
        background: "white",
        border: "1px solid black",
        borderRadius: "30px",
        textColor: "black"
      }
    }
  },
  input: {
    styles: {
      background: "white",
      border: "1px solid blue",
      borderRadius: "30px",
      textColor: "black"
    }
  },
  sendButton: {
    styles: {
      background: "white",
      border: "1px solid blue",
      borderRadius: "100%",
      textColor: "black"
    }
  },
  convo: {
    styles: {
      background: "white"
    }
  }
}