ClipCrowKit JS SDK

The official JavaScript Bridge SDK for ClipCrow Essential Workware. This library provides a unified interface to access native device features from within a WebView or IFrame, supporting both Mobile (Android/iOS) and Web environments.

Installation

npm install clipcrow-kit
# or
yarn add clipcrow-kit

Hybrid Mode (Web + Mobile)

This SDK is designed to work in a Hybrid Environment:

1. On Web (Browser):

   • Communication happens via window.parent.postMessage.
   • The Parent Window (Flutter Web) listens and responds.
   • Requirement: You MUST properly import this SDK in your Guest Page.

2. On Mobile (WebView):

   • Communication happens via EwWebViewChannel.
   • Smart Injection: The App will attempt to inject this SDK automatically. However, if you have already imported it (via NPM or CDN), the App will detect it and skip injection to prevent conflicts.
   • Requirement: Works out-of-the-box, but importing via NPM is recommended for type safety and consistency.

Usage

Quick Start (React / Vue)

Check if ClipCrowKit is available before using it (though it's usually safe to import).

import { ClipCrowKit } from "clipcrow-kit";

// Check availability (optional but good practice)
if (typeof ClipCrowKit !== "undefined") {
  console.log("ClipCrowKit is ready!");
}

Quick Start (HTML / Vanilla JS)

If you are not using a bundler, you can use the built-in browser bundle via CDN.

<script src="https://cdn.jsdelivr.net/npm/clipcrow-kit/dist/ClipCrowKit.js"></script>
<script>
  window.addEventListener("ClipCrowKitReady", () => {
    ClipCrowKit.openCamera().then(console.log);
  });
</script>

📖 API Reference

All methods return a Promise. You should use async/await for cleaner code.

ClipCrowKit.inApp

Returns true if the page is currently running inside the ClipCrow environment (Mobile App or Web App IFrame), and false if running in a standard browser.

if (ClipCrowKit.inApp) {
  // Safe to call SDK methods
  await ClipCrowKit.openCamera();
} else {
  // Show fallback UI or message
  alert("Please open in ClipCrow app");
}

🧭 Navigation

openNavigationDrawer()

Opens the app's navigation drawer menu.

ClipCrowKit.openNavigationDrawer();

Returns: void

openWebView(url)

Opens an external URL in a new in-app browser window.

const result = await ClipCrowKit.openWebView("https://example.com");
console.log(result.success); // true or false

Returns: { success: boolean }

📷 Camera & Media

openCamera()

Launches native camera to capture a photo.

try {
  const result = await ClipCrowKit.openCamera();
  if (result.image) {
    console.log("Captured Image (Base64):", result.image);
  } else {
    console.log("User cancelled camera");
  }
} catch (error) {
  console.error("Failed to open camera:", error);
}

Returns: { image: string | null } (Base64 encoded string)

openPhotoLibrary()

Opens device photo gallery to pick an image.

const result = await ClipCrowKit.openPhotoLibrary();
if (result.image) {
  console.log("Selected Image:", result.image);
}

Returns: { image: string | null } (Base64 encoded string)

📋 Data & Records

getPageContext(options?)

Get current page context info including icon and title.

• options: { size?: number } (default: 128)

// Get page info with 64px icon image
const info = await ClipCrowKit.getPageContext({ size: 64 });
console.log(`Title: ${info.title}, Serial No: ${info.serial_no}`);
// info.pict contains base64 image string

Returns: { pict: string, title: string, serial_no: string }

openTextInputHistory()

Opens the user's text input history screen and returns the selected text.

const result = await ClipCrowKit.openTextInputHistory();
console.log("Selected text:", result.text);

Returns: { text: string | null }

📍 Location

getLocation()

Get current GPS coordinates.

const loc = await ClipCrowKit.getLocation();
console.log("Lat:", loc.position.latitude);
console.log("Lng:", loc.position.longitude);

Returns: { position: { latitude: number, longitude: number, ... } }

💬 Communication

openChat()

Opens the chat interface for the current context.

ClipCrowKit.openChat();

Returns: void

getPageTitle()

Fetches current page title.

const result = await ClipCrowKit.getPageTitle();
console.log("Page Title:", result.chats);

Returns: { chats: string }

openShare()

Opens the native share dialog with current page/record deep link.

ClipCrowKit.openShare();

Returns: void

openPhoneDialer(phoneNumber)

Opens the phone dialer with the specified number.

const result = await ClipCrowKit.openPhoneDialer("0901234567");
if (result.success) {
  console.log("Dialer opened");
}

Returns: { success: boolean, phone_number: string }

openEmailEditor(options)

Opens the email composition window with pre-filled fields.

const result = await ClipCrowKit.openEmailEditor({
  to: "[email protected]",
  subject: "Meeting follow-up",
  body: "Thank you for the meeting.",
  cc: "[email protected]",
  bcc: "",
});
console.log(result.success); // true or false

• options: { to: string, subject: string, body: string, cc?: string, bcc?: string } Returns: { success: boolean }

⚙️ Device & System

getLayoutInfo()

Retrieves comprehensive device screen and platform information.

const screen = await ClipCrowKit.getLayoutInfo();
console.log("Platform:", screen.platform); // 'ios' | 'android' | 'web'
console.log("Lanes:", screen.number_of_lanes);
console.log("Lane Width:", screen.lane_width);
console.log("Menu Shape:", screen.menu_shape); // 'drawer' | 'rail' | 'fixedDrawer'

Returns: { platform: string, number_of_lanes: number, lane_width: number, menu_shape: string }

openNotificationSettings()

Opens the system application settings for notifications.

const result = await ClipCrowKit.openNotificationSettings();
console.log(result.success);

Returns: { success: boolean }

For Contributors

This repository is part of the ClipCrow monorepo.

• Dev Mode: make dev
• Build for NPM: make build
• Sync to Flutter: make build-flutter (Copies IIFE bundle to flutter/assets/js/ClipCrowKit.js)
• Publish: make publish (Automatic version bump not included)
• Publish with Bump: make publish-patch, make publish-minor, make publish-major