Customizing the OPENAI Assistant - Close Button
I would like to introduce a close button to the OpenAI assistant and I know that I need to edit the html file provided by the developer in GitHub. I am using Wordpress and I have included the following code on my site's header:
</script>
<script src="https://unpkg.com/@buildshipapp/chat-widget@^1" defer></script>
<script>
window.addEventListener("load", () => {
window.buildShipChatWidget.config.url = "https://....../chat_tutor";
window.buildShipChatWidget.config.widgetTitle = "Assistant";
window.buildShipChatWidget.config.greetingMessage = "bla bla bla";
})
</script>
<!-- Button to open the widget -->
<button data-buildship-chat-widget-button id="chat-widget-button">
<img src="https://localhost/wordpress/wp-content/uploads/2017/07/icon.png" alt="AI Icon" style="width: 48px; height: 48px;">
</button>
<!-- Add custom styles for the chat widget button -->
<style>
#chat-widget-button {
..........
}
#chat-widget-button:hover {
......
}
</style>
have managed to make the Assistant work on my stage dev site by following the instructions on Buildship. However, the original assistant comes with no close button - to my surprise.
My issue begins when trying to introduce a close button, which needs to be done via editing the original html file: https://github.com/rowyio/buildship-chat-widget/blob/main/src/widget.html
Editing the file to introduce a close button is not my issue, but rather how to "install" the modified file (s) on my wordpress site and make it run so to fetch this directly from my server (where my wordpress is hosted) instead of the github original files. I know that that I need to modify: https://unpkg.com/@buildshipapp/chat-widget@^1, and I have done this but nothing seems to work for me. Obviously, I am doing something wrong due to lack of knowledge and experience.
Can someone please guide me through the setup process step by step?
Thank you
Konstantinos
</script>
<script src="https://unpkg.com/@buildshipapp/chat-widget@^1" defer></script>
<script>
window.addEventListener("load", () => {
window.buildShipChatWidget.config.url = "https://....../chat_tutor";
window.buildShipChatWidget.config.widgetTitle = "Assistant";
window.buildShipChatWidget.config.greetingMessage = "bla bla bla";
})
</script>
<!-- Button to open the widget -->
<button data-buildship-chat-widget-button id="chat-widget-button">
<img src="https://localhost/wordpress/wp-content/uploads/2017/07/icon.png" alt="AI Icon" style="width: 48px; height: 48px;">
</button>
<!-- Add custom styles for the chat widget button -->
<style>
#chat-widget-button {
..........
}
#chat-widget-button:hover {
......
}
</style>
have managed to make the Assistant work on my stage dev site by following the instructions on Buildship. However, the original assistant comes with no close button - to my surprise.
My issue begins when trying to introduce a close button, which needs to be done via editing the original html file: https://github.com/rowyio/buildship-chat-widget/blob/main/src/widget.html
Editing the file to introduce a close button is not my issue, but rather how to "install" the modified file (s) on my wordpress site and make it run so to fetch this directly from my server (where my wordpress is hosted) instead of the github original files. I know that that I need to modify: https://unpkg.com/@buildshipapp/chat-widget@^1, and I have done this but nothing seems to work for me. Obviously, I am doing something wrong due to lack of knowledge and experience.
Can someone please guide me through the setup process step by step?
Thank you
Konstantinos
GitHub
AI Chat Widget - flexible and lite chat widget that can connect to OpenAI Assistant, any database, tools - rowyio/buildship-chat-widget
