hotbot UI is an
unattended chatbot plugin
compatible with both
WordPress and websites.

Overview

Hotbot is a project that evolved from the development of a chatbot UI initiated on a whim. It provides a simple interface and basic functionality for unmanned chatbots to be integrated into WordPress or static sites. Since it’s a package built using Vue, developers can reuse it as a component, including the UI.

This UI provides an interface that can be modified to match the visual design of the website by passing several parameters. It allows flexible customization of elements such as colors, avatar images, and the chatbot's name. For more extensive customization, you can directly manipulate the components to implement the desired changes.

  • Using the Plugin
    In WordPress, simply activate the plugin and paste the shortcode in the desired location to install the chatbot. for more details, please refer to the section below.
  • Using on Static Sites
    You can also use the chatbot on static sites by utilizing the WordPress REST API or leveraging your own JSON files. for more details, please refer to the section below.
  • Customization
    You can easily modify the displayed text and colors. For developers, components are provided, allowing for deeper customization of core functions.

WordPress Plugin

Installation Method

Download the "hotbot-ui.zip" from the directory you extracted, and install it via the WordPress dashboard or manually upload it to the Plugins directory.
Once uploaded, activate the plugin, and a new menu will be added.

Setup Method

From the menu, register keywords and responses, and if necessary, links. You can register multiple keywords, and the more matches a keyword has with an input word, the higher the priority for that response to be shown. Also, the ones registered higher up in the list will be prioritized, so reorder them as needed.

Example of a Shortcode
[hotbot_ui]
<?= do_shortcode('[hotbot_ui]') ?>
Example with Arguments
[hotbot_ui title="example" base_color="#666"]
<?= do_shortcode('[hotbot_ui title="example" base_color="#666"]') ?>
List Retrieval Endpoint
/wp-json/hotbot-api/v1/
Response Endpoint
/wp-json//hotbot-ui/v1/?message=
*Note If placed within an element where Vue or React is already mounted, it will not function properly.
owner-avatar The image displayed as the icon for the responding user.
user-avatar Set the image used as the icon for the user who is asking the questions.
first-message This will be the initial message displayed when the chat starts.
error-message Shown when no matching response is found for the given input.
title The title displayed for the chat window.
base-color Defines the primary color scheme for the chat interface.
font-color Specifies the color used for text within the chat.
accent-color The highlight or accent color used in various elements.
background-color Used to set the background color of the chat window.
title-color The background color applied to the chat title section.
message-color Adjust the color of the chat messages themselves.
ease Defines the animation easing, written using standard CSS properties.
title-size Set the font size for the chat window's title.
input-size The size of the input field for user messages.
avatar-size Adjusts the size of the avatar images displayed in the chat.

Use Static

Installation Method

After downloading hotbot-ui.zip, load /dist/js/hotbot-ui.js on the page where you want to use it. Then, paste the HTML code provided below and specify the API for sending requests or a JSON file.

Setup Method

When pasting the HTML code, if you're not using the REST API, make sure to set the value of "use-static" to true. This is necessary for handling the process on the JavaScript side instead of via the WordPress endpoint.

JavaScript Link
<script src="/dist/js/hotbot-ui.js"></script>
Insert HTML Tag
<div id="hotbot-app">
  <hotbot
    json="/dist/json/static.json"
    owner-avatar="/images/chatbot/owner.png"
    user-avatar="/images/chatbot/user.png"
    first-message="First Message"
    error-message="Error Message"
    title="hotbot UI"
    base-color="#080808"
    background-color="#f5f5f5"
    font-color="#080808"
    title-color="#f2f2f2"
    message-color="#e0e0e0"
    ease="cubic-bezier(0.76, 0, 0.24, 1)"
    title-size="48px"
    input-size="42px"
    avatar-size="32px"
    :use-static="true"
  ></hotbot>
</div>
*Introduction Most of the customization can be done by entering parameters, similar to WordPress plugins.
However, since the WordPress plugin is not used, the endpoint needs to be configured individually.
Additionally, keyword and array matching are handled at the endpoint, so when processing static JSON files, it must be done using JavaScript.
The two parameters below manage this setup.
*Note The component is mounted on the HTML tag with the ID "hotbot-app." Therefore, if placed within an element where Vue or React is already mounted, it will not function properly.
json When connecting to WordPress's REST API, specify the endpoint.
If using a static JSON file, set the path to that file.
use-static Set this to "false" when connecting to WordPress's REST API.
Set it to "true" when using a static JSON file.

Q&A

In what situations can this be used?
Basically, an unmanned chatbot may not function effectively as a user assistance tool. It is recommended to use it to maintain design stability by filling in unused spaces.
Can properties like colors be changed from the dashboard?
No, but it is relatively easy to customize.
However, with many fields to input, it might feel tedious.
Can I register images or videos?
No, but it is relatively easy to customize.
That said, there may not be a necessity to display images or videos on an unmanned chatbot.
Can I add selectable buttons?
No, but it is relatively easy to customize.
However, it's hard to see how selectable buttons in an unmanned chatbot would truly assist users.
Can it be integrated with AI?
No, but it is relatively easy to customize.
However, relying on AI to generate responses in an unmanned chatbot might not effectively assist users.
Are there any updates planned?
There are no updates planned. Absolutely not.

License

Permissions and Restrictions
  • You are free to modify and use this program for personal or commercial purposes.
  • However, redistribution of this program (whether original or modified, including partial redistribution) is prohibited.
  • This program is not registered in the WordPress Plugin Repository and is intended for direct use only.
Support and Liability
  • Support is not provided. This program is provided "as is," and all use is at your own risk.
  • The developer assumes no responsibility for any damages resulting from the use of this program. This includes, but is not limited to, data loss, security issues, or malfunction of the program.
Security and Privacy
The developer assumes no responsibility for any data loss or security issues that arise during the use of this program. Please ensure appropriate security measures are taken when using it.
Third-party Libraries
This program relies on several third-party libraries.
License Violations and Revocation Conditions
If any of the terms of this license are violated, the right to use this program will be immediately revoked.
Changes to the License
The terms of the license may be changed without prior notice. If any changes are made, they will be notified on the official website.