calendar-assistant

Features

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

🚀 Choose your Chat Interfaces: Use your assistant in Slack, on your site, or by text message

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

Google Calendar + Gmail Agent

Here's a simple example of building an assistant that can read and answer questions about your Calendar and read and send emails.

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.

HTML

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

React Website

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='[
          {
            "questionId": 1,
            "text": "Suggested questions here..."
          },
          {
            "questionId": 2,
            "text": "Question 2"
          },
          {
            "questionId": 3,
            "text": "How to connect with Google Calendar?"
          }
        ]'
      ></lingtual-chat>
    </div>
  );
}

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