How do I embed the FlowiseAI chat widget into my product and customize branding?
AI Agent Automation Platforms

How do I embed the FlowiseAI chat widget into my product and customize branding?

11 min read

Embedding the FlowiseAI chat widget into your product and customizing the branding is a straightforward way to deliver AI-powered conversations that feel fully native to your app or website. Below is a practical, step‑by‑step guide covering installation, configuration, and white‑label styling so the widget matches your brand.

Understanding the FlowiseAI chat widget

FlowiseAI provides a web chat widget you can attach to any website or web app to interact with a Flowise workflow (your chatbot/agent). Once you have a deployed Flowise instance and a published chatflow, you can:

  • Embed the widget via a simple <script> tag
  • Configure it with environment variables or a JSON config
  • Customize the appearance (colors, logo, avatar, position)
  • Control behavior (open/close, initial messages, chat history, etc.)

Everything lives client-side in your product, while Flowise handles the logic, LLM calls, and tools on the backend.

Prerequisites before embedding the chat widget

Before adding the widget to your product, make sure you have:

  1. A running FlowiseAI instance

    • Self‑hosted (Docker, Node, or cloud VM)
    • Or a managed instance (if using a hosted provider)

  2. A published chatflow

    • In the FlowiseUI, build your chatflow.
    • Test it in the “Playground” to ensure responses work as expected.
    • Note your chatflow ID (usually visible in the URL or chatflow settings).

  3. API / Public endpoint enabled (if required)

    • Ensure your Flowise instance or chatflow supports public or authenticated access from your front-end.

Once these prerequisites are in place, you’re ready to embed the FlowiseAI chat widget into your product.

Basic embed: Adding the FlowiseAI chat widget to your site

The simplest way to embed the FlowiseAI chat widget is with a script tag in your HTML.

1. Add the script to your HTML

In your product’s HTML (e.g., index.html or your main layout template), add the widget script before the closing </body> tag:

<script
  src="https://your-flowise-domain.com/webchat-plugin.js"
  defer
></script>

Depending on your setup, the script URL may differ (e.g., local IP, reverse proxy, or a custom domain). Make sure you use the URL where your Flowise instance is publicly accessible.

2. Initialize the widget with configuration

After the script loads, you initialize the widget with a configuration object. This is where you define your chatflow, API host, behavior, and branding.

<script>
  window.flowise = {
    chatflowid: 'YOUR_CHATFLOW_ID',
    apiHost: 'https://your-flowise-domain.com',
    theme: {
      buttonColor: '#2563eb',
      buttonTextColor: '#ffffff',
      chatWindowBackground: '#f9fafb',
      chatBubbleUser: '#2563eb',
      chatBubbleBot: '#e5e7eb',
      fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
    }
  };
</script>

Adjust the chatflowid and apiHost values according to your environment. The theme section is where most branding customization happens.

Embedding the FlowiseAI chat widget in different environments

Static HTML / PHP / basic web pages

For static sites or simple web apps, just include both script tags:

<body>
  <!-- Your app content here -->

  <script src="https://your-flowise-domain.com/webchat-plugin.js" defer></script>
  <script>
    window.flowise = {
      chatflowid: 'YOUR_CHATFLOW_ID',
      apiHost: 'https://your-flowise-domain.com'
      // additional config...
    };
  </script>
</body>

React (Create React App, Vite, Next.js client components)

In React, you still rely on injecting the script, but you typically do it in your main HTML template or via a useEffect hook.

Option 1: Add to public/index.html or _document.tsx

<!-- public/index.html -->
<body>
  <div id="root"></div>

  <script src="https://your-flowise-domain.com/webchat-plugin.js" defer></script>
  <script>
    window.flowise = {
      chatflowid: 'YOUR_CHATFLOW_ID',
      apiHost: 'https://your-flowise-domain.com'
    };
  </script>
</body>

Option 2: Dynamically inject in a component

import { useEffect } from 'react';

export function FlowiseChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://your-flowise-domain.com/webchat-plugin.js';
    script.defer = true;
    document.body.appendChild(script);

    (window as any).flowise = {
      chatflowid: 'YOUR_CHATFLOW_ID',
      apiHost: 'https://your-flowise-domain.com',
    };

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null; // widget renders itself
}

Then include <FlowiseChatWidget /> in your app layout.

Next.js / Remix SSR note

If you’re using server-side rendering, ensure the script and window.flowise config are only evaluated on the client side (e.g., via useEffect, next/script with strategy="afterInteractive", or similar).

Core configuration options for the FlowiseAI chat widget

Most FlowiseAI chat widget configurations revolve around:

  • Chatflow / API: which workflow to use and where it lives
  • UI behavior: initial open state, position, chat history
  • Branding: colors, fonts, logos, avatars, labels

Below is a representative configuration object you might use:

