Webtask

Documentation

Webtask Widget

Embed webtasks in your website

For customized documentation and ready to run samples, please log in.

About

The Auth0 Webtask Widget enables you to perform various operations on webtasks and CRON jobs from your website by embedding it. Using it you can:

  • List CRON jobs
  • Create or edit webtasks and CRON jobs
  • Stream logs for a container

Versions

The widget is automatically published to our CDN. Every non-prerelease version will create three assets:

Setup

To setup the widget clone this repository and using a terminal in this directory run the following commands:

$ npm install
$ npm run develop

This starts webpack-dev-server at http://localhost:8080. The script will watch all dependencies and recompile on changes. You can find more details on the build process here.

Login

The function showLogin() creates a widget that allows users to obtain Webtask credentials. You can customize its appearance by displaying it as a modal dialog, setting the url of the Webtask cluster to be used, specify a token, etc. You can view the various parameters you can use here. If the [options.token] parameter is not set, then the SMS/email login flow will be triggered. The user will have to provide a mobile phone number or an email address where a code will be sent. This code should afterwards be used to login.

webtask-widget-login

List CRON jobs

The function showCronListing() can be used to list CRON jobs associated with the active profile. The function can receive as input a number of options in order to customize the behaviour and appearance of the widget. You can view the various parameters you can use here. For example, the snippet below invokes the function using the parameter mount to indicate where the widget should be mounted: document.getElementById('cron-jobs'). Furthermore, the parameter storeProfile is set to true. This means that after the user logs in using phone # or email address, the credentials will be saved locally for the next time they visit. If the user hasn't logged in yet, then the showLogin() function will be invoked.

var cronJobs = window.webtaskWidget.showCronListing({
  mount: document.getElementById('cron-jobs'),
  storeProfile: true,
});

webtask-widget-list-cron

Edit webtasks and CRON jobs

The function showEditor() can be used to create or edit Webtasks and CRON jobs. The function can receive as input a number of options in order to customize the behaviour and appearance of the widget. You can view the various parameters you can use here. For example, the snippet below customizes the widget as follows:

  • Mounts the widget at the HTML element editor
  • Saves the user credentials locally
  • Loads a widget for editing: hello
var editor = window.webtaskWidget.showEditor({
  mount: document.getElementById('editor'),
  storeProfile: true,
  edit: 'hello',
});

webtask-widget-editor

Stream logs

The function showLogs() can be used to stream logs for a container. The function can receive as input a number of options in order to customize the behaviour and appearance of the widget. You can view the various parameters you can use here. For example, the snippet below invokes the function using the parameter mount to indicate where the widget should be mounted: document.getElementById('logs'). Furthermore, the parameter storeProfile is set to true in order to save locally the user's credentials.

var logs = window.webtaskWidget.showLogs({
  mount: document.getElementById('logs'),
  storeProfile: true,
});

webtask-widget-stream-logs