JS Snippet
Custom Trigger
Design your own custom trigger component to open the Inkeep modal.
A “trigger” can be a button, a search bar, or any other element that you want to use to open the Inkeep modal.
Quick Start
JavaScript example:
<script type="module" defer>
// Get the button element
const inkeepButton = document.getElementById("inkeepButton");
// Create a new div element to hold the Inkeep modal and set its id and position
const inkeepDiv = document.createElement("div");
inkeepDiv.id = "inkeepModal";
inkeepDiv.style.position = "absolute";
document.body.appendChild(inkeepDiv);
const handleClose = () => {
inkeepWidget.render({
...config,
isOpen: false,
});
};
const handleOpen = () => {
inkeepWidget.render({
...config,
isOpen: true,
});
}
const config = {
componentType: "CustomTrigger", // required
targetElement: inkeepDiv, // required
properties: {
isOpen: false, // required
onClose: handleClose, // required
onOpen: undefined,
baseSettings: {
apiKey: process.env.INKEEP_INTEGRATION_API_KEY!, // required
integrationId: process.env.INKEEP_INTEGRATION_ID!, // required
organizationId: process.env.INKEEP_ORGANIZATION_ID!, // required
primaryBrandColor: "#26D6FF",
organizationDisplayName: "Inkeep",
//... optional base settings
},
modalSettings: {
// optional InkeepModalSettings
},
searchSettings: {
// optional InkeepSearchSettings
},
aiChatSettings: {
// optional InkeepAIChatSettings
botAvatarSrcUrl: "/img/inkeep-logo.svg",
quickQuestions: [
"Example question 1?",
"Example question 2?",
"Example question 3?",
],
},
},
};
// Embed the widget using the `Inkeep.embed()` function.
const inkeepWidget = Inkeep().embed(config);
// Add event listener to open the Inkeep modal when the button is clicked
inkeepButton.addEventListener("click", handleOpen);
</script>
HTML example:
<!-- Other HTML code -->
<button id="inkeepButton">Open modal</button>
<!-- Other HTML code -->
InkeepCustomTriggerProps
This type represents the configuration for the Inkeep custom trigger widget.
Property | Type | Description |
---|---|---|
isOpen | boolean | Required. Determines whether the modal is open. |
onClose | () => void | Required. Callback for when the modal is closed. |
onOpen | () => void | Callback for when the modal is opened. Default undefined . |
baseSettings | InkeepWidgetBaseSettings | Required. Base settings for any Inkeep widget. See reference here. |
modalSettings | InkeepModalSettings | Settings for the modal. See reference here. |
searchSettings | InkeepSearchSettings | Additional search settings for the Inkeep widget. See reference here. |
aiChatSettings | InkeepAIChatSettings | AI chat settings for the Inkeep widget. See reference here. |