Widget

Introduction

Easily integrate AirOps apps into your website with our streamlined widget. This guide will lead you through each step of the integration process, covering different scenarios such as public and private AirOps Apps, integrating Apps with variables, and programmatic initialization.

Usage

For a public AirOps App

<div
    data-airops-widget="<APP-UUID"
    data-airops-init="true"
></div>
<link rel="stylesheet" type="text/css" href="https://assets.airops.com/widget/index.css" />
<script src="https://assets.airops.com/widget/index.js"></script>

For a private AirOps App

Private AirOps Apps 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.

Example backend configuration

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>
<link rel="stylesheet" type="text/css" href="https://assets.airops.com/widget/index.css" />
<script src="https://assets.airops.com/widget/index.js"></script>

For an 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>
<link rel="stylesheet" type="text/css" href="https://assets.airops.com/widget/index.css" />
<script src="https://assets.airops.com/widget/index.js"></script>

Programitcally 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>
<link rel="stylesheet" type="text/css" href="https://assets.airops.com/widget/index.css" />
<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;
  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.

Attributes Overview

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.

Need help?

Join our AirOps builder slack community.