This repository contains the code for the Uchat-widget that can be easily added to any website. The widget allows users to engage in real-time conversations with a botpress chatbot.
To add the chat widget to your website, follow these steps:
-
Include the chat-widget style sheet from the CDN in your HTML head tag:
<link rel="stylesheet" href="https://uchat-widget.netlify.app/chat-widget.css">
-
Include the chat-widget script from the CDN at the bottom of your HTML body tag:
<script src="https://uchat-widget.netlify.app/chat-widget.js"></script>
-
Initialize the chat widget by calling the
uChatWidgetfunction with the botpress API-endpoint parameters:<script> window.uChatWidget({ BP_API_ENDPOINT: "https://{botpress-server-url}/api/v1/bots/{botID}/converse/{userID}", }); </script>
-
Customize the chat widget appearance and behavior by modifying the provided CSS and JavaScript files.
- Add the following .env variables to your next projcet.
botpress_server_url=
botID=
userID=
- Add the uChatWidget style sheet & script in the src/pages/_document.tsx file.
<Html lang="en">
<Head>
<link rel="stylesheet" href="https://uchat-widget.netlify.app/chat-widget.css" />
<script type="text/javascript" id="hs-script-loader" async defer src="https://uchat-widget.netlify.app/chat-widget.js" />
</Head>
<body>
<Main />
<NextScript />
<script
dangerouslySetInnerHTML={{
__html: `
window.uChatWidget({
BP_API_ENDPOINT: "https://${process.env.NEXT_PUBLIC.botpress_server_url}/api/v1/bots/${process.env.NEXT_PUBLIC.botID}/converse/${process.env.NEXT_PUBLIC.userID}",
});
`,
}}
/>
</body>
</Html>The chat widget can be customized to match the look and feel of your website. The provided CSS file can be modified to change the widget's colors, fonts, and layout.
This project is licensed under the MIT License.