Integrate an AI Agent into the Chat Widget

<div id="cometChatMount"></div>

<script type="module">

  //  EDIT ONLY THE TEXT INSIDE QUOTES
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",   // e.g. "us", "eu", "in"
    mode: "guest",
    authKey: "YOUR_AUTH_KEY",

    language: "en-US",           // optional, defaults to "en-US"

    // Optional: how the guest appears in chat
    user: {
      name: "Guest User",
      avatar: "",
      link: ""
    },

    // Widget placement + size
    mount: "#cometChatMount",
    width: "700px",
    height: "500px",
    isDocked: true,
    chatType: "user",
    defaultChatID: "<YOUR_AGENT_ID>",  // point to your AI agent
    variantID: "<YOUR_VARIANT_ID>",
    //dockedAlignment: "left" | "right"

    // Define your tools here
    aiAssistantTools: {
      getCurrentWeather: ({ location }) => {
        // Call your weather API, or return mock data
        return `The weather in ${location} is 25°C and sunny.`;
      },
      createTicket: ({ title }) => {
        // Call your ticketing system, or return a confirmation
        return `Ticket "${title}" created successfully with ID #12345.`;
      },
    },
  };

  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
</script>

<div id="cometChatMount"></div>

<script type="module">

  //  EDIT ONLY THE TEXT INSIDE QUOTES
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",      // e.g. "us", "eu", "in"
    mode: "uid",
    authKey: "YOUR_AUTH_KEY",

    // IMPORTANT: this must be unique per user
    uid: "UNIQUE_USER_ID",          // e.g. "user_123", "customer_42"

    language: "en-US",              // optional, defaults to "en-US"

    // Optional: user profile shown in chat
    user: {
      name: "User Name",
      avatar: "https://example.com/uid.png",
      link: "https://example.com/profile/uid"
    },

    // Widget placement + size
    mount: "#cometChatMount",
    width: "700px",
    height: "500px",
    isDocked: true,
    chatType: "user",
    defaultChatID: "<YOUR_AGENT_ID>",  // open AI agent by default
    variantID: "<YOUR_VARIANT_ID>",
    //dockedAlignment: "left" | "right"

    // Define your tools here
    aiAssistantTools: {
      getCurrentWeather: ({ location }) => {
        // Call your weather API, or return mock data
        return `The weather in ${location} is 25°C and sunny.`;
      },
      createTicket: ({ title }) => {
        // Call your ticketing system, or return a confirmation
        return `Ticket "${title}" created successfully with ID #12345.`;
      },
    },
  };

  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
</script>

<div id="cometChatMount"></div>

<script type="module">

  //  EDIT ONLY THE TEXT INSIDE QUOTES
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",       // e.g. "us", "eu", "in"
    mode: "authToken",

    // Generated BY YOUR BACKEND after user login
    authToken: "USER_AUTH_TOKEN",

    language: "en-US",               // optional, defaults to "en-US"

    // Widget placement + size
    mount: "#cometChatMount",
    width: "700px",
    height: "500px",
    isDocked: true,
    chatType: "user",
    defaultChatID: "<YOUR_AGENT_ID>",   // open AI agent by default
    variantID: "<YOUR_VARIANT_ID>",
    //dockedAlignment: "left" | "right"

    // Define your tools here
    aiAssistantTools: {
      getCurrentWeather: ({ location }) => {
        // Call your weather API, or return mock data
        return `The weather in ${location} is 25°C and sunny.`;
      },
      createTicket: ({ title }) => {
        // Call your ticketing system, or return a confirmation
        return `Ticket "${title}" created successfully with ID #12345.`;
      },
    },
  };

  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
</script>