Skip to content
Flowtrail AI

Embed Chat

The “Embed Chat” feature allows you to integrate Flowtrail AI’s conversational chat directly into your platform. With this feature, users can ask questions about data and get instant answers in text, tables, charts, or flowcharts. Simply embed the chat, and users can start interacting with the data right from your application. This feature is designed to provide a seamless experience, making data exploration simple and accessible for everyone.

Embed Chat Using iframe

The iframe option allows you to quickly embed Flowtrail AI’s chat interface into your platform with minimal setup. Simply copy and paste the code below into your application, and replace the placeholder API key with your own. This method is ideal for platforms where you want a straightforward integration without altering your existing code. The iframe adapts to different screen sizes, ensuring a smooth user experience across devices.

example.html
<iframe
        width="400px"
        height="400px"
        style="border: none;"
        src="https://flowtrail.ai/chat/?apiKey={{your_apiKey}}"
      ></iframe>
  • width=“400px”:This specifies the width of the chat window. You can adjust this value to set the desired width for the embedded chat on your platform.
  • height=“400px”: This specifies the height of the chat window. You can adjust this value to set the desired height for the embedded chat on your platform.
  • style=“border: none;”: Removes any borders around the iframe for a clean, seamless appearance. You can also add your custom styles here, and they will affect the outer layout of the embedded chat.
  • src=“https://flowtrail.ai/chat/?apiKey={{your_apiKey}}”: The src attribute defines the source URL of the chat interface. Replace {{your_apiKey}} with your unique API key to authenticate and connect the chat to your data. The API key ensures that the chat can access and interact with your data securely.

Make sure to create your API key before embedding the chat.

Embed Chat Using npm Package

The npm package option allows for a more integrated approach to embedding Flowtrail AI’s chat within your application. By installing the @flowtrail/client package, you can easily set up and customize the chat experience. This method is ideal for developers who want more flexibility and control over how the chat is embedded. Follow the steps below to get started:

Step 1: Install the Package

Use npm to install the Flowtrail client package:

Terminal window
npm install @flowtrail/client

Step 2: Initialize the Chat in Your Application

In your main TypeScript or JavaScript file, import and initialize the chat client:

main.ts
import { flowtrailClient } from "@flowtrail/client";


flowtrailClient.init({
  apiKey: YOUR_API_KEY,
});

Replace YOUR_API_KEY with your unique API key. This will authenticate and connect the chat to your data, ensuring secure interaction.

Step 3: Add the Chat Component in HTML

Include the chat component in your HTML where you want the chat interface to appear:

index.html
<fl-chat-viewer></fl-chat-viewer>

The npm package option gives you greater flexibility to adjust settings and behavior, making it a robust choice for more customized integrations.

Make sure to create your API key before embedding the chat.