How to add interactive elements (calendars, kanban, countdowns and more)

In TeleportHQ, interactive elements (calendars, kanban boards, countdowns, tabs, QR codes, drag-and-drop lists and more) are in the left sidebar under Elements → Primitives. Click a card to add it to your page, then set it up in the right panel. These elements run in the visitor's browser, so they work in websites and web apps alike: adding one doesn't turn a website into a web app.

Before you start#

• Most interactive elements work in any project. Only four elements need a server and ask to make a website a web app first: Autocomplete, Site Search, Newsletter Signup and Upload Asset (a Footer that includes a newsletter signup asks too). See How to turn a website into a web app.
• Code download. If you plan to download your website's code, some of these widgets only work in the Next.js download (see Good to know).
• Your role must allow creating components. Otherwise you see "Your current role does not have permission to edit components".

Which interactive elements TeleportHQ offers#

These are the element cards, grouped as they appear in Elements → Primitives:

Steps#

This example adds a countdown to a bakery's Grand opening date.

1. In the left sidebar, click Elements.
2. Open the Primitives tab.
3. In the search box, type countdown. The Interactive group shows Countdown To Date and Countdown Timer.

4. To place the countdown inside a section, select that section on the canvas first. Otherwise TeleportHQ adds it to the page.
5. Click the Countdown To Date card. The countdown appears on the canvas and is selected. No window opens, in a website or a web app.
6. In the right panel, find the Countdown section.
7. Set Target date & time, for example 1 October at 09:00.
8. Under Units, choose what to show: Days, Hours, Min, Sec.
9. Under On complete, choose Keep at zero, Hide or Show message.

Other interactive elements work the same way: click the card, then use its own section in the right panel, such as Calendar Settings, Kanban Settings or Tabs settings.

Check that it worked#

• The element appears on the canvas and is selected.
• Its settings section shows in the right panel.
• Open Preview, or publish your site, to use it the way a visitor would. On the editor canvas, a click selects the element: calendars and kanban boards are previews you can't click into, and drag-and-drop elements don't drag or sort. A countdown already counts down on the canvas.

Troubleshooting#

The Enable Web App features? window opened You added Autocomplete, Site Search, Newsletter Signup or Upload Asset, which need a server. Click Keep as a Presentation Website to leave the project as it is and nothing is added, or Enable Web App features to continue. See How to turn a website into a web app.

"Your current role does not have permission to edit components" Ask the workspace owner or an admin to change your role. See What can each role do?

The File Upload Field shows "(missing)" next to its state Each file upload field needs its own page state. See How to let visitors upload files in a form.

Good to know#

• Code download. Calendars, the kanban board, countdowns, QR codes, barcodes, the signature pad, color and emoji pickers, the File Upload Field, drag and drop, the sortable list, the cookie banner and the language switcher only work in the Next.js download. Other downloads leave them empty or without their behaviour, and the download window names the ones your project uses: "… work only in the Next.js export." See How to download your site as code.
• Clicks that do more. To make an element save data, send an email or call another service, attach a workflow. Workflows need a server, so in a website this opens the Enable Web App features? window. See How to run a workflow when a button is clicked.
• The Account, E-Commerce and Blog element groups show an activation card until you turn on that feature, for example Authentication Required with an Enable Authentication button. Those features make a website a web app.