mifupa

<p>BreznFlow turns n8n workflow JSON exports into interactive, zoomable SVG diagrams inside WordPress. Paste your workflow, and the plugin renders every node with brand-accurate colors, connection lines, and clickable detail panels — directly in your posts and pages.</p>
<p>The plugin was built for mifupa.com, a personal blog where n8n automations are documented regularly. Screenshots get outdated. Embedding the n8n editor is impractical. BreznFlow solves this: one shortcode, one interactive diagram, zero external dependencies.</p>
<h4>At a glance</h4>
<ul>
<li>Renders n8n workflow JSON as interactive SVG diagrams with zoom, pan, and click</li>
<li>86 node types with brand-accurate colors and icons (OpenAI, Slack, GitHub, Telegram, and more)</li>
<li>Click any node to inspect its parameters in a detail panel below the diagram</li>
<li>Automatically masks API keys, tokens, and secrets before storage — the raw JSON is never saved</li>
<li>3-step import wizard: paste JSON, configure display, preview and publish</li>
<li>5 built-in themes (Dark, Light, Minimal, Tech, Brezn) plus custom theme import</li>
<li>Shortcode <code>[breznflow id="X"]</code> with 13 attributes for per-instance configuration</li>
<li>Action bar with share, embed, get JSON, and download actions</li>
<li>Standalone embed page for iframe integration</li>
<li>Related workflows by shared node types</li>
<li>View counter and AI detection badges</li>
<li>Zero dependencies — vanilla JavaScript, no external CDN, no tracking</li>
</ul>
<h4>What makes BreznFlow different</h4>
<ul>
<li><strong>No external services.</strong> Everything runs locally inside WordPress. No CDN, no SaaS, no API calls during page loads.</li>
<li><strong>Security first.</strong> Sensitive data (API keys, tokens, secrets) is automatically detected and replaced with <code>[REDACTED]</code> before storage. The raw workflow JSON is never saved.</li>
<li><strong>Real interactivity.</strong> Not a static image — visitors can zoom, pan, and click nodes to see their configuration.</li>
<li><strong>Vanilla JavaScript.</strong> No React, no jQuery, no build step. The renderer is a single JS file that generates SVG elements directly.</li>
<li><strong>Built for real sites.</strong> Running on the developer’s own production sites since version 1.0.</li>
</ul>
<h4>Display modes</h4>
<ul>
<li><strong>Visual</strong> — full diagram with toolbar, detail panel, and action bar</li>
<li><strong>Info</strong> — node counts only (InfoBox summary like “3× HTTP Request, 2× Code”) — no diagram</li>
<li><strong>Compact</strong> — diagram without toolbar or action bar</li>
</ul>
<h4>Theme system</h4>
<p>5 built-in themes: Dark (default), Light, Minimal, Tech, and Brezn. Custom themes can be imported as <code>.breznflow.json</code> files containing 41 CSS color tokens. Themes are selectable globally, per workflow, or per shortcode.</p>
<h4>Node type registry</h4>
<p>86 predefined node types across 10 categories: Triggers, Core Logic, Data Transformation, Databases, Communication, Google, Dev Tools, AI, Storage, and CRM/Marketing. Unknown node types get a deterministic fallback with auto-generated colors — the same unknown type always looks the same.</p>
<h4>Sensitive data masking</h4>
<p>Before saving, BreznFlow runs a two-pass sanitization:</p>
<ol>
<li>All strings pass through WordPress sanitization</li>
<li>Secret detection scans for API keys in URL parameters, sensitive header values (Authorization, Bearer, X-API-Key), and high-entropy condition values</li>
</ol>
<p>A masking log records every redaction with reason and context — visible in the wizard preview.</p>
<h4>Action bar</h4>
<p>Below the diagram, the action bar provides four configurable actions:</p>
<ul>
<li><strong>Share</strong> — article link and anchor link for hash navigation</li>
<li><strong>Embed</strong> — iframe embed code for standalone embedding</li>
<li><strong>Get JSON</strong> — formatted JSON display with file size</li>
<li><strong>Download</strong> — sanitized JSON file download</li>
</ul>
<p>Each action can be enabled/disabled globally, per workflow, or per shortcode. Embed and Download use dual-gate security (global setting AND per-post permission).</p>
<h3>External Services</h3>
<p>This plugin optionally connects to external services only when you explicitly use the “Import from URL” feature in the workflow import wizard.</p>
<h4>Import from URL</h4>
<p>If you choose to import a workflow by pasting a URL instead of uploading or pasting JSON directly, the plugin makes an HTTP request to that URL using WordPress’s built-in <code>wp_remote_get()</code> function.</p>
<ul>
<li><strong>When:</strong> Only when you click the “Fetch” button in the Add Workflow wizard</li>
<li><strong>What is sent:</strong> Only the URL you provide — no WordPress data, no user data, no cookies</li>
<li><strong>To whom:</strong> Whatever server hosts the URL you provide</li>
<li><strong>Privacy policy:</strong> Depends on the server you connect to</li>
</ul>
<p>No data is transmitted automatically. No data is sent during normal page loads or to visitors browsing your site.</p>
<p>For security, requests to private and internal network addresses are blocked: localhost, <code>127.0.0.0/8</code>, <code>10.0.0.0/8</code>, <code>172.16.0.0/12</code>, <code>192.168.0.0/16</code>, and cloud metadata endpoints (e.g. <code>169.254.169.254</code>).</p>


