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.

wpdesk

<p>★★★★★</p>
<h3>The best way to connect AI chatbots to WordPress and WooCommerce</h3>
<p>Do you want to add an AI assistant, customer support bot, or automated chat to your WooCommerce store or WordPress site?<br />
The <strong>Flexible Chat</strong> plugin lets you:</p>
<p>– Seamlessly connect any n8n HTTP webhook endpoint to a beautiful frontend chat interface.<br />
– Engage users with real-time streaming responses (like ChatGPT).<br />
– Route conversations effectively by asking visitors to select a topic before chatting.<br />
– Fully customize the chat appearance, colors, texts, and behavior without any coding.</p>
<h3>Key features</h3>
<p>– <strong>Seamless Webhook Integration:</strong> Connects instantly to your n8n workflows via a simple webhook URL.<br />
– <strong>Streaming Responses:</strong> Show bot responses in real-time as they are being generated for a faster, more engaging user experience.<br />
– <strong>Topic Routing:</strong> Suggest conversation topics (e.g., “Sales”, “Support”) and send the selected topic to your backend to route the chat to the right AI agent.<br />
– <strong>File Uploads:</strong> Allow users to share files and images, with strict MIME type security restrictions.<br />
– <strong>Message Feedback:</strong> Enable 👍 / 👎 buttons under bot responses so users can rate the AI’s answers.<br />
– <strong>Persistent Chat History:</strong> Remember conversation history across sessions so users don’t lose context when navigating your site.<br />
– <strong>Custom Metadata:</strong> Send advanced context data to n8n with every message (e.g., user ID, current page, or subscription plan) using a custom JSON payload.<br />
– <strong>Compliance Notice:</strong> Add an AI disclosure or privacy reminder right below the chat input.</p>
<h3>Advanced Customization</h3>
<p>– <strong>Brand Colors & Typography:</strong> Built-in color pickers for primary colors, backgrounds, and text, with automatic contrast adjustments. Adjust font sizes and border radius to match your theme.<br />
– <strong>Custom Texts & Welcome Messages:</strong> Tailor the window header, subtitles, input placeholders, and initial bot greeting messages.<br />
– <strong>Window & Toggle Sizing:</strong> Adjust the exact width and height of the open chat window, and choose between small, normal, or large floating toggle buttons.<br />
– <strong>Developer Friendly:</strong> Fully restyle the widget using CSS custom properties (variables) or deterministic class hooks. Features a DI-driven architecture and Vite dev-server support for local HMR.</p>
<h3>🛠 Easy setup – no coding required</h3>
<ol>
<li>Install and activate the plugin.</li>
<li>Go to <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Flexible Chat Settings</strong>.</li>
<li>Paste your n8n Webhook URL in the General tab.</li>
<li>Customize your colors, texts, and welcome messages.</li>
<li>Save changes – and your chat widget is live!</li>
</ol>
<h3>📚 Documentation & Support</h3>
<p>If you have questions or need assistance, please use the <a href="https://wordpress.org/support/plugin/flexible-chat/" rel="ugc"><strong>official plugin forums</strong></a> at WP.org.</p>
<h3>Why choose Flexible Chat?</h3>
<p>– 100% free core features.<br />
– Built and maintained by the trusted WP Desk team.<br />
– Highly optimized, lightweight React-based frontend.<br />
– Compatible with the latest WordPress and WooCommerce versions.<br />
– Actively developed and secure.</p>
<h3>🔒 Data use policy</h3>
<p>Learn more about our <a href="https://wpdesk.net/use-of-data-policy/" rel="nofollow ugc">Use of Data Policy by WP Desk Plugins</a></p>
<p>Download it for free today and bring powerful automation directly to your WordPress frontend!</p>


Flexible Chat

Meet Flexible Chat. A lightweight, fully customizable bridge between your WordPress site and your n8n AI workflows.

BreznFlow vs Flexible Chat