@zauberware/hermine-chat

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.

<script type="module" src="https://cdn.zauberware.com/hermine-chat/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
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

FAQ

How to change the image in the floating button?

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

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.