window.flowise = {
  chatflowid: 'YOUR_CHATFLOW_ID',
  apiHost: 'https://your-flowise-domain.com',

  // Behavior
  theme: {
    chatWindowOpen: false,
    position: 'right', // 'right' or 'left'
    showCloseButton: true,
  },

  // Branding
  theme: {
    primaryColor: '#2563eb',
    buttonColor: '#2563eb',
    buttonTextColor: '#ffffff',
    chatWindowBackground: '#ffffff',
    chatBubbleUser: '#2563eb',
    chatBubbleBot: '#f3f4f6',
    fontFamily: 'Inter, system-ui, sans-serif',
    borderRadius: 16,
    logoUrl: 'https://your-cdn.com/logo.svg',
    botAvatarUrl: 'https://your-cdn.com/bot-avatar.png',
  },

  // Localization / copy
  text: {
    placeholder: 'Ask us anything…',
    headerTitle: 'Support Assistant',
    headerSubtitle: 'Powered by AI',
    startMessage: 'Hi! How can I help you today?',
  },

  // Other options
  // token: 'YOUR_AUTH_TOKEN', // if your Flowise instance requires it
  // showPoweredBy: false,     // depending on license/plan
};

Note: The exact property names may vary with specific Flowise versions or plugins. Always cross‑check with your Flowise documentation or admin UI for the most up‑to‑date configuration schema.

Customizing branding: colors, logos, and fonts

To make the chat widget feel native to your product, you’ll want to customize:

1. Theme colors

Align the widget colors with your brand palette:

  • Primary/button color: typically your main brand color
  • Background: match your site’s background or use a subtle contrast
  • Chat bubbles: differentiate user vs. bot clearly

Example:

window.flowise = {
  // ...
  theme: {
    buttonColor: '#1d4ed8',
    buttonTextColor: '#ffffff',
    chatWindowBackground: '#0b1120',
    chatBubbleUser: '#1d4ed8',
    chatBubbleBot: '#111827',
    textColor: '#e5e7eb',
  },
};

2. Logo and bot/avatar images

If supported in your version, you can add:

  • Company logo for the widget header
  • Bot avatar for agent messages
  • User avatar (optional) for end-user messages
window.flowise = {
  // ...
  theme: {
    logoUrl: 'https://your-cdn.com/brand/logo-light.svg',
    botAvatarUrl: 'https://your-cdn.com/avatars/support-bot.png',
    userAvatarUrl: 'https://your-cdn.com/avatars/user-default.png',
  },
};

Use optimized images (SVG or compressed PNG) and host them on a performant CDN to avoid slowing down your widget load.

3. Fonts and border radius

Align typography and shape language with your UI:

window.flowise = {
  // ...
  theme: {
    fontFamily: '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
    borderRadius: 12, // in px, applied to chat window and bubbles
  },
};

Controlling widget behavior inside your product

Beyond styling, you’ll likely want to control when and how the FlowiseAI chat widget appears in your product.

1. Default open or closed state

Decide whether the widget starts open or minimized:

window.flowise = {
  // ...
  theme: {
    chatWindowOpen: false, // or true to open by default
  },
};

You may also use internal widget APIs (if exposed) to toggle visibility programmatically, e.g., when a user clicks “Chat with us” somewhere in your UI.

2. Positioning: left or right

In many UX patterns, chat widgets appear in the bottom-right corner, but you can shift it:

window.flowise = {
  // ...
  theme: {
    position: 'right', // 'right' or 'left'
    offsetX: 24,       // optional horizontal offset
    offsetY: 24,       // optional vertical offset
  },
};

3. Initial messages and greeting

Customize the first message or greeting to set expectations:

window.flowise = {
  // ...
  text: {
    startMessage: 'Hi! I’m your AI assistant. I can help with onboarding, billing, and product questions.',
  },
};

Some setups allow multiple initial messages or a delay before they appear to feel more conversational.

White‑labeling and hiding “Powered by” branding

Depending on your FlowiseAI license or deployment, you may have the option to:

  • Hide the “Powered by Flowise” label
  • Replace it with your own “Powered by [Your Brand]”
  • Use a fully unbranded UI

If your licensing allows it, the configuration might look like:

window.flowise = {
  // ...
  theme: {
    showPoweredBy: false,
  },
};

Or in some versions:

window.flowise = {
  // ...
  branding: {
    showPoweredBy: false,
    customFooter: 'Powered by Acme AI',
  },
};

Check your Flowise docs and license, as white‑label capabilities can differ between open‑source, self‑hosted, and enterprise plans.

Passing user context and IDs for personalization

To make the FlowiseAI chat widget feel truly integrated into your product, you may want to:

  • Tie conversations to specific users
  • Pass metadata (plan type, language preference, current page)
  • Enable personalized responses and analytics

If supported by your Flowise API endpoint, you can send context in the initialization or as part of each message.

Example:

window.flowise = {
  chatflowid: 'YOUR_CHATFLOW_ID',
  apiHost: 'https://your-flowise-domain.com',
  user: {
    id: 'user_12345',
    email: 'user@example.com',
    name: 'Alex Johnson',
    plan: 'Pro',
  },
};

