ProductWidget DesignerWorkflowsDocsPricing
Design your widget
Widget designer

Design your widget, copy the snippet

Every control below drives the real widget bundle, live, right on this page. When it looks right, copy the snippet and paste it into your site.

Connection

Used only in the generated snippet below — the live preview on this page always talks to a sandboxed demo backend so it works without real credentials.

Theme

Maps 1:1 to FluxChatWidgetConfig.theme.

Behavior

Live preview

The real widget bundle is mounted on this page right now, using the theme settings on the left. Click the chat bubble in the bottom-right corner to try it.

Embed this on your site

Live today
<script>
  window.FluxChatWidgetConfig = {
    apiKey: "YOUR_API_KEY",
    baseUrl: "https://your-n8n-instance.example.com",
    theme: {
      position: "bottom-right",
      title: "Chat Sandbox",
      welcomeMessage: "Hi! Ask me anything about our products.",
      borderRadius: 16,
    },
  };
</script>
<script src="https://your-host/inspireui-n8n-chat-widget.min.js" async></script>
WordPress
  1. Go to Appearance → Theme File Editor → footer.php (or use a header/footer plugin's Footer field).
  2. Paste both <script> tags right before the closing </body> tag.
  3. Save. Add a version query string to the script URL on every rebuild so caching plugins don't serve a stale copy.
Shopify
  1. Go to Online Store → Themes → Edit code → layout/theme.liquid.
  2. Paste both <script> tags just above the closing </body> tag.
  3. Save the file.
Wix
  1. Go to Settings → Advanced → Custom Code.
  2. Add a new code snippet, paste both <script> tags, and set it to load on all pages, in the Body — end position.
Squarespace
  1. Go to Settings → Advanced → Code Injection.
  2. Paste both <script> tags into the Footer field and save.
Webflow
  1. Go to Project Settings → Custom Code → Footer Code.
  2. Paste both <script> tags and publish your site.
Plain HTML
  1. Paste both <script> tags directly into your .html file, right before </body>.