Skip to main content

Chatbot

The QSC Chatbot is a lightweight, ready-to-use web assistant that connects to your REST API and makes conversations on your website feel natural and interactive. It displays AI replies, product results, and smart action buttons — all in a clean, responsive interface.

When the backend returns data such as products or actions (for example, “Add to cart” or “Buy now”), the chatbot automatically renders them as elegant buttons users can click. You don’t need to handle these manually — just return them from your API using the [[QSCACTION...]] format, and the chatbot takes care of the rest.

Chatbot Integration Guide​

Bring the QSC Chatbot to your website in just a few lines of code. First, Add the chatbot to your page:

<script src="https://unpkg.com/@quasiris/qsc-chatbot-ui@latest/dist/qsc-chatbot.js"></script>
<qsc-chatbot
  rest-url="https://api.example.com/chat"
  header-title="Qsc Chatbot"
  attach-btn="true"
  logo-path="./assets/bot.png"
  error-msg="Sorry, I’m having trouble connecting."
></qsc-chatbot>

That’s it – the chatbot will handle sending and receiving messages over REST. When a user types a message, it will automatically POST it to the rest-url and display the response.

Attributes:

  • rest-url (required) -The URL of your backend chat endpoint. All messages will be sent here.

  • header-title (Optional) -Text shown at the top of the chat window, e.g. Qsc Chatbot”.

  • attach-btn (Optional) - Set to "true" if you want users to upload images or Markdown files.

  • logo-path (Optional) -Path to the image shown on the round toggle button that opens the chat.

  • error-msg (Optional) -Friendly message shown when the REST call fails (e.g. “Server unreachable”).

What happens next​

The chatbot greets users with an initial message loaded from your configuration (welcome_message).

When they ask something, it sends the text to your REST endpoint.

The API response can include:

Plain text or Markdown (for answers and descriptions)

Product data (it can be rendered as a grid/list via system prompt)

Action definitions (rendered as clickable buttons)