Browser-side Integration - helixml/chat-widget

To integrate the HelixML chat widget on any webpage, you can use a <script> tag to embed the widget. Here are the steps to do so:

1. Add the following script tag to the HTML file where you want to embed the chat widget:

<script src="https://unpkg.com/@helixml/chat-widget"></script>

This will load the HelixML chat widget library.

2. Initialize the chat widget by adding the following script tag:

<script>
const helixmlChatWidget = new HelixMLChatWidget.ChatWidget();
helixmlChatWidget.render();
</script>

This will create a new instance of the chat widget and render it on the page.

You can customize the chat widget by passing options to the ChatWidget constructor. Here are some examples:

Example 1: Customize the chat widget with a title and a subtitle

Add the following script tag to customize the chat widget with a title and a subtitle:

<script>
const helixmlChatWidget = new HelixMLChatWidget.ChatWidget({
title: 'HelixML Chat Widget',
subtitle: 'A sample chat widget using HelixML',
});
helixmlChatWidget.render();
</script>

This will create a new instance of the chat widget with a title and a subtitle.

Example 2: Customize the chat widget with a different theme

Add the following script tag to customize the chat widget with a different theme:

<script>
const helixmlChatWidget = new HelixMLChatWidget.ChatWidget({
theme: 'dark',
});
helixmlChatWidget.render();
</script>

This will create a new instance of the chat widget with a dark theme.

Example 3: Customize the chat widget with a different language

Add the following script tag to customize the chat widget with a different language:

<script>
const helixmlChatWidget = new HelixMLChatWidget.ChatWidget({
language: 'es',
});
helixmlChatWidget.render();
</script>

This will create a new instance of the chat widget with Spanish as the language.

For more information, you can refer to the HelixML chat widget documentation: https://helixml.github.io/chat-widget/

The HelixML chat widget is built using React, TypeScript, Vite, @vitejs/plugin-react, OpenAPI, OpenAPI Client, Axios, Styled-Components, and React Router Dom. It is designed to be customizable and extensible. You can use it as a starting point to build your own chat widget or integrate it with your existing web application.

For more information on the technologies used in the HelixML chat widget, you can refer to the following resources:

• React: https://reactjs.org/
• TypeScript: https://www.typescriptlang.org/
• Vite: https://vitejs.dev/
• @vitejs/plugin-react: https://github.com/vitejs/vite-plugin-react
• OpenAPI: https://www.openapis.org/
• OpenAPI Client: https://github.com/OpenAPITools/openapi-generator
• Axios: https://axios-http.com/
• Styled-Components: https://styled-components.com/
• React Router Dom: https://reactrouter.com/web/guides/quick-start

If you want to use a different messaging client, you can consider the following alternatives:

• Rocket.Chat: https://rocket.chat/
• Element.io: https://element.io/
• Chatwoot: https://chatwoot.com/
• Hubot: https://hubot.github.com/

For more information on these alternatives, you can refer to the following resources:

• Choosing an open messenger client: Alternatives to WhatsApp | Opensource.com: https://opensource.com/article/19/3/open-messenger-client
• Try Chatwoot, an open source customer relationship platform | Opensource.com: https://opensource.com/article/21/6/chatwoot
• Integrate Hubot with Grafana | Grafana Labs: https://grafana.com/tutorials/integrate-hubot
• Top 4 open source IRC clients | Opensource.com: https://opensource.com/life/15/11/top-open-source-irc-clients
• IRC for the 21st Century: Introducing Element.io | Opensource.com: https://opensource.com/article/17/5/introducing-riot-irc

These alternatives use different technologies and have different features, so you can choose the one that best fits your needs.