@zauberware/hermine-chat NPM

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`