Hermine-Chat

Hermine-Chat is a react package to integrate a hermine.ai-based chat component on any website. Come and create and account on hermine.ai to get started. Build custom GPTs and profit from the knowhow of talented data engineers, software-developers and product owners.

Integration

It doesn't matter if it's hosted via a bundled javascript environment or plain javascript.

Integration via npm

To install the package run:

npm install --save @zauberware/hermine-chat

Setup the Chat component by doing this:

import HermineChat from '@zauberware/hermine-chat'
HermineChat({
    accountId: '<your-account-id>',
    agentSlug: '<your-agent-slug>',
    // your settings going in here
})

Integration via CDN

Add import script tag. To use a specific version number just add the following snippet:

<script type="module" src="https://cdn.zauberware.com/hermine-chat/versions/v<VERION_NUMBER>/esm/index.js" crossorigin="anonymous"></script>

If you always want to fetch the most recent version load the data via the following snippet, but be aware that there might be some breaking changes.

<script type="module" src="https://cdn.zauberware.com/hermine-chat/current/esm/index.js" crossorigin="anonymous"></script>

Setup the Chat component by doing this:

window.HermineChat({
    accountId: '<your-account-id>',
    agentSlug: '<your-agent-slug>',
    // your settings going in here
})

If you put this in your html template file, do not forget to put it inside <script type="module">-tags.

Configuration Options

Option	Required	Description	Type	Example
accountId	yes	Your accountId generated by hermine.ai	uuid	11111111-2222-3333-4444-555555555555
agentSlug	yes	Your agentSlug generated by hermine.ai	slug	hermine-gpt
location	-	The location of the chat button.	'top' | 'center' | 'bottom'	hermine-gpt
chatTitle	-	The title of the chat window.	string	Hermine-Chat
chatTitleColor	-	The color of the title of the chat window.	css color	rgb(15, 15, 15) | 'red' | '#e20'
chatDescription	-	The description of the chat window.	string	Hermine-Chat
spacingBottom	-	Space to bottom of screen (in addition with location 'bottom').	css size	10px | 10% | 10vh
spacingTop	-	Space to top of screen (in addition with location 'top').	css size	10px | 10% | 10vh
spacingRight	-	Space to right of screen.	css size	10px | 10% | 10vh
floatingButtonBorderColor	-	Border color of the floating button.	css color	rgb(15, 15, 15) | 'red' | '#e20'
buttonBackgroundColor	-	Background color of the send button.	css color	rgb(15, 15, 15) | 'red' | '#e20'
buttonColor	-	Text color of send button.	css color	rgb(15, 15, 15) | 'red' | '#e20'
messageColor	-	Text color of ai message bubbles.	css color	rgb(15, 15, 15) | 'red' | '#e20'
messageBackgroundColor	-	Background color of ai message bubbles.	css color	rgb(15, 15, 15) | 'red' | '#e20'
showConversationManagment	-	Enable "Show more" button to route to hermine conversations view.	boolean	true
useCustomLogo	-	Using the custom logo set on hermine.ai.	boolean	true

FAQ

Is there a way to open the chatwindow from outside?

You can open the chatwindow by adding a element with the class hermine-chat-opener. With the class hermine-chat-toggler you also can close the window with a click on those.

If you want to open the chat window via an url, you can add a the following query parameter to the url: ?hermine_chat_open=true for example `https://hermine.ai/agents?hermine_chat_open=true.

How to change the avatar in the ai chat messages?

The image from the floating button is loaded from the hermine.ai application. The property used for the image is the ai_icon.

How to change the avatar in the ai chat messages?

The image from the floating button is loaded from the hermine.ai application. The property used for the image is the ai_icon.

Development

To contribute in the development in this application you need something like a container application. For example you could use this sveltekit application. After you cloned the package, make sure to add this package in the container application with your relative path. For example:

npm uninstall @zauberware/hermine-chat
npm i ../../hermine-chat

When making changes on the project you need to rebuild it. This will work with executing the following command:

npm run dev

Some times the container app shows a 500 error message. If those appear, just restart it with npm run dev