BreznFlow

Display n8n workflows as interactive SVG diagrams with zoom, pan, node details, and automatic secret masking.

BooPixel

<p>BooPixel AI Chat Connect for n8n – AI Chatbot & n8n Automation brings intelligent customer interaction directly to your WordPress website.</p>
<p>Add a modern, lightweight chatbot popup that integrates seamlessly with n8n, allowing you to automate workflows, respond to visitors in real time, collect leads, and connect your chat interface to any external service or AI model.</p>
<p>Perfect for businesses that want to automate customer support, boost conversions, and create smarter interactions using visual, no-code automation.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Fully customizable chat popup</strong> (colors, icons, texts)</li>
<li><strong>Direct n8n Webhook integration</strong></li>
<li><strong>AI-ready</strong>: connect to ChatGPT, Claude, Gemini, Llama, and more (via n8n)</li>
<li><strong>Lightweight, fast, and compatible</strong> with all WordPress themes</li>
<li><strong>Custom Chat Icon</strong>: Upload your own icon for the chat header</li>
<li><strong>Multilingual interface</strong>: English, Portuguese, and Spanish</li>
<li><strong>Settings Management</strong>: Configure API URL and chat settings</li>
<li><strong>Responsive Design</strong>: Mobile-friendly chat interface</li>
<li><strong>Session Management</strong>: Automatic session tracking</li>
<li><strong>Real-time Messaging</strong>: Send and receive messages instantly</li>
</ul>
<h4>What You Can Automate</h4>
<ul>
<li>24/7 AI-powered customer support bots</li>
<li>Sales assistants that send quotes automatically</li>
<li>Integration with external APIs, databases, and web services</li>
<li>Personalized replies using AI via n8n workflows</li>
</ul>
<h4>Why Choose BooPixel AI Chat Connect for n8n</h4>
<ul>
<li>✔ Seamless n8n integration</li>
<li>✔ Modern UI and smooth experience</li>
<li>✔ Perfect for AI-based chat flows</li>
<li>✔ Zero coding needed</li>
<li>✔ Ultra-flexible — works with any tool connected to n8n</li>
<li>✔ Ideal for agencies, freelancers, support teams, and e-commerce</li>
</ul>
<h4>How It Works</h4>
<h3>Frontend Chat Flow</h3>
<ol>
<li>
<p><strong>Plugin Activation</strong>: Once activated, the chat popup automatically appears on your website (bottom-right corner, after 1 second delay)</p>
</li>
<li>
<p><strong>User Interaction</strong>:</p>
<ul>
<li>User clicks the chat popup to open the chat window</li>
<li>Welcome message is displayed</li>
<li>User types a message and clicks “Send”</li>
</ul>
</li>
<li>
<p><strong>Message Processing</strong>:</p>
<ul>
<li>JavaScript generates/retrieves session ID (stored in localStorage)</li>
<li>AJAX request sent to WordPress with message and session ID</li>
<li>WordPress forwards message to your n8n webhook URL</li>
<li>n8n workflow processes the message (AI, database, API calls, etc.)</li>
<li>n8n returns response</li>
<li>WordPress receives response and displays it in the chat</li>
</ul>
</li>
<li>
<p><strong>Response Display</strong>:</p>
<ul>
<li>Bot response appears in chat window</li>
<li>User can continue conversation</li>
<li>Session persists throughout the conversation</li>
</ul>
</li>
</ol>
<h3>Setup Process</h3>
<ol>
<li>Install and activate BooPixel AI Chat Connect for n8n</li>
<li>Configure your n8n webhook URL in the plugin settings</li>
<li>Customize the chat appearance to match your brand</li>
<li>The chat widget automatically appears on your frontend</li>
<li>User messages are sent to your n8n workflow</li>
<li>Responses from your workflow are displayed in the chat</li>
</ol>
<h4>n8n Integration</h4>
<p>BooPixel AI Chat Connect for n8n sends messages to your n8n webhook in the following format:</p>
<pre><code>json
{
  "sessionId": "unique-session-id",
  "action": "sendMessage",
  "chatInput": "user message text"
}
</code></pre>
<p>Your n8n workflow should return a response in this format:</p>
<pre><code>json
{
  "output": "response message text"
}
</code></pre>
<h4>Customization Options</h4>
<ul>
<li>Chat name and welcome message</li>
<li>Primary and secondary gradient colors</li>
<li>Chat background color</li>
<li>Text color</li>
<li>Font family and size</li>
<li>Language selection (auto-detects from WordPress)</li>
</ul>
<h3>Support</h3>
<p>For support, please visit: https://boopixel.com/support<br />
Email: email@boopixel.com</p>
<h3>Credits</h3>
<p>Developed by BooPixel<br />
Website: https://boopixel.com</p>


BooPixel AI Chat Connect for n8n

Connect your WordPress site to n8n workflows for intelligent AI-powered customer service chat automation.

BreznFlow vs BooPixel AI Chat Connect for n8n