npm - @superleapai/flow-ui - Versions diffs - 1.0.1 → 2.1.1 - Mend

@superleapai/flow-ui 1.0.1 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -18,13 +18,13 @@ npm install @superleapai/flow-ui
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" href="node_modules/@superleapai/flow-ui/dist/output.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@superleapai/flow-ui@latest/dist/output.css">
 </head>
 <body>
   <div id="app"></div>
   <!-- Single script tag - includes SuperLeap SDK and all components -->
-  <script src="node_modules/@superleapai/flow-ui/index.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@superleapai/flow-ui@latest/index.js"></script>
   <script>
     // Wait for library to be ready
@@ -75,34 +75,179 @@ npm install @superleapai/flow-ui
 </html>
 ```
-### ES Module Usage
+## 🔌 CRM Embedded Usage (Inside iframes)
-```javascript
-import { FlowUI, SuperLeap } from '@superleapai/flow-ui';
+When your flow is embedded in the SuperLeap CRM as an iframe, use `SuperLeap.connect()` to establish a secure connection. This automatically provides credentials and context without requiring hardcoded API keys.
-// Initialize SuperLeap SDK
-SuperLeap.init({ apiKey: 'YOUR_KEY' });
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@superleapai/flow-ui@latest/dist/output.css">
+</head>
+<body>
+  <div id="app"></div>
-// Initialize state
-FlowUI.initState({ name: '', email: '' });
+  <script src="https://cdn.jsdelivr.net/npm/@superleapai/flow-ui@latest/index.js"></script>
-// Create components
-const nameInput = FlowUI.createInput({
-  label: 'Name',
-  fieldId: 'name',
-  required: true
+  <script>
+    document.addEventListener('superleap-flow:ready', async function() {
+      try {
+        // Connect to CRM - SDK is auto-initialized with credentials
+        // flowId must match the custom_id of your iframe component in the CRM
+        const { context, config } = await SuperLeap.connect({
+          flowId: 'my-onboarding-flow' // Use the custom_id from your iframe component
+        });
+        // Access CRM context (orgId, userId, recordId, etc.)
+        console.log('Organization:', context.orgId);
+        console.log('Current User:', context.userId);
+        console.log('Record ID:', context.recordId); // if in record context
+        // Initialize your form state
+        FlowUI.initState({
+          name: '',
+          email: '',
+          // Pre-fill with context data if needed
+          accountId: context.recordId
+        });
+        // Build your UI
+        const app = document.getElementById('app');
+        const screen = FlowUI.createScreen('Onboarding', 'Complete your profile');
+        const grid = FlowUI.createGrid();
+        grid.appendChild(FlowUI.createInput({
+          label: 'Name',
+          fieldId: 'name',
+          required: true
+        }));
+        grid.appendChild(FlowUI.createInput({
+          label: 'Email',
+          fieldId: 'email',
+          type: 'email',
+          required: true
+        }));
+        const submitBtn = FlowUI.createButton({
+          variant: 'primary',
+          text: 'Submit',
+          onClick: async () => {
+            const data = FlowUI.getState();
+            // Show loading in CRM
+            SuperLeap.setLoading(true);
+            try {
+              // Your business logic here
+              const sdk = SuperLeap.getSdk();
+              await sdk.records.create('contacts', data);
+              // Show success notification in CRM
+              SuperLeap.toast('Profile created successfully!', 'success');
+              // Close the form/modal
+              SuperLeap.closeForm();
+            } catch (error) {
+              SuperLeap.toast('Failed to create profile', 'error');
+            } finally {
+              SuperLeap.setLoading(false);
+            }
+          }
+        });
+        screen.appendChild(grid);
+        screen.appendChild(submitBtn);
+        app.appendChild(screen);
+      } catch (error) {
+        console.error('Failed to connect to CRM:', error);
+      }
+    });
+  </script>
+</body>
+</html>
+```
+#### CRM Bridge API
+**Connect to CRM:**
+```javascript
+const { context, config } = await SuperLeap.connect({
+  flowId: 'my-flow',         // Required: the custom_id of your iframe component in CRM
+  crmOrigin: 'https://...',  // Optional: validate CRM origin
+  autoInit: true,            // Optional: auto-initialize SDK (default: true)
+  timeout: 5000              // Optional: connection timeout in ms (default: 5000)
 });
 ```
-### CommonJS Usage
+**Access CRM Context:**
+```javascript
+const context = SuperLeap.getContext();
+// {
+//   orgId: string,
+//   userId: string,
+//   recordId?: string,        // Present if iframe is in a record view
+//   objectSlug?: string,      // e.g., 'accounts', 'contacts'
+//   formId?: string,
+//   componentId?: string
+// }
+```
+**CRM Actions:**
 ```javascript
-const { FlowUI, SuperLeap } = require('@superleapai/flow-ui');
+// Show/hide loading overlay in CRM
+SuperLeap.setLoading(true);
+SuperLeap.setLoading(false);
-SuperLeap.init({ apiKey: 'YOUR_KEY' });
-FlowUI.initState({ name: '' });
+// Close the current form/modal in CRM
+SuperLeap.closeForm();
+// Show toast notification in CRM
+SuperLeap.toast('Success!', 'success', 3000);
+SuperLeap.toast('Error occurred', 'error');
+SuperLeap.toast('Warning message', 'warning');
+SuperLeap.toast('Info message', 'info');
+// Navigate to a path in CRM
+SuperLeap.navigate('/records/contacts/123');
+```
+**Custom Events (CRM ↔ Iframe Communication):**
+```javascript
+// Send custom event to CRM
+SuperLeap.send('form-submitted', { values: {...} });
+SuperLeap.send('validation-failed', { errors: [...] });
+// Listen for custom events from CRM
+const unsubscribe = SuperLeap.on('prefill-data', (data) => {
+  FlowUI.setState(data);
+});
+// Remove listener
+SuperLeap.off('prefill-data', callbackFunction);
+// Or use unsubscribe function
+unsubscribe();
+```
+**Check Connection Status:**
+```javascript
+if (SuperLeap.isConnected()) {
+  // Connected to CRM
+}
 ```
+**Disconnect:**
+```javascript
+SuperLeap.disconnect();
+```
+#### React Native WebView Support
+The bridge automatically detects and supports React Native WebView environments. No configuration changes needed - use the same API as shown above.
 ## 🎯 What's Exposed
 ```javascript