Troubleshooting

Check if the widget is loaded in a Shadow DOM

Inkeep components are loaded into a "Shadow" DOM. This is done so that they don't affect your pages styles or vice versa. Use your browser's developer tools to check if there's an HTML element with an ID that contains inkeep-shadow. If you don't see an element that matches that description, that means there is an issue instantiating the component. This is typically due to an issue with loading the JavaScript.

If you're using the uikit-js package, there are two scripts that need to be loaded:

1. The component library: <script id="inkeep-script" type="module" src="https://unpkg.com/@inkeep/uikit-js@<someversion>/dist/embed.js"></script>
2. A script that includes Inkeep.embed({...}) to instantiate the UI components.

Inspect your DOM to see if both of these scripts were successfully loaded. Sometimes, the issue is that script #2 loads before script #1. To prevent this, you can add an id to script #1 and use the "load" event to execute script #2.

inkeepScript.addEventListener("load", function () {
  // embed logic
});

Check if there are invalid custom CSS stylesheets

The UI components are designed to not display until custom stylesheets have been fetched. If you specify a stylesheetUrls property in the widget configurations but the provided path is invalid, this can cause the widget to not render. Please ensure that the URL is an absolute URL (like for a CDN); or, if using a relative URL, that that relative file is indeed bundled and published publicly. This typically requires putting the CSS file in a public or static folder, depending on the framework.

Check that the widgets are not hidden by other components on the page

If you see the inkeep-shadow element, the issue might be that the Search Bar or Chat Button components are not being properly displayed in your page. Find all the elements with id inkeep-widget-root and inspect whether they are being rendered off the page or hidden by other elements.