Kindflow

Appearance

Web Interaction Interface ​

The Web Interaction Interface is a chat interface that you can embed on your website, enabling conversational interactions with Kindflow.

Overview ​

The Web Interaction Interface provides a conversational way for customers to interact with your business. It's an embeddable chat interface that creates interactions when customers engage with it.

What is the Web Interaction Interface? ​

The Web Interaction Interface is an embeddable chat widget that:

  • Integrates seamlessly into your website
  • Enables conversational interactions
  • Provides access to all Kindflow capabilities
  • Can be customized to match your brand
  • Works across all devices and screen sizes

How It Works ​

Customers click the chat interface on your website and start a conversation, creating an interaction. The intelligent agent responds using your FAQs, Resources, AOPs, and Tools to handle the interaction:

  • Answering questions
  • Executing workflows
  • Accessing information
  • Completing tasks
  • Escalating to humans when needed

Each message in the conversation is an interaction that triggers Kindflow to respond.

Features ​

  • Conversational UI: Natural chat-based interactions
  • Rich Responses: Support for text, links, and structured information
  • Session Management: Maintains context throughout the conversation
  • Customizable Appearance: Match your brand colors and style
  • Responsive Design: Works on desktop, tablet, and mobile

Getting Your API Key ​

Before integrating the Web Interaction Interface:

  1. Navigate to Settings → Team
  2. Go to the API Keys section
  3. Click "Create API Key"
  4. (Optional) Add a description for reference
  5. Copy and save the generated API key securely

Important: The API key is only shown once. Store it securely as you won't be able to view it again.

Integration ​

Basic Setup ​

Add the embed script to your website before the closing </body> tag:

html
<script src="https://kindflow.ai/api/embed.js?api_key=YOUR_API_KEY"></script>

Replace YOUR_API_KEY with your actual API key from the settings page.

Initialization ​

The interface automatically initializes when the page loads. The script:

  1. Creates an iframe at the bottom right of your page
  2. Loads the chat interface
  3. Displays as a small chat button (56x56px)
  4. Expands to a chat window (400x600px) when opened

Manual Initialization ​

For advanced use cases, you can initialize manually:

html
<script src="https://kindflow.ai/api/embed.js?api_key=YOUR_API_KEY"></script>
<script>
    // Initialize with custom configuration
    window.Kindflow.init({
        apiKey: "YOUR_API_KEY",
        baseUrl: "https://kindflow.ai",
    });
</script>

Using window.Kindflow ​

The global window.Kindflow object provides methods to control the interface and pass data.

setMetadata(metadata) ​

Add custom metadata to the conversation. This data is accessible in your Tools via metadata inputs.

Syntax:

javascript
window.Kindflow.setMetadata({
    userId: "user_123",
    plan: "premium",
    accountStatus: "active",
});

Example - E-commerce:

javascript
// Add customer and cart information
window.Kindflow.setMetadata({
    customerId: "cust_456",
    cartValue: 149.99,
    itemCount: 3,
    membershipTier: "gold",
});

Example - SaaS:

javascript
// Add user context
window.Kindflow.setMetadata({
    userId: "usr_789",
    organizationId: "org_123",
    subscription: "enterprise",
    lastLogin: new Date().toISOString(),
});

The metadata is merged with existing data and sent to the conversation, making it available for your Tools to use.

setUser(userData) ​

Set user information for the conversation.

Syntax:

javascript
window.Kindflow.setUser({
    email: "customer@example.com",
    name: "John Doe",
});

open() ​

Programmatically open the chat interface.

Syntax:

javascript
window.Kindflow.open();

Example:

javascript
// Open chat when user clicks a help button
document.getElementById("help-button").addEventListener("click", function () {
    window.Kindflow.open();
});

close() ​

Programmatically close the chat interface.

Syntax:

javascript
window.Kindflow.close();

remove() ​

Remove the chat interface from the page entirely.

Syntax:

javascript
window.Kindflow.remove();

How Interactions Work ​

When a user engages with the Web Interaction Interface:

  1. User Opens Chat: Clicking the chat button opens the interface
  2. Interaction Created: The first message creates a new interaction
  3. Message Processing: Each message triggers Kindflow to respond
  4. Response Generation: The system processes using AOPs, Tools, FAQs, and Resources
  5. Real-time Updates: Messages appear instantly via WebSocket connection

Each message in the conversation is an interaction that Kindflow processes and responds to.

Passing Dynamic Metadata ​

Update metadata dynamically based on user actions:

Example - Product Page:

javascript
// When user views a product
function onProductView(productId, productName, price) {
    window.Kindflow.setMetadata({
        currentProduct: productId,
        productName: productName,
        productPrice: price,
        pageType: "product",
    });
}

Example - After Login:

javascript
// Update metadata after user logs in
function onUserLogin(user) {
    window.Kindflow.setMetadata({
        userId: user.id,
        userEmail: user.email,
        accountType: user.accountType,
        isAuthenticated: true,
    });
}

Example - Shopping Cart:

javascript
// Update when cart changes
function onCartUpdate(cart) {
    window.Kindflow.setMetadata({
        cartTotal: cart.total,
        itemCount: cart.items.length,
        cartItems: cart.items.map(i => i.id),
    });
}

This metadata becomes available to your Tools, allowing them to provide personalized responses and actions.

Integration Examples ​

Single Page Application (React/Vue/Angular) ​

javascript
useEffect(() => {
    // Set metadata when component mounts or user state changes
    if (window.Kindflow && user) {
        window.Kindflow.setMetadata({
            userId: user.id,
            plan: user.subscription.plan,
            trialEndsAt: user.subscription.trialEndsAt,
        });
    }
}, [user]);

E-commerce Platform ​

html
<script src="https://kindflow.ai/api/embed.js?api_key=YOUR_API_KEY"></script>
<script>
    // Set initial metadata
    window.addEventListener("DOMContentLoaded", function () {
        window.Kindflow.setMetadata({
            storeId: "store_123",
            currency: "USD",
            country: "US",
        });
    });

    // Update on cart changes
    function updateCartMetadata(cart) {
        window.Kindflow.setMetadata({
            cartTotal: cart.total,
            itemCount: cart.items.length,
        });
    }
</script>

Best Practices ​

  • Set Metadata Early: Call setMetadata() as soon as user data is available
  • Keep It Relevant: Only include metadata that your Tools actually use
  • Update Dynamically: Update metadata when user state changes (login, cart update, etc.)
  • Secure Data: Don't include sensitive information (passwords, full credit cards)
  • Test Thoroughly: Verify metadata is correctly passed to your Tools
  • Use Descriptive Keys: Name metadata keys clearly (e.g., userId not uid)

Next Steps ​