Skip to main content

Chat Widget

The Lingtual Chat Widget is a powerful web component that enables communication with a Lingtual project. This widget allows for a chat interface embedding, allowing the integration of Lingtual into web applications effortlessly.

Features

🌟 Seamless Integration: Easily integrate the Lingtual Chat Widget into your website or web application with just a few lines of JavaScript.

🚀 Interactive Chat Interface: Engage your users with a user-friendly conversation, powered by Lingtual's advanced language understanding capabilities.

🎛️ Customizable Styling: Customize the appearance of the chat widget to match your application's design and branding.

🌐 Multilingual Support: Communicate with users in multiple languages, opening up your application to a global audience.

Usage

You can get the HTML code embedded with the chat by clicking the Deploy button at the Sidebar after building a flow.

Docusaurus themed imageDocusaurus themed image

Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read below to learn how to use it with HTML, React and Angular.

Docusaurus themed imageDocusaurus themed image

Suggested Questions

The suggested_questions parameter allows you to pre-populate the chat interface with suggested questions that users can click on to initiate conversation. This is particularly useful to guide the user's interaction and provide a quick way to access specific flows or information.

To use this feature, you need to pass a JSON-formatted array of objects to the suggested_questions attribute. Each object should have a questionId and text field. Here's how you can include it in HTML, React, and Angular:

HTML

Simply add the suggested_questions attribute to your HTML tag:

        suggested_questions='[
          {
            "questionId": 1,
            "text": "Suggested questions here..."
          },
          {
            "questionId": 2,
            "text": "Question 2"
          },
          {
            "questionId": 3,
            "text": "How to connect with Google Calendar?"
          }
        ]'

HTML

The Chat Widget can be embedded into any HTML page, inside a <body> tag, as demonstrated in the video below.

React

To embed the Chat Widget using React, you'll need to insert this <script> tag into the React index.html file, inside the <body> tag:

<script src="https://cdn.jsdelivr.net/gh/autoinfra-ai/lingtual-embedded-chat@latest/dist/build/static/js/bundle.min.js"></script>

Then, declare your Web Component and encapsulate it in a React component.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "lingtual-chat": any;
    }
  }
}

export default function ChatWidget({ className }) {
  return (
    <div className={className}>
      <lingtual-chat
        window_title="YOUR TITLE"
        flow_id="YOUR_FLOW_ID_HERE"
        api_key="YOUR_KEY_HERE"
        host_url="https://app.lingtual.com" 
        style="position: fixed; bottom: 50px; right: 50px;"
        chat_input_field="input"
        chat_inputs='{"input":""}'
        suggested_questions='[]'
      ></lingtual-chat>
    </div>
  );
}

Finally, you can place the component anywhere in your code to display the Chat Widget.

Angular

To use it in Angular, first add this <script> tag into the Angular index.html file, inside the <body> tag.

<script src="https://cdn.jsdelivr.net/gh/autoinfra-ai/lingtual-embedded-chat@latest/dist/build/static/js/bundle.min.js"></script>

When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add CUSTOM_ELEMENTS_SCHEMA to the module's @NgModule.schemas.

  • Open the module file (it typically ends with .module.ts) where you'd add the lingtual-chat web component.
  • Import CUSTOM_ELEMENTS_SCHEMA at the top of the file:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
  • Add CUSTOM_ELEMENTS_SCHEMA to the 'schemas' array inside the '@NgModule' decorator:
@NgModule({
  declarations: [
    // ... Other components and directives ...
  ],
  imports: [
    // ... Other imported modules ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here
})
export class YourModule {}

In your Angular project, find the component belonging to the module where CUSTOM_ELEMENTS_SCHEMA was added.

  • Inside the template, add the lingtual-chat tag to include the Chat Widget in your component's view:
<lingtual-chat
    window_title="YOUR TITLE"
    flow_id="YOUR_FLOW_ID_HERE"
    api_key="YOUR_KEY_HERE"
    host_url="https://app.lingtual.com" 
    style="position: fixed; bottom: 50px; right: 50px;"
    chat_input_field="input"
    chat_inputs='{"input":""}'
    suggested_questions='[]'
></lingtual-chat>
info

  • CUSTOM_ELEMENTS_SCHEMA is a built-in schema that allows Angular to recognize custom elements.

  • Adding CUSTOM_ELEMENTS_SCHEMA tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like lingtual-chat.

  • Notice that you can only use the Chat Widget in components that are part of the module where you added CUSTOM_ELEMENTS_SCHEMA.

Configuration

Use the widget API to customize your Chat Widget:

caution

Props with the type JSON need to be passed as Stringified JSONs, with the format {"key":"value"}.

PropTypeRequiredDescription
bot_message_styleJSONNoApplies custom formatting to bot messages.
chat_input_fieldStringYesDefines the type of the input field for chat messages.
chat_inputsJSONYesDetermines the chat input elements and their respective values.
chat_output_keyStringNoSpecifies which output to display if multiple outputs are available.
chat_positionStringNoPositions the chat window on the screen (options include: top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left).
chat_trigger_styleJSONNoStyles the chat trigger button.
chat_window_styleJSONNoCustomizes the overall appearance of the chat window.
error_message_styleJSONNoSets the format for error messages within the chat window.
flow_idStringYesIdentifies the flow that the component is associated with.
heightNumberNoSets the height of the chat window in pixels.
host_urlStringYesSpecifies the URL of the host for chat component communication.
input_container_styleJSONNoApplies styling to the container where chat messages are entered.
input_styleJSONNoSets the style for the chat input field.
onlineBooleanNoToggles the online status of the chat component.
online_messageStringNoSets a custom message to display when the chat component is online.
placeholderStringNoSets the placeholder text for the chat input field.
placeholder_sendingStringNoSets the placeholder text to display while a message is being sent.
send_button_styleJSONNoSets the style for the send button in the chat window.
send_icon_styleJSONNoSets the style for the send icon in the chat window.
tweaksJSONNoApplies additional custom adjustments for the associated flow.
user_message_styleJSONNoDetermines the formatting for user messages in the chat window.
widthNumberNoSets the width of the chat window in pixels.
window_titleStringNoSets the title displayed in the chat window's header or title bar.
api_keyStringYesSets the API key for the associated flow.
suggested_questionsJSONNoSets the suggested questions to be displayed in the chat window.