Workflon
Docs
Integrating Workflon

Integrating Workflon

Embed and configure the Workflon widget into your web application.

You've defined what your copilot can do (Actions) and what it knows (Context). Now it's time to bring it to life inside your application. Integration is a two-step process: adding a script to your HTML and configuring it with client-side JavaScript.

Integration Steps

1. Get Your Script Tag

Navigate to the Script Snippet tab in your dashboard. You will find a personalized <script> tag that includes your app's unique Public API Key.

It will look like this:

<script src="https://workflon.com/api/script/[YOUR_PUBLIC_KEY]"></script>

2. Add the Script to Your App

Copy the entire script tag and paste it into your application's main HTML file, just before the closing </body> tag. This script will asynchronously load the Workflon widget and make a global Workflon object available on the window.

<!doctype html>
<html>
   <head>
     ... </head
  >
  <body>
     ...
    <script src="https://workflon.com/api/script/[YOUR_PUBLIC_KEY]"></script>
 
  </body>
 
</html>

3. Configure Your Actions

In your client-side JavaScript, you need to tell Workflon what functions to execute when the AI decides to call an action. You do this with Workflon.setActions.

The keys in the object you pass must match the Action Keys you defined in the dashboard.

Workflon.setActions({
  createTask: ({ title, assigneeId, dueDate }) => {
    // Your application's logic to create a task
    console.log("Creating task:", { title, assigneeId, dueDate });
    // Example: myProjectApi.createTask({ title, assigneeId, dueDate });
  },
  // ... other actions
});

4. Provide User Context

The actual data that matches the schema you created in the "Context" tab. Use the Workflon.setUserContext method. This data should be dynamic and reflect what the current user has access to.

const currentUser = { id: "usr_123", name: "John Doe" };
const teamMembers = [
  { id: "usr_123", name: "John Doe", email: "john@example.com" },
  { id: "usr_456", name: "Jane Smith", email: "jane@example.com" },
];
 
Workflon.setUserContext({
  // The key 'users' must match the Context Item Name from your dashboard
  users: teamMembers,
  // You can add other context items here
  // projects: [...],
});

5. Control the Widget

You can programmatically show or hide the copilot widget.

// To open the widget
Workflon.show();
 
// To close the widget
Workflon.hide();

Complete Integration Example

Here is a complete example of how you might initialize Workflon in your application's main JavaScript file.

// Wait for the Workflon object to be available
function initializeCopilot() {
  if (window.Workflon) {
    // 1. Define action handlers
    const actionHandlers = {
      createTask: ({ title, assigneeId, dueDate }) => {
        // This is where you call your app's actual API or function
        console.log("Executing createTask:", { title, assigneeId, dueDate });
        alert(`Task "${title}" created!`);
      },
      // Add other action handlers here
    };
 
    Workflon.setActions(actionHandlers);
 
    // 2. Provide dynamic context data
    const teamMembers = [
      { id: "usr_123", name: "John Doe", email: "john@example.com" },
      { id: "usr_456", name: "Jane Smith", email: "jane@example.com" },
    ];
 
    Workflon.setUserContext({
      users: teamMembers,
    });
 
    console.log("Workflon initialized successfully!");
  } else {
    // Retry if the script hasn't loaded yet
    setTimeout(initializeCopilot, 100);
  }
}
 
// Start the initialization process
initializeCopilot();
 
// You can later bind Workflon.show() to a button in your UI
// document.getElementById('my-ai-button').onclick = () => Workflon.show();

Security Reminder: Never expose your Secret API Key in client-side code. The script tag uses your Public API Key, which is designed to be safely used in browsers.

That's it! Your custom AI copilot is now integrated and ready to assist your users.

Configuring Context