Skip to main content

Web Components

Overview​

The Web Components SDK allows developers to build custom applications and integrate prebuilt widgets directly into their applications and dashboards without additional development effort. This allows developers to use the widgets that are already available in the Robot Automation portal dashboards in their own applications.

Generate an App ID and Secret​

To get started, you will need to have a valid token to authenticate the web components widgets. You can do this by setting up a service account in the DroneDeploy platform and using the generated token to authenticate your requests. See applications for more information.

Import the Web Component library​

In your HTML file, include the web component library by adding the following script tag:

<script src="https://components-automate.dronedeploy.com/web-components.js"></script>

Then add the custom element to your HTML file where you want the widget to be rendered.

e.g. for the WHEP video widget:

<rc-whep-video></rc-whep-video>

The web component is a custom HTML element that can be included in your HTML file. The web component will be loaded asynchronously and will render the widget in the location where the custom element is placed.

Configuring the web component​

To configure the component you should have a valid Client ID and Secret, you will also need to configure the project ID and callsign for that robot and some configuration for the web component.

Here is an example of a component that will render the video widget for a docked drone:

<script src="https://components-automate.dronedeploy.com/web-components.js"></script>

<rc-whep-video></rc-whep-video>

<script>
  const e = document.querySelector('rc-whep-video');

  e.callsign = '[UPDATE CALLSIGN HERE]'; // Robot callsign
  e.projectid = '[UPDATE PROJECT ID HERE]';
  // Widget configuration
  e.config = JSON.stringify({
    "title": "Dock",
    "stream": "dock",  // dock, payload, or fpv (if dock 1)
    "logLevel": "error",
    "connect": "always" // will always attempt to connect to the stream
  });
  e.sdk = JSON.stringify({
    // Generate App ID and secret
    appId: '[UPDATE APP ID HERE]',
    appKey: '[UPDATE APP SECRET HERE]',
    url: 'api-automate.dronedeploy.com',
  })
</script>

This should render:

WHEP Video Widget