How to run a workflow when a button is clicked

In TeleportHQ, you make a button do something by selecting it on the canvas and clicking On Click in the Workflows section at the top of the right panel. Choose Create new workflow, and TeleportHQ creates a workflow that starts when that button is clicked and opens it so you can add steps. The same section also runs workflows when an element scrolls into view, a form is submitted, an input changes, and on other browser events.

Before you start#

• Workflows are a web app feature. If your project is a presentation website (not a web app), clicking On Click, On Visible, More event types or Add workflow first opens the Enable Web App features? window. Enabling is permanent. It's asked for every workflow, even one that would only change a state. See What are workflows?.
• To open a menu, switch a tab or show something on a click without making a web app, don't use a workflow: change a state from the Events tab of the right panel. See How to store and use values with States.

Steps#

This example makes a bakery's Call us button copy the phone number and confirm it with a message.

1. Create the workflow from the button#

1. On the canvas, click the Call us button to select it.

2. In the right panel, on the Visual tab, find the Workflows section at the top. It says "No workflows linked to this element."

   

3. Click On Click.

4. If your project is a website, the Enable Web App features? window opens first. Read it, then click Enable Web App features. To stop, click Keep as a Presentation Website: nothing changes.

   

5. In the small menu, click Create new workflow ("Start from a fresh trigger").
6. The left sidebar switches to Workflows and the new workflow opens. It's named after the element's layer, for example Button Clicked. Its trigger, An Element is Clicked, is already linked to the button.

2. Add what the click should do#

1. Click the round + under the trigger (tooltip Add node).
2. Type clipboard in Search nodes..., point at Browser, then click Write Clipboard.
3. In the right panel, on Node Properties, type the Text, for example +1 555 0100.
4. Click the round + under Write Clipboard, then add Show Toast from Toast.
5. Set Message to Phone number copied and Type to success.
6. Publish your site. See How to publish a web app.

Other events you can use#

In the Workflows section of the TeleportHQ right panel:

• On Click and On Visible (runs when the element scrolls into view) are shown as buttons.

• The … button (More event types) opens Select Event Type, with a search box and more choices:

  • On Form Submit: only for a form or an element inside a form. The workflow is linked to the form.
  • On Change: only for a text input, checkbox, radio button, text area or select.
  • Other browser events, such as On Double Click, On Right Click, On Mouse Enter, On Focus, On Blur, On Key Down, On Scroll and On Load.

  Click an event, then Create new workflow. The workflow is created with that event as its trigger.

  

• On a Scroll Scene, the section offers On Scroll Past instead of On Click and On Visible; on one of its chapters, On Chapter Reached. On Click is still under More event types.
• To reuse a workflow you already built, click On Click or + (tooltip Add workflow), then choose Attach existing workflow ("Reuse a workflow from any page") and pick it from the list.

Once an element has a workflow, the section lists it with its event, for example On Click, under its name. Click the row to open the workflow. Use + to add another one: choose Create new workflow, then pick the event in Select Event Type.

Change the element a workflow is linked to#

In TeleportHQ, the trigger of an element workflow shows which element starts it:

1. Open the workflow and click its trigger box.
2. In the right panel, under Element, the Page or component list ("Select a page or component") shows where the element is. You can search it, and the page you're editing is listed first.
3. Pick another page or component to browse its elements, then click the new element. Browsing doesn't unlink the workflow: it stays linked until you click another element. While you browse another page, a line On followed by the linked element's page shows under the selected element.
4. To check the element, click Go to node. To unlink it, click Clear binding.

After Clear binding, a notice says "This workflow is no longer triggered by" followed by the element's name, with an Undo button. Click Undo to link it again. If that's no longer possible, you see a message such as "Could not restore the binding: another element has been picked since."

Check that it worked#

• The Workflows section of the button now lists the workflow with On Click under its name. Click the row to open it again.
• On your published site, click the button. The steps run.

Troubleshooting#

The Workflows section doesn't appear in the right panel Select only one element, and make sure the Visual tab is open. Some elements, such as slots, can't start workflows.

On Form Submit or On Change isn't in the list On Form Submit only shows for a form or something inside one. On Change only shows for input fields. Select the right element.

The workflow card shows "Not exported" with "Its element trigger is not bound to an element" The element linked to the trigger was deleted or unlinked. Open the workflow, click the trigger and pick the element again.

Clicking the workflow icon of a layer opens "Select Workflow" In the Layers panel, an element with workflows shows a workflow icon (tooltip "N workflow(s) linked to this element"). When there are several, the Select Workflow window asks which one to open. Pick the one you want to edit.

Good to know#

• The trash icon next to a linked workflow deletes the whole workflow, not only the link. To keep the workflows, right-click the element on the canvas and choose Unlink Workflows. This removes every workflow link from that element. The workflows stay in the Workflows panel, marked Not exported until you link them to an element again.
• A form whose submission runs a workflow no longer stores submissions in Growth → Forms: its Form Submissions switch is turned off, and the workflow handles the submission instead.
• Workflows linked to a whole page show as a count badge on the page on the canvas.