OD2 Workflow Viewer - Public CDN Integration

📦 Quick Start - External CDN

Include the OD2 Workflow Viewer in your website using our public CDN:

      <!-- Include CSS from OD2 CDN -->
<link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">

<!-- Include JavaScript from OD2 CDN -->
<script src="https://od2.in/api-wd/workflow-viewer.js"></script>

<!-- Create container -->
<div id="workflow-container" style="height: 400px;"></div>

<!-- Simple API - just pass container ID and JSON data -->
<script>
  // Your workflow data
  const workflowData = {
    name: "My Workflow",
    nodes: [...],
    edges: [...]
  };
  
  // Render the workflow
  od2ApiWorkflowRenderer('workflow-container', workflowData);
</script>
    

📦 Local Development

If you're working on the OD2 site itself, use relative paths:

      <!-- For local OD2 development -->
<link rel="stylesheet" href="/api-wd/workflow-viewer.css">
<script src="/api-wd/workflow-viewer.js"></script>
    

🎨 Live Demo

Interactive workflow viewer with theme switching:

⚙️ Usage Options

Simple API (Recommended)

For basic embedding, use the global od2ApiWorkflowRenderer function:

      // Basic usage
od2ApiWorkflowRenderer('container-id', workflowData);

// With options
od2ApiWorkflowRenderer('container-id', workflowData, {
  theme: 'dark',
  height: '600px',
  interactive: true,
  showControls: true
});
    

Advanced API

For more control, use the full OD2WorkflowViewer API:

      OD2WorkflowViewer.render({
  container: '#workflow-container',     // CSS selector or DOM element
  workflowUrl: '/path/to/workflow.json', // URL to workflow JSON file
  // OR
  workflow: workflowData,               // Direct workflow data object
  
  // Display options
  theme: 'light',                       // 'light', 'dark', or 'auto'
  width: '100%',                        // Container width
  height: '400px',                      // Container height
  
  // Interaction options
  interactive: true,                    // Enable pan/zoom/drag
  showControls: true,                   // Show zoom controls
  fitView: true,                        // Auto-fit workflow to container
  
  // Event handlers
  onNodeClick: function(node) {
    console.log('Node clicked:', node);
  }
});
    

🔗 CDN URLs

Use these public CDN URLs to include the workflow viewer in any website:

      CSS: https://od2.in/api-wd/workflow-viewer.css
JS:  https://od2.in/api-wd/workflow-viewer.js
    

Benefits of using OD2 CDN:

✅ No external dependencies - host everything yourself
✅ Consistent availability from od2.in
✅ Fast global delivery
✅ Privacy friendly (no tracking)
✅ Always up-to-date with latest features
✅ Free to use for any project

🌐 Copy-Paste Integration

      <!-- Copy this into your <head> -->
<link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">

<!-- Copy this before </body> -->
<script src="https://od2.in/api-wd/workflow-viewer.js"></script>
    

📝 Integration Examples

Basic HTML Integration

      <!DOCTYPE html>
<html>
<head>
  <title>My Workflow App</title>
  <link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">
</head>
<body>
  <h1>My API Workflow</h1>
  <div id="my-workflow" style="height: 500px;"></div>
  
  <script src="https://od2.in/api-wd/workflow-viewer.js"></script>
  <script>
    // Simple API usage
    od2ApiWorkflowRenderer('my-workflow', {
      name: "Payment Flow",
      nodes: [
        {
          id: "1",
          position: { x: 100, y: 100 },
          data: {
            name: "Validate Payment",
            method: "POST",
            path: "/api/payments/validate"
          }
        }
        // ... more nodes
      ],
      edges: [/* your edges */]
    });
  </script>
</body>
</html>
    

React Integration

      // First, add the CDN link to your public/index.html:
// <link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">
// <script src="https://od2.in/api-wd/workflow-viewer.js"></script>

import { useEffect, useRef } from 'react';

function WorkflowDisplay({ workflowData }) {
  const containerRef = useRef(null);
  
  useEffect(() => {
    if (containerRef.current && workflowData && window.od2ApiWorkflowRenderer) {
      od2ApiWorkflowRenderer(containerRef.current, workflowData, {
        theme: 'auto',
        height: '400px'
      });
    }
  }, [workflowData]);
  
  return <div ref={containerRef} style={{ height: '400px' }} />;
}
    

Vue.js Integration

      // First, add to your public/index.html:
// <link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">
// <script src="https://od2.in/api-wd/workflow-viewer.js"></script>

<template>
  <div ref="workflowContainer" style="height: 400px;"></div>
</template>

<script>
export default {
  props: ['workflowData'],
  mounted() {
    if (this.workflowData && window.od2ApiWorkflowRenderer) {
      od2ApiWorkflowRenderer(this.$refs.workflowContainer, this.workflowData, {
        theme: 'light'
      });
    }
  }
}
</script>
    

🔄 OD2 Workflow Viewer - Public CDN Integration