How to turn a website into a web app

In TeleportHQ, a website becomes a web app the first time you add a feature that needs a server, such as a workflow, user sign-in, a store, a blog, bookings or an AI chatbot. TeleportHQ opens the Enable Web App features? window, and you confirm with Enable Web App features. Afterwards you can still publish from TeleportHQ, but you can no longer download the project's code. Showing and hiding elements, pop-ups, tabs and browser widgets such as calendars never need this.

Before you start#

• Check that you need a web app. Elements that show or hide on a click, pop-ups (modals), tabs, collapsible text, calendars, countdowns, a kanban board, drag and drop, a cookie banner and a language switcher all work in a website. So does content from a data source, including the built-in TeleportHQ database. See What is a web app in TeleportHQ?
• Decide if you need code download. A web app can't be downloaded as HTML, React or Next.js code. If you plan to host the code yourself, keep the project as a presentation website. See Can I download my site's code?
• Check your Web App slots. A web app that isn't covered by a Web App slot gets 7 days of full access, then goes offline. Trial and Premium workspaces include 1 slot; Pro includes none. See Why does my web app need a slot, and what is the 7-day window?
• You need permission to edit the project.

Steps#

This example starts the switch by adding a workflow.

1. Open your website project in the TeleportHQ editor.
2. In the left sidebar, click Workflows.
3. At the top of the Workflows panel, click Add Workflow (the + button). The Enable Web App features? window opens.
4. Read the box Before you continue, please read carefully:
   • Code download will no longer be available.
   • You can still deploy this project directly from TeleportHQ.
   • This change is permanent. The window says the project "cannot be converted back to a presentation website": the way back is the backup TeleportHQ saves next (see Troubleshooting).
5. Click Enable Web App features. TeleportHQ saves a backup named Before Web App features Enabled, makes the project a web app and continues with the feature you started adding. A project that is still blank (an empty home page and no components) gets no backup, because there is nothing in it to restore.

To cancel, click Keep as a Presentation Website. Nothing changes, and the feature isn't added.

Other features that open the same window#

In a TeleportHQ website, each of these opens the Enable Web App features? window first:

• Adding a workflow from the Workflows panel, or from the Workflows section of a selected element in the right panel.
• Turning on Authentication, E-commerce, Blog, Help Center, Bookings or AI assistant chat in Plugins (the four-squares icon above Growth in the left sidebar): click the row, then turn on the switch at the top of its drawer, for example Blog enabled. The Admin panel can be turned on only after Authentication, so by then the project is already a web app.
• Ticking plugins in the Choose your plugins window and clicking its button, for example Enable 2 plugins. The window opens from Project Menu → Edit → Enable Plugins…, and on its own the first time you open a new Blank project. See How to turn features on or off (Plugins).
• Adding Site Search, Newsletter Signup (or a Footer that includes one), Autocomplete or Upload Asset from Elements → Primitives.
• Clicking Enable Web App features in Project settings → Data & code → Global state.
• Ticking Cache results on a list that shows data from a data source.
• Sending your first message in the Marketing Studio.
• Finishing an AI generation whose pages include workflows or live data. The window then says "The generated pages include web app features (workflows or live data). Enable them to keep the pages working."

When you ask the AI Assistant for a server feature by name (for example, "add a login page" or "add a blog"), TeleportHQ treats your request as confirmation and doesn't show the window.

Check that it worked#

• The feature you were adding is now in your project.
• On the dashboard, the project card shows a Web App chip.
• If the project isn't covered by a Web App slot, a banner appears at the bottom of the editor: "This web app has full access — including publishing with a TeleportHQ watermark — but needs its own subscription to keep it." with a Subscribe project button.

Troubleshooting#

I only wanted a pop-up, tabs or a show/hide effect You don't need a web app for those. Click Keep as a Presentation Website if the window opens, then add the pop-up or the condition directly. See How to add a pop-up (modal) and How to show or hide elements based on a condition.

AI-generated pages don't work until I enable web app features When an AI generation adds workflows or live data to a website, TeleportHQ asks with the Enable Web App features? window. If you click Keep as a Presentation Website, those parts stay on the pages but don't run. Add the feature again (for example, click Add Workflow) to see the window again.

I switched by mistake Restore the backup named Before Web App features Enabled, which TeleportHQ saved right before the switch. It brings the project back to a presentation website, as it was at that moment. A project that was still blank at the switch has no such backup, because there was nothing in it to keep. In the editor, click Backups in the bottom toolbar, then Restore next to that backup. Backups aren't included in the trial: on a trial, write to hello@teleporthq.io and ask support to restore it. See How to back up and restore your project.

Good to know#

• Projects created with the Presentation Website or Blank project card start as websites. Projects created with the E-commerce, Web App or Bookings card are web apps from the start.
• Restoring the backup also removes everything you changed after the switch.