Frameworks
The following are links to live UI frameworks/libraries that can be used to implement Deep Chat.
React
Make sure to use the deep-chat-react package and define the element tag as DeepChat.
Click for Live Example
Click for GitHub
Vue
Depending on your configuration, you may notice a "Failed to resolve component..." warning in the console. This can be fixed by following the simple steps outlined here.
Click for Live Example - Vue 3
Click for Live Example - Vue 2
Svelte
The Svelte browser app should work right out of the box. The SvelteKit implementation requires the component to be imported using onMount and
deep-chat to be rendered when it has loaded.
Click for Live Example - Svelte
Click for Live Example - SvelteKit
Angular
Please add the CUSTOM_ELEMENTS_SCHEMA into your module's schemas array and import the component
as import 'deep-chat';. See this blog for more information.
Solid
Make sure to declare a solid-js module when working with TypeScript and use hyphen-case syntax for properties that are accessed directly through markup.
Next
Use the deep-chat-react package and lazy load it using Next's dynamic extension.
When using App Router - make sure to set "use client" at the top of your file.
Click for Live Example - App Router
Click for Live Example - Page Router
Click for GitHub
Vanilla JS
The Live Example demonstrates how to set values via properties (recommended) and attributes, which should also be used as a fallback approach for other frameworks. This example also demonstrates how to import the component via a CDN.
Troubleshooting
If your platform has not been listed and Vanilla JS approach does not work as fallback, or if you are having issues with any of the existing examples; please see github issues or create a new issue ticket and we will look into it as soon as possible.