Quick View Messaging System

Quick Views makes use of a third party plugin called Zoid to provide the Quick View Messaging System, which allows your Quick View code to communicate between ActiveCampaign and your external APIs, providing a dynamic user experience.

Installing Zoid

The Quick Views Messaging System requires Zoid >9.0.85 as a dependency. You can import Zoid during development using npm or reference it directly in your index.html file as a script tag using a third party CDN such as unpkg.

npm install zoid

or

<script src='https://unpkg.com/[email protected]/dist/zoid.frameworks.js'/>

Once the Zoid script has been loaded using one of the above methods, add the following code to your Javascript to create a Zoid instance for your Quick View app. The tag should match the name that you used to create your Quick View in App Studio.

const load_zoid = () => {
  zoid.create({
    tag: "TAG_NEEDS_TO_MATCH_APP_STUDIO_NAME",
    url: window.location.href
  });
}

document.onload = load_zoid;

Accessing Data with window.xprops

The Quick View Messaging System allows you to access the following data and functions using window.xprops in your Javascript.

data

The window.xprops.data object is a data representation of the native ActiveCampaign item that your Quick View is related to. For example, if your Quick View's Display Page is Accounts, then window.xprops.data will be an Account object. The window.xprops.data object is populated via the ActiveCampaign v3 API. Please refer to the API Reference for more information and examples:

• Accounts
• Contacts
• Deals

connection_data

The window.xprops.connection_data array is a list of active connections to your app on the current user's account. You will need to pass the correct connection_id into the proxy API calls. This can be found as the id value on the connection object in the window.xprops.connection_data array.

let connection = window.xprops.connection_data;

console.log(connection);

/*
[
    {
        "id": "xxxxx-xxxx-xxxx-xxx-xxxxxxx",
        "state": "CONNECTED",
        "ac": {
            "user_id": 1,
            "account_id": 000000,
            "account_name": "account.activehosted.com",
            "account_api_url": "https://000000.account.api-us1.com"
        },
        "service": {
            "name": "Your App Name",
            "account_id": "123"
        },
        "display_name": "Connection Display Name",
        "app_version": "xxxxx-xxxx-xxxxx-xx-xxxxxx",
        "subdomain": ""
    }
]
*/

Proxy API Functions

Function Parameters

There are four Proxy API functions that can be used to make authenticated API calls from your Quick View, either to your own service or to the ActiveCampaign v3 APIs. Due to the asynchronous nature of API calls, these functions return a Promise so your code must be able to handle a Promise response or it may result in errors. Each of these functions require similar parameters:

url string

The API URL that you are calling.

connection_id string

The id for the connection that you will be using. This can be found in the window.xprops.connection_data array.

toAC boolean

(Depricated, please use target instead) This should be true if the API call is being made to the ActiveCampaign API, false if it is to your API.

target string

The target of the API call. Currently supports values of activecampaign, connection, or external

headers string (optional)

The optional headers parameter can be added to the postDataProxy or putDataProxy functions. The default value for this parameter will be { 'Content-Type': 'application/json' } but can be overridden if needed.

body object

The data body for the API call. This is only required for POST and PUT calls.

postDataViaProxy()

This function allows you to make authenticated HTTP POST requests from your Quick View app to external API endpoints.

const url = "https://api.example.com/v1/endpoint";
const connectionId = window.xprops.connection_data[0].id;
const target = "connection";
const body = {
 name: "Mary",
 emailaddress: "[email protected]"
};

let response = await window.xprops.postDataViaProxy(url, connection_id, target, body);
console.log(response);

postDataViaProxy() (with optional headers parameter)

const url = "https://api.example.com/v1/endpoint";
const connectionId = window.xprops.connection_data[0].id;
const target = "connection";
const body = {
 name: "Mary",
 emailaddress: "[email protected]"
};
const headers = {
  "Content-Type": "application/json",
  "A-Header-Name": "some_value"
}

let response = await window.xprops.postDataViaProxy(url, connection_id, target, body, headers);
console.log(response);

getDataViaProxy()

This function allows you to make authenticated HTTP GET requests from your Quick View app to external API endpoints.

const url = "https://api.example.com/v1/endpoint";
const connectionId = window.xprops.connection_data[0].id;
const target = "connection";

let response = await window.xprops.getDataViaProxy(url, connection_id, target);
console.log(response);

putDataViaProxy()

This function allows you to make authenticated HTTP PUT requests from your Quick View app to external API endpoints.

const url = "https://api.example.com/v1/endpoint";
const connectionId = window.xprops.connection_data[0].id;
const target = "connection";
const body = {
 id: 121,
 emailaddress: "[email protected]"
};

let response = await window.xprops.putDataViaProxy(url, connection_id, target, body);
console.log(response);

deleteViaProxy()

const url = "https://api.example.com/v1/endpoint";
const connectionId = window.xprops.connection_data[0].id;
const target = "connection";

let response = await window.xprops.deleteDataViaProxy(url, connection_id, target);
console.log(response);