Hirl Chatbot Widget

A standalone, embeddable chatbot widget for Hirl Technik that can be easily integrated into any website.

A link to the current configuration (machine names, links, etc) can be found here: https://docs.google.com/spreadsheets/d/1Uu6nM7jXzChsT3j_rE3yrKiqqLG5lYN14mcZglmQ5Ac/edit?gid=0#gid=0

📦 Installation

Via npm

npm install @fullstackcraftllc/hirl-chatbot-widget

Via unpkg (CDN)

<link rel="stylesheet" href="https://unpkg.com/@fullstackcraftllc/hirl-chatbot-widget@latest/dist/chatbot-widget.css">
<script src="https://unpkg.com/@fullstackcraftllc/hirl-chatbot-widget@latest/dist/chatbot-widget.js"></script>

Manual Control

<script>
// The widget auto-initializes, but you can control it manually
window.HirlChatbot.destroy(); // Remove the chatbot
window.HirlChatbot.init();    // Re-initialize the chatbot
</script>

🛠️ API

The widget exposes a global HirlChatbot object with the following methods:

HirlChatbot.init()

Initializes and displays the chatbot widget.

HirlChatbot.destroy()

Removes the chatbot widget from the page.

Deploy Process

Bump the latest version in package.json

Build the standalone embeddable widget:

npm run build:widget

And publish it to npm:

npm publish --access public

Then, you can paste this into any 'head' section of site generators like WordPress, Jimdo, Wix, etc.:

<!-- React Dependencies -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- Hirl Chatbot Widget -->
<link rel="stylesheet" href="https://unpkg.com/@fullstackcraftllc/hirl-chatbot-widget@latest/dist/chatbot-widget.css">
<script src="https://unpkg.com/@fullstackcraftllc/hirl-chatbot-widget@latest/dist/chatbot-widget.js"></script>

That's it!