Building a Chatbot

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

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.

   

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.

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.