Embedding Network Status widgets on external sites

Follow

Overview

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.

Have more questions? Submit a request

Comments

  • Avatar
    Gudmundur Thor Reynisson

    I can't get this to work - do I need to enable something. I want to create a single page where I can get an overview of my networks and this seems perfect for it, but it just doesn't seem to work.

    I've tried copying your code snippet over and just changed the key, token and network ID - but no luck...

  • Avatar
    Ryan Detwiller

    This script can be generated in CloudTrax under Advanced > Embeds. Can you create a ticket with the network name and the URL you are embedded it on so we can take a look?

  • Avatar
    Gudmundur Thor Reynisson

    Will do

  • Avatar
    Joshua Klingbeil

    Is there an API for accessing (for the purpose of long-term archival) the available history directly? I know there are tools (like Peter Rukavina's "archive-usage-data.php) on git but I'm looking to collect and store more information (actually scrubbing identifying info like device names and MACs - but that's in the BL) for future retrieval/reporting/statistics generation on an annual basis.

    Basically, we'd like to extend the functionality of Peter's script, in a way that "might" be more durable, and with the understanding that it could change in the future and we'd need to adjust to match that change.

    Thanks!

    • Joshua

    Thanks

  • Avatar
    Ryan Detwiller

    Hi Joshua - we have something in the works that I think will address your need (and more).

  • Avatar
    Joshua Klingbeil

    That's great to know. Until that is available, are there any options immediately available to us to help with our automation of the collection of daily statistics?

    Thanks again,

    • Joshua
  • Avatar
    Lawson Joseph

    Is there a way to embed the network diagram?

  • Avatar
    Ryan Detwiller

    @Lawson - No, not at this time.

  • Avatar
    Nick Jones

    Hi.. this works great. I know you mentioned that the css wasn't supported but how are we to guess the class names? Your example to remove the mac address is .mac where the header name is actually mac/ip. I've managed to guess some but not others... How can we remove "Ping Latency", "Mesh Speed" and "version" or even make our own show hide like you have. Also while we're talking about it is there any way to get the table to display all results without paging?

  • Avatar
    Ryan Detwiller

    Hi @Nick - you should be able to view class names with your browser's developer tools.

  • Avatar
    Joshua Brown

    When I embed a map the vertical aspect of the map is very short. How do I change the size of the map being embedded? Thank you!

  • Avatar
    Ryan Detwiller

    Hi Joshua, you can adjust any of the style settings through CSS. I believe the map is called "cloudtrax-NetworkMap" so you could add a style like .cloudtrax-NetworkMap { height: 500px;}

  • Avatar
    Francis Crossen

    Hi Ryan, Any news on the API? In particular a way to retrieve the MAC address of a connected device?

  • Avatar
    Manly Electronics

    Hi. Can script be implement on a customer’s page without Cloudtrax references at all or at least without Cloudtrax logo?

  • Avatar
    Ryan Detwiller

    @Francis - it's still in the works.

  • Avatar
    Johan

    Hi Ryan, I cannot get my map to go bigger either. Could you perhaps provide the full code required. Thanks

  • Avatar
    WifiWiz
  • Avatar
    Joshua Brown

    Here's the link of code I did to make the map taller. I was not familiar with CSS, so I did not know what to add from the comments above. I exact line below made my map much better. Knowing this format, it's relatively easy to adjust more options with it.

    So I just added style="height: 500px;" to the normal line you get form CloudTrax. You can Google other CSS (style) options like "height:" to work with it in different ways. This is specifically "inline CSS".

  • Avatar
    Marcos Santos

    Any possibility to allow change time period in the charts? For example, 1 month chart, etc?

  • Avatar
    Bryan Patterson

    Marcos - You can override the default 24hr behavior by specifying the timeframe on each div like so: '' <div class="cloudtrax-NetworkHistogram" data-period="month"></div> ''

     
    Edited by Bryan Patterson
  • Avatar
    Xeata

    Awesome; it is simple and effective.

Powered by Zendesk