Runly UI HTML Integration

This integration is intended for maximum ease-of-use for server-rendered pages that have very little scripting already on the page. It uses Bootstrap to style the components and can be included on your page with simple script/css tags.

Setup

Include the script on your page from the Runly CDN:

<script type="text/javascript" src="https://cdn.runly.io/v1.0.0/runly.js"></script>

Ideally you should include the script as the last tag before the closing </body>.

You will also need to include the Bootstrap css on the page for the components to be styled correctly. You can include this from Bootstrap’s CDN:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

You should include the Bootstrap css in the head of your page.

RunProgress

The RunProgress component allows you to show a progress bar indicating a run’s status for a particular run. Once a run has completed, the component will optionally render a Retry button to rerun a job that has failed (either partially or fully). See the retry mechanism in action in our example web application walkthrough.

<div
	data-runly-component="RunProgress"
	data-runly-token="my-public-api-key"
	data-runly-org="myorg"
	data-runly-run-id="myrunid">Loading run results...</div>

Anything you put inside the div will show before the script loads. Once the script has loaded, the contents will be replaced with the progress bar.

Data Attributes

data-runly-component

This is the component that you want to render. This should always be RunProgress to render the run progress component.

data-runly-org

The organization ID that the run belongs to.

data-runly-run-id

The ID of the run to show progress.

data-runly-allowRetry

Boolean flag that controls whether or not the component will show a Retry button if the run partially or fully fails. This defaults to true.

A run is considered failed if it completes with any status other than Successful. If the run does complete with a status of Successful but there are some failed items, this is considered a partial failure and the Retry button will render. Learn more about how Runly jobs can finish successfully while tolerating failures.