Custom Trigger for a modal (JS)

Use the "Custom Trigger" if you want to use a custom button, search bar, link, or any other UI element for opening and closing Inkeep's modal components.

Overview

Modal components are extensions of their embedded counterparts, providing the same functionality in a modal interface. Examples:

Modal settings control the behavior and interaction of modal components. These settings are passed in the modalSettings prop.

Setting	Type	Default	Description
`isOpen`	`boolean`	`false`	Controls the visibility of the modal. Set to `true` to show the modal, `false` to hide it.
`onOpenChange`	`(isOpen: boolean) => void`	-	Callback function triggered when the modal's open state changes. Useful for syncing state with your application.
`shortcutKey`	`string \| null`	`'k'`	The keyboard key that triggers the modal when pressed with Cmd (Mac) or Ctrl (Windows). Set to `null` to disable the shortcut.

Basic Usage

Initialize

Let's use the Modal version of the Search and Chat component as an example.

const config = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  modalSettings: {
    shortcutKey: "k",
  },
  aiChatSettings: {
    aiAssistantName: "Keepie",
  },
  searchSettings: {
    placeholder: "Search...",
  },
};
 
const modalWidget = Inkeep.ModalSearchAndChat(config);

The instance of an initialized Inkeep widget exposes an update method that can be used to update the widget's props/config. Whatever you pass subsequently is deeply merged with the previous props/config.

modalWidget.update({ modalSettings: { isOpen: true } });

An example of a button trigger that opens the modal when clicked:

document.querySelector("#open-modal").addEventListener("click", () => {
  modalWidget.update({ modalSettings: { isOpen: true } });
});

Basically means the modal extensions of the following components:

A modal version of the embedded search component. For detailed information about search functionality and available settings, see Embedded Search.

const config = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  searchSettings: {
    placeholder: "Search...",
  },
  modalSettings: {
    onOpenChange: handleOpenChange,
  },
};
 
// Initialize modal search
const modalSearch = Inkeep.ModalSearch(config);
 
function handleOpenChange(newOpen) {
  modalSearch.update({ modalSettings: { isOpen: newOpen } });
}
 
// trigger
document.querySelector("#search-button").addEventListener("click", () => {
  modalSearch.update({ modalSettings: { isOpen: true } });
});
 
// Access search methods
modalSearch.updateQuery("new search query");

<!-- Other HTML code -->
<button id="search-button">Open Search Modal</button>
<!-- Other HTML code -->

A modal version of the embedded chat component. For detailed information about chat functionality and available settings, see Embedded Chat.

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();

<!-- Other HTML code -->
<button id="chat-button">Open Chat Modal</button>
<!-- Other HTML code -->

A modal version of the embedded search and chat component. For detailed information about search and chat functionality and available settings, see Embedded Search and Chat.

const config = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  searchSettings: {
    placeholder: "Search...",
  },
  aiChatSettings: {
    aiAssistantName: "Keepie",
  },
  modalSettings: {
    onOpenChange: handleOpenChange,
  },
};
 
// Initialize modal search and chat
const modalSearchAndChat = Inkeep.ModalSearchAndChat(config);
 
function handleOpenChange(newOpen) {
  modalSearchAndChat.update({ modalSettings: { isOpen: newOpen } });
}
 
// trigger
document
  .querySelector("#search-and-chat-button")
  .addEventListener("click", () => {
    modalSearchAndChat.update({ modalSettings: { isOpen: true } });
  });
 
// Access search methods
modalSearchAndChat.search.updateQuery("new search query");
 
// Access chat methods
modalSearchAndChat.chat.clearChat();
 
// Access widget methods
modalSearchAndChat.setView("search");

<!-- Other HTML code -->
<button id="search-and-chat-button">Open Search and Chat Modal</button>
<!-- Other HTML code -->

Available Methods

Chat Methods

Method	Description
`submitMessage(message?: string)`	Programmatically sends a message in chat. If message is omitted, sends the current input value.
`updateInputMessage(message: string)`	Updates the text in chat input field
`clearChat()`	Resets the chat to its initial state
`openForm(formSettings: FormSettings)`	Displays a form overlay in chat interface
`focusInput()`	Sets focus to the chat input field

Refer to the Form Settings reference docs for more details on the available properties for the openForm method.

Search methods

Method	Description
`updateQuery(query: string)`	Programmatically updates the search query.
`focusInput()`	Sets focus to the search input field

type ModalViewTypes = "search" | "chat";

Method	Description
`setView(view: ModalViewTypes)`	Set the view of the widget to either search or chat

Update component props using the update method. Each modal component accepts the same configuration options as its embedded counterpart, plus the additional modal-specific settings:

// Modal Search updates
modalSearch.update({
  modalSettings: {
    isOpen: true,
  },
  searchSettings: {
    placeholder: "Search documentation...",
    defaultQuery: "getting started",
  },
});
 
// Modal Chat updates
modalChat.update({
  modalSettings: {
    isOpen: true,
  },
  aiChatSettings: {
    aiAssistantName: "Assistant",
    placeholder: "Ask a question...",
  },
});
 
// Combined Modal updates
modalWidget.update({
  defaultView: "search", // or 'chat'
  modalSettings: {
    isOpen: true,
  },
  searchSettings: {
    placeholder: "Search documentation...",
  },
  aiChatSettings: {
    aiAssistantName: "Assistant",
  },
});

Custom Trigger for a modal (JS)

Overview

Basic Usage

Initialize

Update

Available Methods

Chat Methods

Search methods

Widget methods

Widget Updates

On this page