How to create a workflow

In TeleportHQ, you create a workflow from the Workflows panel in the editor's left sidebar: click + (Add Workflow), replace the starting trigger with the one you need, then add steps below it with the round + button. The workflow is saved in your project and runs on your site after you publish.

Before you start#

• Workflows are a web app feature. If your project is a website (a Presentation Website), creating any workflow first asks you to enable web app features, which is permanent and removes code download. This happens even for a workflow that would only change a state on the page. To show, hide or switch something on a click without making a web app, use a state instead. See What are workflows? and How to store and use values with States.
• To make a specific button or form do something, it's faster to start from the element. See How to run a workflow when a button is clicked.

Steps#

This example builds a workflow that shows a thank-you message and opens a Thank you page when a bakery's Order cake form is sent.

1. Create the workflow#

1. Open your project in the TeleportHQ editor.
2. In the left sidebar, click the Workflows icon (a small branching graph). The Workflows panel opens. The first time, a Welcome to Workflows! window offers a tour: click Show Me to take it, or Maybe Later.

3. At the top of the panel, click + (tooltip Add Workflow). In a project with no workflows, you can also click Add workflow in the middle of the panel.

   

4. If a window titled Enable Web App features? appears, read it, then click Enable Web App features. To stop, click Keep as a Presentation Website: nothing changes.

5. A workflow called Untitled Workflow opens on the canvas. It already has a Page is Loaded trigger and a separate Workflow Error box.

   

6. In the header above the canvas, click the pencil (tooltip Edit workflow name), type a name that says what it does, for example Order cake form sent, and press Enter.

2. Choose the trigger#

1. On the canvas, right-click the Page is Loaded box. You can also point at the box and click its … button (tooltip Node options).

2. Click Replace node type. The Replace Node Type menu lists the trigger categories.

   

3. Point at Actions, then click Form is Submitted in the list that opens beside the menu.
4. Click the new trigger box. In the right panel, on the Node Properties tab, open Form and pick your form. Forms are listed by name and page, for example Order cake (Home).

3. Add steps#

1. Click the round + under the trigger (tooltip Add node). It always shows under the last step; point at any other step to see its own.
2. In the Add Node menu, type toast in Search nodes..., point at Toast, then click Show Toast.
3. Click the Show Toast box. In Node Properties, type a Message, for example Thanks! We'll confirm your cake by email. Set Type to success.
4. Click the round + under Show Toast, search for page, point at Navigation and click Go to Page.
5. In Node Properties, set Target Page to your Thank you page.

Steps with an END badge in the menu, such as Go to Page, must be the last step in the workflow.

4. Publish#

1. Click Close (the × at the top right of the workflow editor).
2. Publish your site. See How to publish a web app.

Copy, paste and tidy steps#

The TeleportHQ workflow canvas can copy steps within a project:

• Copy or duplicate a step: right-click it and choose Copy or Duplicate. Duplicate places a copy beside the original. With a step selected, you can also press ⌘C, ⌘V and ⌘D (Ctrl+C, Ctrl+V and Ctrl+D on Windows). Delete or Backspace removes the selected steps.
• Paste: after you copy, a Paste button appears at the top right of the canvas (tooltip "Paste copied steps (⌘V)"). The pasted steps land in the middle of the view, connected to each other but not to the rest of the workflow. Drag from the dot under a step to the top of a pasted step to connect them. You can paste into another workflow of the same project, but not into another project.
• Tidy layout: at the top right of the canvas, click Tidy layout to arrange every step top to bottom, with branches to the right.

While a step is selected, its Context box covers the top right of the canvas, including Paste and Tidy layout. Click an empty part of the canvas first.

The trigger and the Workflow Error box can't be copied.

Check that it worked#

• In the Workflows panel, your workflow appears as a card with its name and the number of nodes. It has no Not exported badge.
• On your published site, send the Order cake form. The thank-you message appears and the Thank you page opens.

Troubleshooting#

The card shows a "Not exported" badge The workflow can't run on your site yet. Point at the badge to read why. A new workflow usually shows "Its page-load trigger is not bound to a page — pick a page (or "all pages") in the trigger settings to include it in the published app." Click the trigger and pick a page, or All pages, under Target Page, or replace the trigger as in part 2.

A step is greyed out in the menu with "Can only be used as the last node in a workflow" That step, such as Go to Page or Log Out, must come last. Add it after your other steps.

An orange warning icon appears on a step The step is missing settings. Point at the icon to see the Configuration Incomplete list. See Why does my workflow show missing configuration or security warnings?.

"Some pasted steps read data from steps that are not in this workflow: … Update their settings." The steps you pasted used data from steps you didn't copy. Open each named step and pick its values again. See How to use data from one workflow step in the next.

"These steps need a browser, and this workflow runs on a schedule on the server." You tried to paste browser steps, such as Show Toast, into a scheduled workflow. The same happens in a webhook workflow. Paste them into a workflow that a visitor starts.

I don't see a workflow in the list Workflows created by the admin panel are hidden by default. Click the filter button next to Search workflows... and untick Hide admin panel workflows (N). The count in the panel's title, Workflows (N), only counts the workflows shown.

When the filter button carries a small orange warning icon (tooltip "Some workflows need attention"), at least one workflow needs fixing, hidden admin panel workflows included. Click the filter button and choose Misconfigured (N) to list them. See Why does my workflow show missing configuration or security warnings?.

Good to know#

• Undo and redo buttons are in the workflow editor header.
• Rename a step: right-click it and choose Rename, or double-click its name. Clear names help you and the AI Assistant.
• Remove a step: right-click it and choose Delete node. The trigger can't be deleted; use Replace node type instead.
• Pause a workflow: on its card in the Workflows panel, click the pause button (tooltip "Disable workflow (keep it in the project, exclude it from the published app)"). It stays in the project with a Disabled badge but isn't included in your published site. Click play to enable it again.
• Delete a workflow: on its card, click the trash icon (Delete workflow), then Delete Workflow. This can't be undone.
• Organize many workflows: in the editor header, click Add label to add up to 5 labels per workflow, then use the filter button next to Search workflows....
• No button duplicates a whole workflow. To reuse one, create a new workflow, set its trigger, then copy the steps from the first workflow and paste them in.