Adding a RF tool to your website

Follow these steps to add a powerful but simple Cloud-RF powered RF coverage calculator to your website:

1. Get your API key

You will find your API key and UID on the homepage after you login to your account. You will need these later to allow you to use the Cloud-RF API from your website. Keep them safe as your API key is personal.

2. Get the example code

Copy the HTML code from here and upload it to your website with any filename you like and a html extension eg. my_form.html: https://github.com/Cloud-RF/CloudRF-API-clients/blob/master/html/embedded_map_form.html

3. Enter your credentials

Replace the ‘uid’ and ‘key’ values in the code with your own.

Replace the Google maps key at the top with your own – this is important if you want your map to work in the future. Get your key from Google for free: https://developers.google.com/maps/documentation/javascript/get-api-key

4. Customise your hardware!

Now the fun bit: Using the API schema (https://api.cloudrf.com) define your hardware profiles in the code using the two examples which have been created for you. When adding a profile, ensure the array (in square brackets) below the list of profiles is updated accordingly. There is no limit to how many profiles you want to define.

var hardware=[profile1,profile2];

Edit the HTML form near the bottom of the file to set your names for the profile. The ‘value’ in the select list must be a number (starting 0) but the text can be whatever you like eg. ‘BIG RADIO WITH BIG ANTENNA’.

5. Advanced use – adding your own input boxes

The example defines location, Tx height and a profile. Suppose you want to define an azimuth for a directional antenna? In this case you could add a row to the HTML form as follows:

 <tr><td>Direction<td><input size="5" type="text" id="azi" value="0">deg

Then to ensure it gets sent with the request you need to grab it in the Javascript by adding a line in the calculate() function below where it sets the Tx height field:

 ob.txh = document.getElementById("txh").value;
 ob.azi = document.getElementById("azi").value;

Publishing

Once your masterpiece is ready embed it in your website with an iframe:

<iframe src="masterpiece.html" width="800px" height="600px"></iframe>

Lastly we recommend letting us know you have published your API key so we can lock your API to a single server (your website). You want your customers to use the form but not to take your API key and spend your credits from home – or their website(s)!