Legacy Open Mesh: How Do I Embed Network Status Widgets on External Sites?

Question

How do I embed network status widgets on external sites?

Environment

  • CloudTrax

Answer

As part of CloudTrax's white-label capability, users have the option to embed most elements visible under Network Status into external sites. This is helpful for service providers who want to allow clients to check their network without providing access to CloudTrax.

Currently, the following widgets can be embedded:

  • Network map
  • 24h client table
  • 24h upload/download/clients histogram
  • Access point table
  • Access point table (compact)
  • Layer 7 data pie chart (5xx+ firmware)
  • Layer 7 data table (5xx+ firmware)
  • Site survey table

Deployment

1. Include the CloudTrax embed script on the desired page, with a valid key and token. This script can be generated in CloudTrax under Configure > Display > External Embeds. This tag is only required once per page. Multiple occurrences will not be destructive but aren't necessary.

<script data-key="abc" data-token="123" data-network-id="1" src="https://embed.cloudtrax.com/v1.js"></script>


2. Add one or more CloudTrax DIV elements to the desired page. Duplicates are allowed.

<!-- pie chart of layer 7 data --><div class="cloudtrax-ApplicationPieChart"></div><!-- table of layer 7 data --><div class="cloudtrax-ApplicationTable"></div><!-- up/down/clients for given network over 24h period --><div class="cloudtrax-NetworkHistogram"></div><!-- google map with nodes on it --><div class="cloudtrax-NetworkMap"></div><!-- table of all access points --><div class="cloudtrax-NodeTable"></div><!-- table of all access points with some columns removed for a more compact width --><div class="cloudtrax-NodeTableCompact"></div><!-- table of all network users --><div class="cloudtrax-ClientTable"></div><!-- table of other signals detected by the network --><div class="cloudtrax-SurveyTable"></div>

Options

Usage Timeframe

By default the timeframe for each DIV element is for the last day only, however you can change this default behavior (to last 30 days) by specifying the following on each div, like so:

<div class="cloudtrax-NetworkHistogram" data-period="month"></div>

CSS

It is possible to modify the styles of the embeds and show/hide certain columns. This should be considered an advanced feature that is not supported and may change in the future.

Here is an example to remove the MAC address from the node table:

.cloudtrax-NodeTableCompact .mac {
  display:none;
}

And to remove the OS type from the client table:

.cloudtrax-ClientTable .os {
  display:none;
}

Tokens

If one key/token is tied to one network, and the key/token can only appear once in the CloudTrax SCRIPT tag, then normally you would only be able to use these embeds with a single network per page. Each embed DIV, however, supports a "data-key" and "data-token" attribute also, which will take precedence over the one that appears in the SCRIPT tag. For example:

<script data-key="abc" data-token="123" data-network-id="1" src="https://embed.cloudtrax.com/v1.js"></script><!-- uses key/token abc/123, as specified by the SCRIPT tag above --><div class="cloudtrax-NodeTable"></div><!-- uses key/token xyz/246, as specified by the data-token attribute --><div class="cloudtrax-SurveyTable" data-key="xyz" data-token="246" data-network-id="2"></div>

Deactiviating embeds

Embeds can be permanently deactivated through CloudTrax by selecting the "Deactivate" checkbox. This action cannot be reversed. Deactivating the embed will permanently disable the current key and token and reactivation will create new ones.