Creating a Custom Webapp

How to leverage our SDK and add a custom Webapp to your TelemetryTV account.

Kelli avatar
Written by Kelli
Updated over a week ago

TelemetryTV's Software Development Kit (SDK) will allow you to create a Webapp, with your own custom code written in HTML, Javascript and CSS. This feature allows you the freedom to deploy almost anything you want on your digital signage displays.

Once your Webapp is created you can easily save it to your account for future use, with custom fields that can be quickly updated.

Are you a developer? Click here for our technical documentation on using our SDK.

Our Webapp feature will allows you to input custom code to create custom content. Like the other apps in our app library, a Webapp can be deployed as its own playlist page, or as an app within a playlist zone.

How to Create a Custom Webapp

To start using the Webapp, log into your TelemetryTV account.

From the left hand task bar, select "Webapps" and click "Create".

Enter the app name, choose an icon that best represents the features of your app and click "Next".

Add your own custom code written in HTML, Javascript and CSS to the middle of the screen and use the "preview" tab as needed.

You can toggle on (shown below) "Share with Affiliates", to share the app with your affiliate accounts.

You can also add argument values and utilize them as needed (shown below).

When you're done, click "Save" to publish your new app!


How to Embed Microsoft PowerBI HTML Links into TelemetryTV's Webapps Feature

If you want to display Microsoft PowerBI HTML links in your TelemetryTV digital signage displays, you can use our Webapp feature. Our Software Development Kit (SDK) allows you to create a Webapp with your own custom code written in HTML, Javascript, or CSS.

Once you've created your PowerBI - Webapp, you can easily save it to your account for future use, with custom fields that can be quickly updated.

Adding Custom Code to Your Webapp

To embed Microsoft PowerBI HTML links into your TelemetryTV digital signage displays, you'll need to add to your Microsoft PowerBI HTML link to a new Webapp.

For more information on how to obtain an HTML code from Microsoft PowerBI visit this link

Add your PowerBI HTML code to the window.

Please Note: You can toggle on "Share with Affiliates" to share the app with your affiliate accounts.

Saving Your Webapp

When you're done adding your custom code, click "Save" to publish your new Webapp. Your PowerBI file can be deployed as its own playlist page, or as an app within a playlist zone.

By following these steps, you can embed Microsoft PowerBI HTML links into your TelemetryTV digital signage displays using our Webapp feature. If you have any questions or run into any issues, please contact our support team for assistance.


Using an iFrame with the TelemetryTV Webapp to embed a OneDrive document

iFrames will allow you to embed content within a slide of your TelemetryTV playlist using the HTML app or the HTML overlay SDK. Often Software platforms may have an embed option where users can copy and paste HTML code from their application.

While TelemetryTV offers a powerful suite with many different turnkey app integrations ready to hand, the HTML SDK allows users to embed an iframe of plethora of embeddable software applications. These range from desktop publishing and data visualization dashboards to audio to multimedia streaming platforms.

CSS styling integration can enable you to customize and fit the content as desired, or even remove content entirely i.e. hiding an audio player embedded in the HTML overlay.

Embedding an OneDrive document using an HTML Code

  1. Open the document

  2. Click on the Menu

  3. Select Embed

5. Copy the HTML Embed Code

Inserting the iFrame code in TelemetryTV

6. Go to Webapps in the TelemetryTV Desktop App and click "Create Webapp"

7. Name the Webapp and click "create"

8. Paste in the "code" field from One Drive.

Example

<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
</style>

<iframe src="https://onedrive.live.com/embed?cid=123123123123&amp;resid=12123123123%123123123123&amp;authkey=abc123abc123-OBo&amp;em=2&amp;wdStartOn=1" height="100%" width="100%" margin="0" allowfullscreen frameborder="0" position="relative"></iframe>

☝️ Note: This <style> code will ensure that the iFrame is responsive and matches the screens attached to your signage players. You can click on Preview to verify your code.

9. Click on confirm

Did this answer your question?