deep-chat
deep-chat copied to clipboard
Using DeepChat React component in an ExpressJS project
Hi,
I have a prebuilt Express project that is using an EJS template. It's mostly a static website so even the frontend is served by Express. Can I integrate Deep Chat with this or would I have to create a new frontend React project to be able to do this?
The website has multiple pages and I need the Deep Chat React component on just one of the pages, which is already built with the appropriate styling and scripts for the other functions on the page. Or can I do this with just deep-chat and not deep-chat-react?
Any help would be appreciated. Thanks in advance!
You can use 'deep chat' like a regular HTML element like 'div', which is a use case.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/[email protected]/dist/deepChat.bundle.js" type="module" crossorigin></script>
</head>
<body>
<deep-chat id="chat-element" demo="true" textInput='{"placeholder":{"text": "Welcome to the demo!"}}'></deep-chat>
<script type="module">
const chatElementRef = document.getElementById('chat-element');
// Setting value via a property (easiest way)
chatElementRef.history = [
{role: 'user', text: 'Hey, how are you today?'},
{role: 'ai', text: 'I am doing very well!'},
];
chatElementRef.setAttribute(
'introMessage',
JSON.stringify({
text: 'You are now running deep chat locally.',
})
);
</script>
</body>
</html>