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