Editor Integration Guide

The Extend Editor can be integrated into your product to provide your users with a first-class, web-based development experience for extensions. There are two ways to expose the Extend Editor to your users: you can host it as part of your own web site, or you can link to it and open it up as a stand-alone web application.

In either mode of integration, Extend Editor supports a range of configuration options to allow you to tailor it’s behavior.

Hosting the Editor in Your Web Site

The Extend Editor can be hosted within your own web site and customized to provide your users with the most streamlined, built-in experience. It can be added with just a few lines of script:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.auth0.com/auth0-extend/3/extend-editor.js"></script>
</head>
<body>
  <div id="extend-editor" style="height: 400px; width: 600px"></div>
  <script>
    ExtendEditor.create(document.getElementById('extend-editor'), {
      hostUrl: '{host_url}',
      webtaskContainer: '{webtask_container}',
      token: '{webtask_token}',
      webtaskName: 'webtask-sample',
      // If `webtask-sample` does not exist, Extend editor will create 
      // a webtask `webtask-sample` with a sample code.
      createIfNotExists: true 
    });
  </script>
</body>
</html>

The URL used above (https://cdn.auth0.com/auth0-extend/3/extend-editor.js) represents the latest version of the editor available in the 3.x version. You can specify a specific version by including the full URL. For example: https://cdn.auth0.com/auth0-extend/3.0.1/extend-editor.js. You can also request a specific patch level: https://cdn.auth0.com/auth0-extend/3.1/extend-editor.js. This version would automatically upgrade to 3.1.2 when and if it becomes available. You can keep track of the current version, and see fixes, at our changelog. In general, it is recommended that you use a specific version to ensure any breaking changes or side effects do not impact your production code.

In the typical situation, the Extend Editor would be presented to an authenticated user from the administration section of your web site, and the {webtask_container} and {webtask_token} would be specific to the tenant in your system they are managing. In a more general case, the {host_url}, {webtask_container}, and {webtask_token} are specific to the selected isolation scope.

See an Express handler that renders a page with the Extend Editor in a sample application.
See how the Extend Editor is embedded in the settings page in a sample application.

The minimal configuration above will display the Extend Editor using all the default options:

Default Extend Editor

Configuring Extend Editor

Several aspects of the Extend Editor can be controlled through the options object passed to it on initialization. See how the Extend Editor is configured in a sample application.

Configuration Options

Option Description
token* The webtask token the Extend Editor will use to authorize calls to Extend management APIs. This token is specific to the selected isolation scope. In the most common case it is a tenant webtask token.
webtaskContainer* The webtask container the Extend Editor will use when managing extensions. Similarly to the token, the webtask container is specific to the selected isolation scope. In the most common case it is specific to the tenant in your system.
webtaskName The name of the extension (webtask) the Extend Editor will load to enable the user to edit. In the integration pattern described in this guide, extensions are created in code before the Extend Editor is opened to edit them, which means you will always specify this parameter.
hostUrl The base URL of the Extend deployment to use. If you are an Extend customer, this will be a URL that is unique to you. If you are trying out Extend, you can get this parameter from this page. If not specified, defaults to https://sandbox.auth0-extend.com/.
theme The enumeration or URL to select the CSS that allows you to customize the look & feel of the Extend Editor. We provide two themes to choose from out of the box: light and dark. Alternatively, you can specify a URL to custom CSS with overrides of the default styles.
allowHashParams Determines whether individual configuration options can be overriden with hash parameters specified in the URL of the page where Extend Editor is hosted.
allowCreating Determines whether the user will be able to create new extensions. Setting this to false will only allow the user to edit the extension identified with webtaskName.
allowSwitching Determines whether the user will be able to switch the extension (webtask) being edited within the webtaskContainer. Set this to false if you want to only allow the user to edit a specific webtask.
allowUpdating Determines if changes the user makes can be saved.
allowAccessingLogs Determines whether the user can open the real-time logs panel to inspect the logs generated by code executing in their webtask container.
allowEditingSecrets Determines whether the user can open the secrets panel to add, edit, or inspect the secret configuration parameters associated with the edited extension.
allowEditingMeta Determines whether the user can open the metadata panel to add, edit, or inspect the metadata associated with the edited extension. Direct manipulation of metadata by end users is only required in advanced cases, so in most situations you will set this to false.
allowEditingSchedule Determines whether the user can manage the execution schedule for the extension. Extensions with an associated execution schedule are CRON jobs - they are automatically executed by the Extend runtime without having to be explicitly invoked from your platform.
allowEditingStorage Determines whether the user can manage storage for an extension.
allowRememberingLayout (v3+ only) Determines if the editor should remember the state of the editor when last used. This includes remembering open panels. The browser’s localStorage feature is used to remember these values. Defaults to true.
allowSwitchingTemplates Determines whether the user can switch to a different extension template when editing an existing extension. This is useful if you want to provide the user with a choice of extension templates, possibly addressing different use cases of using a specific extensibility point.
allowCreatingFromTemplate Determines whether the user can use the list of templates you specified as a basis for new extensions that create. This setting is only effective if allowCreating is set to true.
allowRenaming Determines whether the user can rename a webtask or not.
allowDeleting Determines whether the user can delete a webtask or not.
allowEditingDependencies Determines whether the user can edit npm dependencies or not.
categories Used to define default templates available when creating a new function.
preventClosingWindowIfDirty Determines if Extend editor should check for browser closing event.
createIfNotExists If webtaskName is provided, determines if Extend editor should create a webtask if the name provided does not exist.
functionEditor (v3+ only) Allows for deep customization of various features of the editor.

Header Options

Controls how the header is displayed. You can set this property to false if you want to hide the header completely.

Option Description
enabled Setting it to false will have the same effect as setting the header property itself to false: it will hide the header.
logoUrl URL to a logo to display on the header line. This allows you to white-label the Extend Editor to use your brand.

Toolbar Options

Controls how the toolbar is displayed. You can set this property to false if you want to hide the toolbar completely.

Option Description
enabled Setting it to false will have the same effect as setting the toolbar property itself to false: it will hide the toolbar.
displayName Setting this to false will hide the name of the edited extension (webtask).

Controls how the footer is displayed. You can set this property to false if you want to hide the footer completely.

Option Description
enabled Setting it to false will have the same effect as setting the footer property itself to false: it will hide the footer.
displayWebtaskUrl Settings this to false will hide the url of the current webtask.
displayWebtaskWeight Setting this to false will hide the weight meter (the current extension code size relative to the maximum allowed).
allowCustomItems Settings this to false will disallow editors to publish content to the footer.

Runner Options

Determines whether and how the editor displays the runner pane for executing the extensions. Set to false to disable the runner, or set to an object with options as outlined below.

Option Description
methods Array of HTTP methods the runner will allow the user to choose from.
explanation A short description of the purpose of the request.
sample Sample request payload to pre-populate the runner with.
expandLogs Automatically show logs when pressing run.
methodSelector Dertermines if the method selector will be visible or not.
headersEditor Determines whether and how the editor displays the HTTP request header section for executing the extensions. Set to false to disable the the ability to manipulate request headers, or set to an object with options as outlined below.
headersEditor.defaultHeaders A hash of header names to string header values or a function (ctx) => 'string' that maps webtask runtime context to a header value.
headersEditor.expand Automatically expand the headers section
paramsEditor Determines whether to show the query parameter editor for users to specify custom request headers.
paramsEditor.defaultParams A hash of params names to string params values.
paramsEditor.expand Automatically expand the params section
bodyEditor Determines whether and how the editor displays the HTTP request body editor section for executing the extensions. Set to false to disable the the ability to manipulate request body, or set to an object with options as outlined below.
bodyEditor.typeSelector Determines whether to show the request body type selector.
bodyEditor.defaultType Allowed types are raw, form-data, x-www-form-urlencoded.
bodyEditor.expand Automatically expand the body section
bodyEditor.rawTypeOptions.defaultMode Determines the default mode for editing a raw request body. Allowed values are json, xml, or text.
bodyEditor.rawTypeOptions.enabled Determines whether to allow the user to change the mode for editing the rawType option.

Expand Options

Determines which panels will be expanded when Extend Editor is displayed.

Option Description
left Determines which panel will be expanded at left. Allowed values are explorer, secrets, meta, dependencies, github, scheduler, templates.
right Determines which panel will be expanded at right. Allowed value runner.
bottom Determines which panel will be expanded at bottom. Allowed value logs.

Integration Options

Determines which external integrations are enabled.

Option Description
github If set to true, a user can connect to GitHub and select a file from one of their repos to use as their extension. Defaults to false.
// Enabling GitHub integration. 
var options = {
  integrations: {
    github:true 
  }
}

Configuration Options

Theme {string}

The default value is dark,

// Rendering Extend editor using light-theme. 
var options = {
  theme: 'light'
}

// Rendering Extend editor using dark-theme. 
var options = {
  theme: 'dark' // Default value
}

// Extend editor allows you to use a custom theme by pointing to a CSS file.
var options = {
  theme: 'https://cdn.auth0.com/webtask-editor/styles/develop/auth0-theme.css'
}

Examples of theme:

allowHashParams {boolean}

The default value is false.

var options = {
  allowHashParams: true
}

allowCreating {boolean}

The default value is false.

var options = {
  allowCreating: true
}

allowSwitching {boolean}

The default value is false.

var options = {
  allowSwitching: true
}

Examples of allowSwitching:

allowUpdating {boolean}

The default value is true,

var options = {
  allowUpdating: true
}

allowAccessingLogs {boolean}

The default value is true.

var options = {
  allowAccessingLogs: true
}

Example of allowAccessingLogs:

allowEditingSecrets {boolean}

The default value is true.

var options = {
  allowEditingSecrets: true
}

Examples of allowEditingSecrets:

allowEditingMeta {boolean}

The default value is true.

var options = {
  allowEditingMeta: true
}

Examples of allowEditingMeta:

allowEditingSchedule {boolean}

The default value is true.

var options = {
  allowEditingSchedule: true
}

allowEditingStorage {boolean}

The default value is false.

var options = {
  allowEditingStorage: true
}

allowRememberingLayout {boolean}

The default value is true.

var options = {
  allowRememberingLayout: true
}

This feature is only available if using Editor v3 or later.

allowSwitchingTemplates {boolean}

The default value is true.

var options = {
  allowSwitchingTemplates: true
}

allowCreatingFromTemplate {boolean}

The default value is false.

var options = {
  allowCreatingFromTemplate: true
}

allowRenaming {boolean}

The default value is false.

var options = {
  allowRenaming: true
}

allowDeleting {boolean}

The default value is false.

var options = {
  allowDeleting: true
}

allowEditingDependencies {boolean}

The default value is true.

var options = {
  allowEditingDependencies: true
}

Examples of allowEditingDependencies:

categories {array}

Categories allow you to define (and group) templates for new extensions. Each category has metadata describing it as well as a list of one or more templates. In order to keep the configuration object a bit smaller, the list of templates for a category can be supplied as a URL instead.

Category entries consist of these values:

  • name: The name of the category (required).
  • description: A description for the category (required).
  • default: If true, then the first template in this category will be used when selecting the “create empty” option. The first template is only used if no other one in the list of templates is marked as the default.
  • templates: An array of templates or a URL pointing to a JSON file.
  • icon: The icon to use when listing categories. It must come from the list defined here: http://styleguide.auth0.com/#/resources/icons and should be prefixed with wt-.

Each template object consists of:

  • name: The name of the template (required).
  • description: A description of the template.
  • meta: An object of key/value pairs used to populate metadata for the new extension. There is one special value here, wt-editor-template-instructions, which is used to provide some help on using the code.
  • default: If true, specifies that this template is used when selecting the “create empty” option.
  • secrets: An object of key/value pairs used to populate secrets for the new extension. Note that “real” secret values should not be used here as they will be visible to the end user.
  • author: An object containing a key for name (author’s name) and link (author’s web site).
  • code: Code for the template.

Here’s an example with inline code templates:

var categories = [
  {
    name:'Alpha', 
    description:'Alhpa Category is the best category',
    icon: 'wt-icon-717',
    templates:[
      {
        name:'a1',
        meta:{
          'ray':'1',
          'wt-editor-template-instructions':'do it like so'
        },
        secrets:{
          'password':'secret'
        },
        description:'The alpha one template',
        author:{
          name:'Ray Camden',
          link:'https://www.raymondcamden.com'
        },
        code:`
for(let i=0;i<10;i++) {
	console.log('awesome');
}
        `
        },
        {
          name:'alpha 2',
          meta:{
            'ray':'2'
          },
          secrets:{
            'password':'secret'
          },
          description:'The alpha DOH template',
          author:{
            name:'Ray Camden',
            link:'https://www.raymondcamden.com'
          },
          code:`
let x = 1;
let y = 2;
let z = x+y;
          `
            }
          ]
        },
        {
          name:'Beta', 
          description:'Beta Category is the best category',
          templates:[
            {
              name:'b1',
              description:'The beta one template',
              author:{
                name:'Ray Camden',
                link:'https://www.raymondcamden.com'
              },
              code:`
for(let i=0;i<10;i++) {
	console.log('awesome');
}
            `
        }
      ]
    }
  ];

If you specify a URL for the templates value, the format of the JSON should look like so:

{
  "templates":[
    //array of templates here
  ]
}

preventClosingWindowIfDirty {boolean}

The default value is true.

var options = {
  preventClosingWindowIfDirty: true
}

createIfNotExists {object}

The default value is false.

// If `my-webtask` does not exist, Extend editor will create 
// a webtask `my-webtask` with the following code:
//
//  module.exports = function(context, cb) {
//    cb(null, { hello: 'world' });
//  }; 

var options = {
  webtaskName: 'my-webtask',
  createIfNotExists: true
}
// If `my-webtask` does not exist, Extend editor will create 
// a webtask `my-webtask` with the code at `my-category`.`empty-function`.

var options = {
  webtaskName: 'my-webtask',
  createIfNotExists: {
    enabled: true,
    category: 'my-category'
  },
  categories: [{
    name: 'my-category',
    templates: [{
      default: true,
      name: 'empty-function',
      code: [
        'module.exports = function(context, cb) {',
        '  cb(null, { hello: \'world\' });',
        '};',
      ].join('\n')
    }]
  }]
}

functionEditor {object}

The functionEditor object allows for customization of core editor functions. Below is a complete example of every setting that can be modified. Beneath it we will call out items that need further explanation.

{
  "functionEditor": {
    "minimap": true,
    "fontSize": "13px",
    "mouseWheelZoom": true,
    "readOnly": false,
    "renderIndentGuides": true,
    "scrollBeyondLastLine": true,
    "wordWrap": "off",
    "tabWidth": "2",
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "disablePrettier": false,
    "disableEditingSettings": false,
    "disableSwitchingLanguage": false,
    "disableShowLanguage": false,
    "disableEditingLinterRules": true,
    "linter": {
      "enabled": false,
      "rules": {},
      "globals": {}
    },
    "snippets": {
      "enabled": true,
      "collection": [
        {
          "label": "snippet label",
          "value": "snippet code",
          "description": "snippet description"
        }
      ]
    },
    "autocompletion": {
      "enabled": true,
      "disableWebtaskCompletion": false,
      "disableNodeCompletion": false,
      "disabledNpmModulesCompletion": false,
      "collection": [
        {
          "name": "autocompletion name",
          "definition": "ts declaration"
        }
      ]
    }
  }
}

In the configuration option above, linter refers to ESLint support.

snippets allow for quick code entry. The value in label will be matched against user input and a suggestion will pop up. If the user accepts the suggestion, the code in value will be inserted. Here is an example of two defined snippets:

var options = {
  functionEditor:{
    snippets: {
    enabled: true,
    collection: [
      {
        label: "fi",
        value: "for(let i in x) { \n\n }",
        description: "for/in loop"
      },
      {
        label: "log",
        value: "console.log($0)",
        description: "console.log"
      },
      ]
    },
  }
}

Two snippets are defined here. If the user types fi, they will get a suggestion for the first snippet. The text in description will provide additional information about the snippet. Finally, the use of $0 in the second snippet defines where the cursor will be placed after the text is inserted.

This feature is only available if using Editor v3 or later.

Header Options

header {object}

Header options are grouped in the header property of the configuration object.

header.enabled {boolean}

The default value is false;

var options = {
  header: {
    enabled: true
  }
}

Example of header.enabled:

header.logoUrl {string}

var options = {
  header: {
    logoUrl: 'https://cdn.auth0.com/auth0-extend/assets/logo-dark.svg'
  }
}

Toolbar Options

toolbar {object}

Toolbar options are grouped in the toolbar property of the configuration object.

toolbar.enabled {boolean}

The default value is true.

var options = {
  toolbar: {
    enabled: true
  }
}

Examples of toolbar.enabled:

toolbar.displayName {boolean}

The default value is true.

var options = {
  toolbar: {
    displayName: false
  }
}

Example of toolbar.displayName:

Footer options are grouped in the footer property of the configuration object.

footer.enabled {boolean}

The default value is true.

var options = {
  footer: {
    enabled: true
  }
}

footer.displayWebtaskUrl {boolean}

The default value is false.

var options = {
  footer: {
    displayWebtaskUrl: true
  }
}

Example of displayWebtaskUrl:

footer.displayWebtaskWeight {boolean}

The default value is false.

var options = {
  footer: {
    displayWebtaskWeight: true
  }
}

Example of displayWebtaskWeight:

footer.allowCustomItems {boolean}

The default value is true.

var options = {
  footer: {
    allowCustomItems: false
  }
}

Runner Options

runner {object}

Runner options are grouped in the runner property of the configuration object.

methods {array}

var options = {
  runner: {
    methods: ['POST']
  }
};

NOTE: If there is only one method declared, the methodSelector prop will be set to false.

methodSelector {boolean}

The default value is true.

var options = {
  runner: {
    methodSelector: true
  }
};

explanation {string}

The default value is empty.

var options = {
  runner: {
    explanation: 'Here you will be able to simulate an ....'
  }
};

Example of explanation:

sample {string}

The default value is empty.

var options = {
  runner: {
    sample: [
      '{',
      ' "key": "value"',
      '}',
    ].join('\n')
  }
};

Example of sample:

expandLogs {boolean}

The default value is false.

var options = {
  runner: {
    expandLogs: true
  }
};

enabled {boolean}

The default value is true.

var options = {
  runner: {
    enabled: true
  }
};

headersEditor {object}

var options = {
  runner: {
    headersEditor: {
      enabled: true,
      defaultHeaders: {
        'Content-Type': 'application-json'
      },
      expand: true
    }
  }
};

Example of headersEditor:

paramsEditor {object}

var options = {
  runner: {
    paramsEditor: {
      enabled: true,
      defaultParams: {
        'q': 'name=john'
      },
      expand: true
    }
  }
};

Example of paramsEditor:

bodyEditor {object}

var options = {
  runner: {
    bodyEditor: {
      enabled: true,
      expand: true,
      typeSelector: false,
      defaultType: 'raw',
      rawTypeOptions: {
        enabled: true,
        defaultMode: 'json'
      }
    }
  }
};

Example of bodyEditor:

Expand Options

expand {object}

Expand options are grouped in the expand property of the configuration object.

expand.left {string}

var options = {
  expand: {
    left: 'secrets'
  }
}

expand.right {string}

var options = {
  expand: {
    right: 'runner'
  }
}

expand.bottom {string}

var options = {
  expand: {
    bottom: 'logs'
  }
}

Available versions

Production
  • https://cdn.auth0.com/auth0-extend/3/extend-editor.js
  • https://cdn.auth0.com/auth0-extend/3.0.1/extend-editor.js
Development
  • https://cdn.auth0.com/auth0-extend/develop/extend-editor.js

Controlling the Extend Editor

Along with customizing the Extend Editor via settings, the Editor can be interacted with by using a simple JavaScript API to perform various different actions. By using one core command, ExtendEditor.exec('command'), the following operations can be performed:

  • logs:open and logs:close (opens and closes the Logs panel)
  • secrets:open and secrets:close (opens and closes the Secrets panel)
  • meta:open and meta:close (opens and closes the Metadata panel)
  • scheduler:open and scheduler:close (opens and closes the Scheduler panel)
  • middleware:open and middleware:close (opens and closes the Middleware panel)
  • storage:open and storage:close (opens and closes the Storage panel)
  • runner:open and runner:close (opens and closes the Runner panel)
  • dependencies:open and dependencies:close (opens and closes the NPM modules panel)
  • save (saves the current extension)
  • close (closes the current extension)
  • rename (opens the rename UI)
  • delete (opens the delete extension UI)

As an example, this script demonstrates a simple “auto save” feature that executes a save call every 60 seconds.

window.setInterval(() => {
	ExtendEditor.exec('save');
	console.log('Extension automatically saved');
}, 60 * 1000);

This feature is only available if using Editor v3 or later.

Editor Events

The Extend Editor instance emits events that can be listened to and reacted to by your implementation. The general form of listening to an event looks like this:

ExtendEditor.on('didSaveWebtask', function(data) {
	console.log('the webtask was saved!');
});

Below are the events you can listen to as well as the data passed to them.

  • didLoadWebtask: { name: 'name of webtask'}
  • beforeRemoveWebtask: { name: 'name of webtask'}
  • didRemoveWebtask: { name: 'name of webtask'}
  • beforeSaveWebtask: { name: 'name of webtask'}
  • didSaveWebtask: { name: 'name of webtask'}
  • beforeRunWebtask: { data: 'raw data', headers: {}, method: 'http method', params: {}, url: 'url of webtask'}
  • didRunWebtask: { body: 'raw body', headers: {}, method: 'http method', status: 'result status code'}

You can also handle errors using a similar pattern:

ExtendEditor.on('error', function(error) {
	// awesome error handling code here
});

The data passed to the callback contains an error type value and more information about the error itself:

{
	type: 'error type',
	error: {} // raw error
}

Here are the possible types of errors that can be thrown:

  • cron:read: Error loading a cron.
  • cron:schdule: Error scheduling a cron.
  • cron:history: Error reading cron history.
  • cron:unschedule: Error unscheduling a cron.
  • cron:update: Error updating a cron.
  • storage:update: Error updating webtask storage.
  • storage:read: Error reading webtask storage.
  • webtask:delete: Error deleting a webtask.
  • webtask:create: Error creating a webtask.
  • webtask:update: Error updating a webtask.
  • webtask:inspect: Error inspecting a webtask.
  • webtask:load: Error loading a webtask.
  • editor:load: The function editor could not be loaded.
  • categories:load: Error loading remote categories.
  • config:load: Error loading remote configuration.

Installing from NPM

If you already have a React application, you can just add our NPM module to your project by doing:

npm install @auth0extend/extend-editor-react --save

Note: If you find a bug or you want to share something you’d like to change, you can file it here.

Usage

Configuration Options

Name Type Description Default value
settings Object Extend Editor configuration object. For more info click here. -
libUrl Integer The Url to the Extend Editor library. https://cdn.auth0.com/auth0-extend/3/extend-editor.js
on Object The handler for the Extend Editor events like didLoadWebtask. -
height Integer The height of the Extend Editor. 450px
width Integer The width of the Extend Editor. 100%

Examples

Following, you’ll find examples about how to use the different properties of the component.

Customizing the Editor
import React from 'react';
import { Component } from 'react';
import ExtendEditor from '@auth0extend/extend-editor-react';

export default class MyApp extends Component {
  render() {
    return (
      <div>
        <h1>My App</h1>
        <ExtendEditor
          settings={{
            hostUrl: 'your-auth0-extend-deployment-url',
            token: 'ey...',
            webtaskName: 'empty-function',
            theme: 'light',
            allowSwitching: false
          }}
          height={500}
        />
      </div>
    );
  }
}

Note: For more information about settings click here.

Attaching to events
import React from 'react';
import { Component } from 'react';
import ExtendEditor from '@auth0extend/extend-editor-react';

export default class MyApp extends Component {
  onEditorDidSaveWebtask(data) {
    console.log(data);
  }

  onEditorError(data) {
    console.log(data);
  }

  render() {
    return (
      <div>
        <h1>My App</h1>
        <ExtendEditor
          settings={{
            hostUrl: 'your-auth0-extend-deployment-url',
            token: 'ey...'
          }}
          on={{
            didSaveWebtask: this.onEditorDidSaveWebtask,
            error: this.onEditorError
          }}
        />
      </div>
    );
  }
}

Using Extend Editor as a Stand-Alone Web App

You can run the Extend Editor as a stand-alone web application instead of embedding it within your web site. A hosted version of the Extend Editor is already part of your Extend installation. You can access it using the following URL:

{host_url}/edit/{webtask_container}#/{webtask_name}/{webtask_token}

or without specifying the webtask_name

{host_url}/edit/{webtask_container}#/{webtask_token}

The {host_url}, {webtask_container}, {webtask_token}, and {webtask_name} parameters are the same as you would otherwise specify when hosting the editor in your web site.

NOTE: The URL contains the webtask token in the hash params, and as such care must be taken when sharing this URL. There is nothing that would prevent a security-unaware user from passing this URL around and therefore disclosing their webtask token.