Documentation
HomeAPISign In
  • Getting Started
    • Overview
      • Core Concepts
      • Building your First Workflow
    • API Reference
  • Your Data
    • Brand Kits
    • Knowledge Bases
      • Add Data
        • Upload Files
        • Web Scrape
        • Import from Google Drive
        • Import from SQL Database
        • Import from Shopify
      • Knowledge Base Search
      • Knowledge Base Metadata
      • Knowledge Base API
  • Building Workflows
    • Workflow Concepts
      • Workflow Inputs
        • Input Types
      • Workflow Outputs
      • Variable Referencing
      • Liquid Templating
    • Workflow Steps
      • AI
        • Prompt LLM
          • Model Selection Guide
          • Prompting Guide
        • Transcribe Audio File
      • Web Research
        • Google Search
        • Web Page Scrape
      • Code
        • Run Code
        • Call API
        • Format JSON
        • Run SQL Query
        • Write Liquid Text
      • Flow
        • Condition
        • Iteration
        • Human Review
        • Content Comparison
        • Error
      • Data
        • Read from Grid
        • Write to Grid
        • Search Knowledge Base
        • Write to Knowledge Base
        • Get Knowledge Base File
      • AirOps
        • Workflow
        • Agent
      • Image & Video
        • Generate Image with API
        • Search Stock Images
        • Fetch Stock Image with ID
        • Resize Image
        • Screenshot from URL
        • Create OpenGraph Image
        • Create Video Avatar
      • SEO Research
        • Semrush
        • Data4SEO
      • Content Quality
        • Detect AI Content
        • Scan Content for Plagiarism
      • Content Processing
        • Convert Markdown to HTML
        • Convert PDF URL to Text
        • Group Keywords into Clusters
      • B2B Enrichment
        • Hunter.io
        • People Data Labs
      • CMS Integrations
        • Webflow
        • WordPress
        • Shopify
        • Contentful
        • Sanity
        • Strapi
      • Analytics Integrations
        • Google Search Console
      • Collaboration Integrations
        • Gmail
        • Google Docs
        • Google Sheets
        • Notion
        • Slack
    • Testing and Iteration
    • Publishing and Versioning
  • Running Workflows
    • Run Once
    • Run in Bulk (Grid)
    • Run via API
    • Run via Trigger
      • Incoming Webhook Trigger
      • Zapier
    • Run on a Schedule
    • Error Handling
  • Grids
    • Create a Grid
      • Import from Webflow
      • Import from Wordpress
      • Import from Semrush
      • Import from Google Search Console
    • Add Columns in the Grid
    • Run Workflows in the Grid
      • Add Workflow Column
      • Run Workflow Column
      • Map Workflow Outputs
      • Review Workflow Run Metadata
    • Review Content in the Grid
      • Review Markdown Content
      • Review HTML Content
      • Compare Content Difference
    • Publish to CMS from Grid
    • Pull Analytics in the Grid
    • Export as CSV
  • Copilot
    • Chat with Copilot
    • Edit Workflows with Copilot
    • Fix Errors with Copilot
  • Monitoring
    • Task Usage
    • Analytics
    • Alerts
    • Execution History
  • Your Workspace
    • Create a Workspace
    • Folders
    • Settings
    • Billing
    • Use your own LLM API Keys
    • Secrets
    • Team and Permissions
  • Chat Agents (Legacy)
    • Agent Quick Start
    • Chat Agents
    • Integrate Agents
      • Widget
      • Client Web SDK
  • About
    • Ethical AI and IP Production
    • Principles
    • Security and Compliance
Powered by GitBook
On this page
  • Public AirOps Chat Agent
  • Private AirOps Chat Agent
  • AirOps App with Variables
  • Programmatically Initialize
  • Overview of Attributes

Was this helpful?

  1. Chat Agents (Legacy)
  2. Integrate Agents

Widget

Integrate an agent app on your website with a widget

Public AirOps Chat Agent

Add the following HTML:

<div
    data-airops-widget="<APP-UUID>"
    data-airops-init="true"
