SlackStarJoin Cloud Waitlist
Talk to your agentsJavascript

Custom Trigger

Copy page

Create custom UI elements to trigger Inkeep modals with complete control over appearance and behavior in JavaScript.

Overview

Custom triggers give you complete control over how users open Inkeep modals in your JavaScript application. Instead of using pre-built widgets like Inkeep.ChatButton(), you can create your own UI elements that match your design system while maintaining full functionality.

Quick Start

Add the below <script> tag to the <head> or <body> of your website.

<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@inkeep/agents-ui-js@0.14/dist/embed.js"
    defer

> </script>

Insert the ModalChat widget by using the Inkeep.ModalChat() function.

const config = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  aiChatSettings: {
    aiAssistantName: "Keepie",
  },
  modalSettings: {
    onOpenChange: handleOpenChange,
  },
};

// Initialize modal chat
const modalChat = Inkeep.ModalChat(config);

function handleOpenChange(newOpen) {
  modalChat.update({ modalSettings: { isOpen: newOpen } });
}

// trigger
document.querySelector("#chat-button").addEventListener("click", () => {
  modalChat.update({ modalSettings: { isOpen: true } });
});

// Access chat methods
modalChat.clearChat();

Config

Prop

Type

Base Settings

Prop

Type

AI Chat Settings

Prop

Type

Prop

Type

Chat ButtonAdd Sidebar Chat to React

On this page

Overview
Quick Start
Config
Base Settings
AI Chat Settings
Modal Settings