Your chatflow nodes (e.g., system prompts, tools, APIs) can then use this data to tailor answers and actions, such as:

  • “As a Pro customer, you have access to…”
  • Pre-filling account or subscription parameters in API calls

Handling authentication and secure access

If your FlowiseAI instance is not fully public, you’ll need to secure access:

  1. API key or token

    • Use a short-lived token generated by your backend.
    • Inject it into window.flowise only for authenticated users.

  2. Backend proxy

    • Instead of exposing Flowise directly, route requests through your server.
    • Your front-end calls /api/chat, and your backend calls Flowise with the secret credentials.

Example with token:

window.flowise = {
  chatflowid: 'YOUR_CHATFLOW_ID',
  apiHost: 'https://your-backend.com/api/flowise-proxy',
  token: 'SHORT_LIVED_JWT_OR_SESSION_TOKEN',
};

This approach keeps your core Flowise credentials out of client-side code and lets you apply authorization logic (e.g., only logged-in users can access the chatbot).

Styling the FlowiseAI chat widget with custom CSS (advanced)

If the built‑in theme properties aren’t enough, you can often supplement them with CSS overrides. Inspect the rendered widget in your browser’s dev tools to identify class names, then add custom styles.

Example (assuming the widget uses identifiable container classes):

/* Override chat header background and shadow */
.flowise-chat-header {
  background: linear-gradient(135deg, #1d4ed8, #4f46e5);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.45);
}

/* Make user messages sharp-cornered and bold */
.flowise-message-user {
  border-radius: 4px !important;
  font-weight: 600;
}

/* Adjust input field styling */
.flowise-input {
  border-radius: 9999px !important;
  border: 1px solid #e5e7eb;
}

Include this CSS in your global styles or main stylesheet. Be careful with !important; use it only when necessary to override default styles.

Testing the widget inside your product

After embedding and branding the FlowiseAI chat widget:

  1. Verify basic loading

    • Ensure the widget icon appears.
    • Confirm the chat window opens without console errors.

  2. Test across devices

    • Desktop, tablet, and mobile views.
    • Check responsiveness and tap targets.

  3. Check dark/light themes

    • If your product supports theme toggling, make sure your widget doesn’t clash with either theme.

  4. Simulate different user states

    • Logged in vs. logged out.
    • Different roles or plans, if you pass user context.

  5. Monitor network calls

    • Confirm requests go to the correct apiHost.
    • Ensure tokens or sensitive data are not exposed unintentionally.

Performance and UX best practices

To keep the FlowiseAI chat widget fast and unobtrusive:

  • Defer or lazy‑load the script
    Use defer or load the script after critical content is rendered.

  • Use a CDN for assets
    Host your logo, avatars, and fonts on a stable, cached CDN.

  • Respect user attention
    Don’t auto‑open the widget on every page; consider:

    • Opening only on specific routes (e.g., /pricing, /checkout)
    • Triggering on significant idle time or exit-intent (if your analytics allow)

  • Keep prompts short and clear
    Use concise, helpful initial messages that set expectations.

Troubleshooting common FlowiseAI chat widget issues

If the FlowiseAI chat widget doesn’t behave as expected in your product, check:

  1. Widget not displaying

    • Is the script URL correct and accessible?
    • Are there any console errors?
    • Is window.flowise defined before the widget initializes?

  2. Chatflow not responding

    • Is chatflowid correct?
    • Does the Flowise server show any error logs?
    • Are LLM keys (OpenAI, etc.) correctly set up in Flowise?

  3. Branding changes not applied

    • Clear browser cache and hard refresh.
    • Verify you are modifying the correct properties for your Flowise version.
    • Check for conflicting CSS rules in your app.

  4. CORS or network errors

    • Ensure your Flowise instance allows requests from your domain (CORS).
    • Confirm HTTPS is consistent between your site and Flowise.

Summary

To embed the FlowiseAI chat widget into your product and customize branding:

  1. Run a Flowise instance and publish your chatflow.
  2. Add the webchat-plugin.js script to your site or app.
  3. Configure window.flowise with your chatflowid and apiHost.
  4. Customize theme, text, and other options for colors, logos, fonts, and copy.
  5. Optionally white‑label the widget, pass user context, and secure access via tokens or a backend proxy.
  6. Test across devices and refine behavior (position, open state, greetings) to fit your UX.

By following these steps, you can deliver a fully branded FlowiseAI chat experience that feels like a native part of your product, while Flowise handles the underlying AI workflows in the background.

Back to AI Agent Automation Platforms

Keep Reading

More from AI Agent Automation Platforms

Yuma AI pricing: how are “tickets resolved by AI” counted, and how do automated-ticket packages + overages work?

Read more

n8n options for scheduled portal checks (login → extract → alert) with screenshots/run logs for failures

Read more

How long does it take to implement Mandolin for intake → benefits → OOP estimation → PA in a multi-site infusion network?

Read more