0.6.18 • Published 7 months ago

@zauberware/hermine-chat v0.6.18

Weekly downloads
-
License
ISC
Repository
github
Last release
7 months ago

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

OptionRequiredDescriptionTypeExample
accountIdyesYour accountId generated by hermine.aiuuid11111111-2222-3333-4444-555555555555
agentSlugyesYour agentSlug generated by hermine.aislughermine-gpt
location-The location of the chat button.'top' \| 'center' \| 'bottom'hermine-gpt
chatTitle-The title of the chat window.stringHermine-Chat
chatTitleColor-The color of the title of the chat window.css colorrgb(15, 15, 15) \| 'red' \| '#e20'
chatDescription-The description of the chat window.stringHermine-Chat
spacingBottom-Space to bottom of screen (in addition with location 'bottom').css size10px \| 10% \| 10vh
spacingTop-Space to top of screen (in addition with location 'top').css size10px \| 10% \| 10vh
spacingRight-Space to right of screen.css size10px \| 10% \| 10vh
floatingButtonBorderColor-Border color of the floating button.css colorrgb(15, 15, 15) \| 'red' \| '#e20'
buttonBackgroundColor-Background color of the send button.css colorrgb(15, 15, 15) \| 'red' \| '#e20'
buttonColor-Text color of send button.css colorrgb(15, 15, 15) \| 'red' \| '#e20'
messageColor-Text color of ai message bubbles.css colorrgb(15, 15, 15) \| 'red' \| '#e20'
messageBackgroundColor-Background color of ai message bubbles.css colorrgb(15, 15, 15) \| 'red' \| '#e20'
showConversationManagment-Enable "Show more" button to route to hermine conversations view.booleantrue
useCustomLogo-Using the custom logo set on hermine.ai.booleantrue

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

0.6.18

7 months ago

0.6.17

9 months ago

0.6.14

10 months ago

0.6.13

10 months ago

0.6.16

9 months ago

0.6.15

9 months ago

0.6.9

1 year ago

0.6.8

1 year ago

0.6.10

1 year ago

0.6.12

1 year ago

0.6.11

1 year ago

0.6.5

1 year ago

0.6.3

1 year ago

0.6.2

1 year ago

0.6.4

1 year ago

0.6.1

1 year ago

0.6.0

1 year ago

0.5.2

1 year ago

0.4.9

1 year ago

0.4.10

1 year ago

0.4.11

1 year ago

0.4.4

1 year ago

0.5.0

1 year ago

0.4.3

1 year ago

0.5.1

1 year ago

0.4.2

1 year ago

0.4.1

1 year ago

0.4.0

1 year ago

0.3.0

1 year ago

0.2.8

1 year ago

0.2.1

1 year ago

0.2.7

1 year ago

0.2.6

1 year ago

0.2.2

1 year ago

0.2.5

1 year ago

0.2.4

1 year ago

0.2.0

1 year ago

0.1.4

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago

0.0.14

1 year ago

0.0.15

1 year ago

0.0.13

1 year ago

0.0.11

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago