HTML / Vanilla JS

CloudTables can be easily embedded into a page using a simple <script> tag. This can be embedded into your HTML directly, or injected by Javascript if you prefer.

Use

To embed the data set in your HTML page where you want the CloudTable to appear use:

<script
	src="https://sub-domain.cloudtables.io/loader/{datasetId}/table/d"

	<!-- access / security attributes -->
	data-apiKey="..."
	data-token="..."

	<!-- optional attributes -->
	data-clientId="..."
	data-clientName="..."
	data-condition="..."
	data-insert="..."
	data-role="..."
></script>

Where:

• {datasetId} - the ID of the data set you'd like to show (see the data set Embed tab for this information)

The access / security attributes are (note that only one of these should be used):

• data-token's value is the secure access token retrieved from a server-side processing
• data-apiKey's value is the API key which will allow access (and thus assign the roles that can be used for access). Please consider the security implications of using this parameter client-side since it can potentially allow access beyond what is specified for a given embed (see below).

Finally, the optional attributes are:

• data-clientId is a unique id for the client accessing the table on your system. This is optional, but useful for tracking requests in CloudTables' analytics. For example you might use web as the id if you embed it in a public web-page, or an id specific to that page.
• data-clientName can be a non-unique token to identify the user (e.g. their name).
• data-condition denotes the condition(s) to apply to data being fetched. Please see the embedding conditions documentation for full details. This parameter must be valid JSON - it can either be an object for a single condition or an array for multiple conditions. Please consider the security implications of using this parameter client-side since it can be easily overridden (see below).
• data-insert can be used to tell CloudTables where to insert the table into the page. By default it will place the table immediately after the <script> tag used to embed it, but you may wish it to go somewhere else. The value given in data-insert will be matched to another element which has a data-ct-insert attribute with the same value - e.g. this could be an empty <div>.
• data-role defines the access role(s) to define the level of access to be applied. This parameter can be a string for a single parameter or a JSON array of strings for multiple roles. See the client security model documentation for more information about access roles. Please consider the security implications of using this parameter client-side since it can be easily overridden (see below).

Security

When embedding CloudTables into your application, you can use either a secure access token which is generated by a server-side program, or by embedding your access key directly into the tags.

API token

We strongly recommend using a server generated secure access token as it will be tied to a single user's session and cannot be reused by anyone else who might intercept the key, or provide any access beyond that specified by the server.

To generate a secure access token use one of our server-side clients (HTTP REST / cURL, Java, .NET, NodeJS, PHP). The token is then used in the <script> tag through the data-token attribute.

API key (server-less)

With this method the API access is embedded directly into <script> tag through the data-apiKey attribute, but it means the full access of that key is available to the client and therefore should be used with care and could maliciously be used elsewhere if the key grants access to other data sets. It is however, easier to setup and thus can be useful for development or deployment with read-only keys.