></div>
<script src="https://assets.airops.com/widget/index.js"></script>

Private AirOps Chat Agent

Private AirOps Agents require authentication using three pieces of information:

  • Workspace ID

  • User ID (an identifier for the user in your application)

  • Hashed User ID

Here's how to hash the User ID using your workspace's API key on your back-end server.

require "openssl"

def user_id_hash
  api_key = "YOUR_API_KEY" # your workspace token (keep safe!)
  user_id = "YOUR_USER_ID"

  # Convert your api key to bytes
  key = api_key.encode("utf-8")

  # Hash the message using HMAC-SHA256 and the key
  hash = OpenSSL::HMAC.hexdigest('sha256', key, user_id)
end
import hashlib

def user_id_hash():
  api_key = "YOUR_API_KEY" # your workspace token (keep safe!)
  user_id = "YOUR_USER_ID"

  # Convert your api key to bytes
  key = bytes(api_key, 'utf-8')

  # Hash the message using HMAC-SHA256 and the key
  hash = hashlib.sha256(key + bytes(user_id, 'utf-8')).hexdigest()
  return hash
const crypto = require('crypto');

const userIdHash = () => {
  const apiKey = "YOUR_API_KEY"; // your workspace token (keep safe!)
  const userId = "YOUR_USER_ID";

  // Convert your api key to a buffer
  const key = Buffer.from(apiKey, 'utf-8');

  // Hash the message using HMAC-SHA256 and the key
  const hash = crypto.createHmac('sha256', key)
  .update(userId)
  .digest('hex');

  return hash;
}
<div
    data-airops-widget="<APP-UUID>"
    data-airops-init="true"
    data-airops-hashed-user-id="<HASHED-USER-ID>"
    data-airops-user-id="<USER-ID>"
    data-airops-workspace-id="<WORKSPACE-ID>"
></div>
<script src="https://assets.airops.com/widget/index.js"></script>

AirOps App with Variables

Let's assume that the AirOps App we are going to integrate requires the following variables:

  • first_name

  • last_name

<div
    data-airops-widget="<APP-UUID"
    data-airops-init="true"
    data-airops-first_name="Nicolas"
    data-airops-last_name="Tinte"
></div>
<script src="https://assets.airops.com/widget/index.js"></script>

Programmatically Initialize

If you need to fetch your hashed user id from a server or gather user input as variables, you may prefer not to initialize the widget automatically. Use the following:

<div
    data-airops-widget="<APP-UUID>"
></div>
<script src="https://assets.airops.com/widget/index.js"></script>

Then, you will have a global window.AirOps object that has the following signature:

type InitializeArg = {
  auth?: {
    hashedUserId?: string;
    userId?: string;
    workspaceId?: number;
  };
  variables: Record<string, string>;
};

window.AirOps = {
  appType?: 'chat';
  error?: string;
  intialize: (arg: InitializeArg) => void;
  deactivate: () => void;
  methods: {
    close: () => void;
    open: () => void;
    toggle: () => void;
    setVariables: (variables: Record<string, string>) => void;
  },
  status: 'not-initialized' | 'initializing' | 'initialized' | 'missing-variables' | 'error';
}

So, you can do:

window.AirOps.initialize({ auth : { YOUR_AUTH_DATA }, variables: { YOU_VARIABLES } });
// note that both auth and variables are not required for this.

Overview of Attributes

  • data-airops-widget: Specifies the AirOps App's UUID to be used.

  • data-airops-init: Set this attribute to "true" to initialize the widget on page load.

  • data-airops-variable-*: Use this to pass a value for the variable * when executing the AirOps App.

  • data-airops-hashed-user-id: The unique hashed User ID, generated using the API key of your workspace on your back-end server.

  • data-airops-user-id: The identifier for the user in your application, used in conjunction with the API key to generate the hashed User ID.

  • data-airops-workspace-id: Your workspace ID, which is specific to your AirOps environment and can be found in your workspace settings.

Last updated 2 months ago

Was this helpful?