WordPress & WooCommerce Integration

Add an AI chatbot to WordPress. Let customers ask “where is my order?” or “show me laptops under $500” and get instant answers. This guide shows you how to add LILA’s AI chat widget to your WordPress site or WooCommerce store.

Installation

Step 1: Get Your Credentials

  1. Log into LILA Dashboard
  2. Select your project
  3. Copy your API Key

Step 2: Install via Code Snippets Plugin

Using WPCode (Recommended)

  1. Install WPCode plugin from WordPress repository
  2. Go to Code Snippets → Add Snippet
  3. Choose Add Your Custom Code
  4. Paste this code:
<?php
// Add LILA widget to WordPress
add_action('wp_footer', function() {
?>
  <script type="module" src="https://embed.getlila.one/loader.js"></script>
  <lila-widget
    api-key="pk_live_abc123..."
    user-id="<?php echo get_current_user_id(); ?>"
    user-role="customer"
    >
  </lila-widget>
<?php
});
?>
  1. Set Location to Site Wide Footer
  2. Activate the snippet

Step 3: Add to Theme (Alternative)

Edit your theme’s functions.php:

// Add widget HTML
function lila_add_widget() {
    $api_key = 'pk_live_abc123...'; // Replace with your API key

    echo '<script type="module" src="https://embed.getlila.one/loader.js"></script>';
    echo '<lila-widget
        api-key="' . esc_attr($api_key) . '"
        user-id="' . get_current_user_id() . '"
        user-role="customer"
        >
    </lila-widget>';
}
add_action('wp_footer', 'lila_add_widget');

WooCommerce Integration

Add AI to WooCommerce using the same manual installation method above.

Product-Specific Queries

Enable customers to ask about specific products:

// Add LILA widget with product context
function lila_woocommerce_widget() {
    ?>
    <script type="module" src="https://embed.getlila.one/loader.js"></script>
    <lila-widget
        api-key="pk_live_abc123..."
        user-id="<?php echo get_current_user_id(); ?>"
        user-role="customer">
    </lila-widget>
    <?php
}
add_action('wp_footer', 'lila_woocommerce_widget');

Customer Order Queries

Allow logged-in customers to query their orders:

function lila_woocommerce_customer_widget() {
    if (is_user_logged_in()) {
        $user_id = get_current_user_id();
        $user = wp_get_current_user();

        ?>
        <script type="module" src="https://embed.getlila.one/loader.js"></script>
        <lila-widget
            api-key="pk_live_abc123..."
            user-id="<?php echo esc_attr($user_id); ?>"
            user-role="customer"
            user-name="<?php echo esc_attr($user->display_name); ?>"
            user-email="<?php echo esc_attr($user->user_email); ?>">
        </lila-widget>
        <?php
    }
}
add_action('wp_footer', 'lila_woocommerce_customer_widget');

Advanced Configurations

Show Widget Only on Specific Pages

function lila_conditional_widget() {
    // Show only on shop pages and product pages
    if (is_shop() || is_product() || is_product_category()) {
        ?>
        <script type="module" src="https://embed.getlila.one/loader.js"></script>
        <lila-widget
            api-key="pk_live_abc123..."
            user-id="<?php echo get_current_user_id(); ?>"
            user-role="customer">
        </lila-widget>
        <?php
    }
}
add_action('wp_footer', 'lila_conditional_widget');

Different API Keys for Different Sections

For different projects/databases, use different API keys:

function lila_multi_section_widget() {
    if (is_shop() || is_product()) {
        // Products API key
        $api_key = 'pk_live_products_abc123...';
    } elseif (is_page('support') || is_page('help')) {
        // Support API key
        $api_key = 'pk_live_support_xyz789...';
    } else {
        return; // Don't show widget on other pages
    }
    ?>
    <script type="module" src="https://embed.getlila.one/loader.js"></script>
    <lila-widget
        api-key="<?php echo esc_attr($api_key); ?>"
        user-id="<?php echo get_current_user_id(); ?>"
        user-role="customer">
    </lila-widget>
    <?php
}
add_action('wp_footer', 'lila_multi_section_widget');

Elementor Integration

Add Widget to Elementor Pages

  1. Install Custom HTML widget in Elementor
  2. Drag HTML widget to desired location
  3. Paste this code:
<script type="module" src="https://embed.getlila.one/loader.js"></script>
<lila-widget
  api-key="pk_live_abc123..."
  user-id="guest"
  user-role="visitor">
</lila-widget>

Note: The widget appears as a floating launcher in the corner. It opens a chat panel when clicked.

Database Setup for WooCommerce

Schema Export

Export your WooCommerce database schema:

# Via command line
mysqldump -u username -p --no-data database_name > woocommerce_schema.sql

# Or use phpMyAdmin
# Select database → Export → Structure only

Upload to LILA

  1. Go to LILA Dashboard
  2. Select Your Project
  3. Navigate to Schema → Upload
  4. Upload woocommerce_schema.sql
  5. Configure table relationships if needed

Common WooCommerce Queries

Example questions customers can ask:

Products:

  • “Show me wireless headphones under $100”
  • “What are your best-selling products?”
  • “Do you have any sales on laptops?”

Orders (logged-in customers):

  • “Where is my order?”
  • “Show my recent orders”
  • “When will my order arrive?”

Inventory (admin):

  • “What products are low in stock?”
  • “Show me products added this month”
  • “Which category has the most products?”

Troubleshooting

LILA widget troubleshooting for WordPress. Check these common issues.

Widget Not Showing

  1. Check browser console for JavaScript errors
  2. Verify API key is correct
  3. Clear WordPress cache (if using caching plugin)
  4. Disable conflicting plugins temporarily
  5. Try adding widget directly to footer.php

Conflicts with Other Plugins

If widget conflicts with chat plugins (LiveChat, Intercom, etc.):

// Disable LILA on specific pages where other chat loads
function lila_conditional_load() {
    if (!is_page('contact')) { // Skip contact page
        // Load LILA widget
    }
}

Styling Issues

WordPress themes might conflict with widget styles. Override with:

function lila_force_styles() {
    ?>
    <style>
        lila-widget {
            z-index: 999999 !important;
        }
    </style>
    <?php
}
add_action('wp_head', 'lila_force_styles');

Next Steps