←

Example 1: Custom User Query

💡 What This Example Demonstrates

This example shows how to capture user questions from a custom input field and send them to your Landbot AI. The user types their question, and the bot opens with their query already sent.

🎯 Try It Now

Type a question in the search bar at the bottom and press Enter

💡 Try these example questions about Bellavista Restaurant:

  • 🌿 "Do you have a terrace?"
  • 🐕 "Can I bring my dog?"
  • 🍽️ "What are your opening hours?"
  • 🥘 "Do you have vegetarian options?"
  • 📅 "How can I make a reservation?"

🔧 How It Works

1 HTML: Create the Input Field
HTML 
<div class="floating-widget" id="chatWidget">
    <form class="widget-form" id="widgetForm">
        <input type="text" id="widgetInput" placeholder="Ask anything...">
        <button type="submit">➤</button>
    </form>
</div>
2 JavaScript: Initialize Landbot
JavaScript 
var myLandbot;

function initLandbot() {
    var s = document.createElement('script');
    s.type = "module";
    s.async = true;
    s.addEventListener('load', function() {
        setTimeout(function() {
            myLandbot = new Landbot.Popup({
                configUrl: 'YOUR-BOT-CONFIG-URL'
            });
        }, 500);
    });
    s.src = 'https://cdn.landbot.io/landbot-3/landbot-3.0.0.mjs';
    document.body.appendChild(s);
}
3 JavaScript: Send User Query to Bot
JavaScript - Core Function 
function sendQueryToChatbot(query) {
    // Wait for bot to be ready
    waitForLandbot(function() {
        // ⭐ Send user's message to bot
        myLandbot.sendMessage({
            type: 'text',
            message: query
        });
        
        // Open the bot after 500ms
        setTimeout(function() {
            myLandbot.open();
        }, 500);
    });
}

🎯 Key Method: myLandbot.sendMessage()

This is the core of the integration. It sends the user's typed question to your bot before the chat window opens. The bot receives it as if the user typed it directly in the chat.

4 JavaScript: Handle Form Submission
JavaScript 
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('widgetForm');
    const input = document.getElementById('widgetInput');
    
    initLandbot(); // Load bot
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const query = input.value.trim();
        if (query) {
            sendQueryToChatbot(query);
            input.value = '';
        }
    });
});

📝 Summary: What Happens

  1. User types question in custom input
  2. User presses Enter or clicks submit
  3. JavaScript captures the question
  4. myLandbot.sendMessage() sends it to the bot
  5. myLandbot.open() opens the chat
  6. Bot processes and responds

💼 Use Cases

⚙️ Bot Configuration

Your Landbot should be configured to handle incoming messages. The bot will automatically receive the text sent via sendMessage() and process it through your conversation flow.

📸 AI Agent Setup

AI Agent configuration in Landbot to handle incoming messages

Screenshot showing the AI Agent configuration that receives and processes user questions from your custom input field

🎨 Hide Default Landbot Widget

Since you're using a custom input field, you'll want to hide Landbot's default chat widget launcher that appears in the corner.

To hide the default widget:

  1. Go to your Landbot builder
  2. Open the Design section
  3. Add this custom CSS to hide the launcher:
.LivechatLauncher { display: none !important; }

📸 Custom CSS in Design Section

How to add custom CSS in Landbot Design section to hide default widget

Screenshot showing where to add custom CSS in the Design section to hide the default Landbot launcher

💡 Why hide it? Since users interact with your custom search bar instead of the default Landbot button, hiding the default launcher creates a cleaner, more integrated experience.

💬