Building a Chatbot
Difficulty Level
Nodes
Tags
Try out this flow yourself at Lamatic.ai. Sign up for free and start building your own AI workflows.
Add to LamaticIn 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
- Sign up at Lamatic.ai (opens in a new tab) and log in.
- Navigate to the Projects and click New Project or select your desired project.
- You'll see different sections like Flows, Context, and Connections
2. Creating Your Flow
-
Start a New Flow
Navigate to the Flows section, select New Flow, and choose Create from Scratch as your starting point. -
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. -
Configure Chat Widget
Select Chat Widget and specify the Allowed Domains where the Chat Widget will be accessible. -
Add a Generate Text Node
In the next node, select Generate Text and choose Gemini.- Under Messages (History) click "+" to include the message history.
-
Define a Prompt Template
Add a Prompt Template that includes both the user message and the chat message context. -
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.