Guides
Tutorials
Building Chatbot

Building a Chatbot

Difficulty Level

Beginner

Nodes

Text LLM

Tags

Support
💡

Try out this flow yourself at Lamatic.ai. Sign up for free and start building your own AI workflows.

Add to Lamatic

In this Guide, We’ll walk you through creating a chatbot using Lamatic.ai, leveraging Gemini as the large language model (LLM) for content generation. You’ll learn how to seamlessly integrate AI-driven features into your chatbot, unlocking the potential for intelligent, dynamic interactions.

What you'll Build

  • You'll utilize Lamatic.ai Studio.
  • Build Chat Widget using LLM

Getting Started

1. Project Setup

  1. Sign up at Lamatic.ai (opens in a new tab) and log in.
  2. Navigate to the Projects and click New Project or select your desired project.
  3. You'll see different sections like Flows, Context, and Connections flow.png

2. Creating Your Flow

  1. Start a New Flow
    Navigate to the Flows section, select New Flow, and choose Create from Scratch as your starting point.

  2. Set a Trigger
    Click Choose a Trigger and select from API Request, App, or Widget Interface. For this example, choose the Chat Widget under the Interface option.

  3. Configure Chat Widget
    Select Chat Widget and specify the Allowed Domains where the Chat Widget will be accessible.

  4. Add a Generate Text Node
    In the next node, select Generate Text and choose Gemini.

    • Under Messages (History) click "+" to include the message history.

    Building Chatbot

  5. Define a Prompt Template
    Add a Prompt Template that includes both the user message and the chat message context.

  6. Generate Chat Response
    In the Chat Response node, add the generated response from the Generate Text node by clicking the appropriate option.

3. Test the Chat Widget

To test the chat widget, click the “Configure Test” button. A floating button will appear at the bottom right corner. Click it to start testing the chat

4. Deployment

Once you’ve tested the chat widget, click the Deploy button to make it live. Here you pass the deployment message. Flow Deploy

5. Integration

To integrate the chat widget into your website, simply click the Setup button to access the code, then paste it into your website.

Ensure that the allowed domains are specified before integrating this chat widget.

Source Code

<script async>
    (function () {
        // Wait for DOM to be fully loaded
        document.addEventListener("DOMContentLoaded", function () {
            const PROJECT_ID = '42*********************************c';
            const FLOW_ID = '73*********************************b';
            const API_URL = 'https://***.lamatic.ai';
            
            // Create the root element
            const root = document.createElement("div");
            root.id = "lamatic-chat-root";
            root.dataset.apiUrl = API_URL;
            root.dataset.flowId = FLOW_ID;
            root.dataset.projectId = PROJECT_ID;
            document.body.appendChild(root);
 
            // Load the script
            const script = document.createElement("script");
            script.type = "module";
            script.src = `https://widget.lamatic.ai/chat-v2?projectId=${PROJECT_ID}`;
            document.body.appendChild(script);
        });
    })();
</script>

The chat widget exposes global functions that you can use to control it programmatically. These functions become available after the widget is fully loaded, which is indicated by the lamaticChatWidgetReady event:

// Wait for the widget to be ready
window.addEventListener('lamaticChatWidgetReady', function() {
  // Now you can safely use the widget functions
  
  // Open the chat widget
  window.LamaticChatWidget.open();
 
  // Close the chat widget
  window.LamaticChatWidget.close();
 
  // Set a user ID for tracking conversations
  window.LamaticChatWidget.setUserId('user123');
 
  // Set context for the conversation
  window.LamaticChatWidget.setContext('User is viewing product page XYZ');
});
 
// You can also check if the widget is ready in this way:
if (window.LamaticChatWidget) {
  // Widget is already loaded
  window.LamaticChatWidget.open();
}

You can also check the logs in the Logs sections in the Lamatic.ai Studio.


By completing this tutorial, you’ve learned how to implement a Chat Widget using Lamatic.ai and seamlessly integrate it into your website. This unlocks powerful AI capabilities for your applications. As you explore further, you’ll discover how Lamatic.ai streamlines AI development, enabling you to focus on building innovative and impactful solutions.

Was this page useful?

Questions? We're here to help

Subscribe to updates