←

Example 2: CTA with Pre-set Question

💡 What This Example Demonstrates

This example shows how to create Call-to-Action buttons that open your Landbot with specific pre-defined questions. Each button sends a different query, perfect for guiding users to specific conversation flows.

🎯 Try These CTA Buttons

Click any button below to see how it opens the bot with a specific question

🔧 How It Works

1 HTML: Create CTA Buttons

Each button has an onclick handler that triggers a specific query

HTML 
<!-- CTA Buttons with onclick handlers -->
<button onclick="askPricing()">
    💰 Ask About Pricing
</button>

<button onclick="askShipping()">
    🚚 Shipping Information
</button>

<button onclick="requestDemo()">
    🎯 Request a Demo
</button>

💡 Why This Works

Each button calls a different JavaScript function. Inside each function, we define what question to send to the bot. This lets you create contextual help buttons throughout your site.

2 JavaScript: Define Question Functions

Create a function for each button that sends a specific query

JavaScript - Button Functions 
// Function for pricing button
function askPricing() {
    sendQueryToChatbot('What are your cheese prices and available varieties?');
}

// Function for shipping button
function askShipping() {
    sendQueryToChatbot('How do you ship cheese and what are the delivery times?');
}

// Function for demo request button
function requestDemo() {
    sendQueryToChatbot('I would like to request a cheese tasting demo');
}

// Function for support button
function askSupport() {
    sendQueryToChatbot('I need help with my cheese order');
}

⭐ Key Insight

Each function calls sendQueryToChatbot() with a different pre-written question. You control exactly what the bot receives, making conversations predictable and targeted.

3 JavaScript: Core Send Function

The same function from Example 1, but now called with different messages

JavaScript - Core Function 
function sendQueryToChatbot(query) {
    // Wait for bot to be ready
    waitForLandbot(function() {
        // ⭐ Send the pre-defined message to bot
        myLandbot.sendMessage({
            type: 'text',
            message: query  // Pre-written question
        });
        
        // Open the bot after 500ms
        setTimeout(function() {
            myLandbot.open();
        }, 500);
    });
}
4 JavaScript: Initialize Landbot

Same initialization as Example 1

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);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    initLandbot();
});

📝 Summary: What Happens

  1. User clicks a CTA button (e.g., "Ask About Pricing")
  2. Button's onclick function is triggered
  3. Function calls sendQueryToChatbot('What are your pricing plans?')
  4. myLandbot.sendMessage() sends the question to bot
  5. myLandbot.open() opens the chat window
  6. Bot receives the question and responds

💼 Real-World Use Cases

🎨 Design Tips

⚙️ Bot Configuration

Your Landbot needs to be configured to handle the pre-set questions sent from your CTA buttons. The AI Agent will receive these questions and respond accordingly.

📸 AI Agent Setup

AI Agent configuration in Landbot to handle CTA button questions

Screenshot showing the AI Agent configuration that receives and processes pre-set questions from CTA buttons

🔄 Complete Bot Flow

Here's an overview of the complete bot flow showing how the AI Agent handles different types of questions from your CTA buttons.

📸 Bot Flow Overview

Complete Landbot flow showing how different CTA questions are handled

Screenshot showing the bot flow that processes different questions (pricing, shipping, demo requests, support)

💡 Advanced Tip: You can configure your Landbot to recognize specific questions and route users to different conversation flows or provide specialized responses based on the button clicked.