How TeleportHQ fits together: a map of the app

TeleportHQ is built as one chain. Your account belongs to one or more workspaces. A workspace holds the members, the plan, the billing, the AI tokens and the projects. You build each project, a website or a web app, in the editor, and Publish turns it into a live site at a free TeleportHQ address or your own domain. This map shows where each part of TeleportHQ is, what it's for and how the parts affect each other, with a link to the full article for each.

The TeleportHQ map in six steps#

1. Account: you, the way you sign in and your profile.
2. Workspace: the members, the plan, the billing, the AI tokens and the projects.
3. Project: one website or web app, shown as a card on the dashboard.
4. Editor: where you build a project, page by page.
5. Publishing: Production, Staging, your own domain and every earlier publish.
6. Live site: what visitors see, and what comes back to you from them.

1. Your TeleportHQ account#

A TeleportHQ account is you: one email address, the ways you sign in (email and password, Google, GitHub or Microsoft) and your profile. One account can own several workspaces and be a member of other people's.

To change your name, theme or sign-in methods, open Account Settings. On the dashboard, it's in the ⋯ menu of your name at the top of the left sidebar. In the editor, it's in Project Menu → Account → Account Settings.

• How to create a TeleportHQ account
• How to change your name, theme or email address

2. Workspaces: members, plan, billing and AI tokens#

A TeleportHQ workspace is the container that everything else lives in. Every new account starts with one, named My workspace. Each workspace has its own:

• Members and roles. People you invite get access to the workspace's projects, with a role such as Admin, Designer, Editor or Viewer. See How to invite people to your workspace.
• Plan. Trial, Pro or Premium. The plan decides what the workspace's projects can do. See What's the difference between Trial, Pro and Premium?.
• Billing and add-ons. The subscription and invoices, plus extra custom domains, language slots, Web App slots and editor seats. See What add-ons can I buy?.
• AI tokens. One balance, shared by everyone in the workspace and used by every AI feature. See What are AI tokens, and how many do I get?.

The TeleportHQ dashboard shows your workspaces and the projects in the one you have open.

1. The left sidebar: your name at the top (its ⋯ menu holds Account Settings), the workspaces you own under WORKSPACES, the ones you were invited to under SHARED WITH ME, and New Workspace.
2. The open workspace: its name and plan badge, its AI token balance (N tokens remaining) and, for owners and admins, Manage, which opens the workspace's settings: members, plans and billing.
3. + New Project: start a new project in this workspace.
4. Folders and projects: a card for each project. Click a card to open the project in the editor.

See A tour of the TeleportHQ dashboard and What is a workspace?.

3. Projects: websites and web apps#

A TeleportHQ project is one site. When you click + New Project, the Create Project panel offers E-commerce, Web App, Bookings, Presentation Website and Blank project. Every project is one of two kinds:

• A website (a presentation website): pages that present your business. On a paid plan, you can download its code.
• A web app: a site with live features, such as visitor sign-in, workflows, a store, a blog or online bookings. Its code can't be downloaded, and it needs a Web App slot to stay online after 7 days. Every online store and every booking site is a web app.

You can start with a website and add web app features later. TeleportHQ asks you first, in a window titled Enable Web App features?. On paid plans, you can group projects in folders.

• How to create a new project (AI, template or blank)
• What's the difference between a website and a web app?
• How to organize projects in folders

4. The TeleportHQ editor#

The TeleportHQ editor opens when you click a project card. It has five areas.

1. The header, across the top:
   • On the left, the Project Menu (the TeleportHQ logo), with entries such as Dashboard, AI Hub, Help and Account. Next to it, a yellow chip such as 2 issues appears when something needs fixing, such as a missing setting or a link that leads nowhere. Click it to open the Issues window.
   • In the middle, the project name. Click it for your AI tokens and AI Costs & Usage.
   • On the right, the people editing with you, Public or Private and Share (who can see the project), Code (view or download the code) and Publish.
2. The left icon column: one icon per panel, with the Project settings cog at the bottom. The next section goes through them one by one.
3. The canvas: your page as visitors see it, with tabs for the open pages, screen sizes and zoom above it. Over the top of the canvas:
   • at the top left, the language button (for example English) and Authentication (sign-in for your visitors);
   • above the page, Ask AI, which swaps all of the page's images or rewrites all of its texts at once;
   • at the top right, Page settings (the page's State, Security and SEO) and the purple AI Assistant button, which opens a chat that changes your site for you.
4. The right panel: with nothing selected, the Design Language, your site's colors, text styles, spacing and classes. With an element selected, its settings in the tabs Visual (its look and settings, with the element's Workflows at the top), Advanced (CSS) and Events.
5. The bottom toolbar: Quests, your AI token balance, the import buttons, Backups, Preview (your whole site in a new tab) and Support.

See A tour of the TeleportHQ editor, What do the warnings at the top of the editor mean? and What can the TeleportHQ AI Assistant do?.

The left icon column, panel by panel#

The TeleportHQ editor's left icon column holds these panels, from top to bottom:

• Elements: building blocks under Primitives (text, images, buttons, forms, layouts, motion) and ready-made designs under Sections. See Which elements can I add to a page?.
• Pages, Components & Tree View: your pages, your reusable components and the layers of the open page. See How to add a new page and What are components?.
• Data Sources: connect a database, a spreadsheet, an API or a headless CMS, or set up the built-in TeleportHQ database. See What are data sources?.
• Workflows: automations, each one a trigger followed by steps. See What are workflows?.
• Assets Manager: your images, videos and files, plus free stock photos and icons. See What is the Assets Manager?.
• Plugin buttons: E-commerce, Blog, Help Center, Bookings and AI assistant chat each get an icon of their own, below a thin line, while they're switched on.
• Plugins: the features a project can add, from sign-in and a store to bookings and an AI chatbot for your visitors.

• Growth, under the Live label: promoting your live site and what comes back from it, in groups:

  • Marketing Studio;
  • Analytics and SEO & Performance;
  • Forms → Form submissions, always there;
  • E-Commerce → Orders and Subscriptions, while the store is on;
  • Bookings → Bookings (the bookings, their calendar, and reports and exports), while Bookings is on.

  See What's in the Growth tab?.

• Project settings, the cog at the bottom: every setting of the project, grouped under Site, Appearance, Data & code, Editor, AI, Credentials and Integrations. That's where SEO and social sharing, languages (Internationalization, in Site), the Design language, fonts, page transitions, custom code, secrets and the Project brief for the AI live. See A tour of Project settings.

Forms have no icon of their own: you add a form from Elements, and read what it receives in Growth → Forms. You can drag the icons above Plugins into your own order, and right-click the column to hide the ones you don't use. See How to reorder the tabs in the left sidebar.

The TeleportHQ Plugins panel lists:

• Authentication: sign-up and login for your visitors. See How to add sign-up and login to your site.
• E-commerce: an online store. See How to create an online store with TeleportHQ.
• Blog and Help Center: posts or articles you write in their own panel. See How to add a blog to your site.
• Bookings: items your visitors book by time, night or day, such as appointments, tables, rooms or rentals, with their calendars and opening hours.
• AI assistant chat: a chatbot for your visitors. See How to add an AI chatbot to your web app.
• Admin panel: a back office for your data. See What is the admin panel?.

Each row says On or Off, with an orange warning icon (Needs attention) when a plugin that's on has something to fix. Click a row to open its settings beside the list: the switch that turns it on or off, its tutorial, a button to its own panel, and Show in the left sidebar. See How to turn features on or off.

5. Publishing your TeleportHQ site#

To publish a TeleportHQ project, click Publish at the top right of the editor. The window's left menu has two entries: Publish holds your addresses and options, and Deployments lists every publish. Under Publish:

• Production: your live site. Publish to Production puts the current version online at a free TeleportHQ address. See How to publish your site.
• Staging: a private test address. Publish to Staging lets you try changes, and Make it live then serves that build on Production. See How to test changes on a staging site before going live.
• Custom domain: a domain you own, such as mybakery.com, connected after your first publish to Production. See How to connect your own domain.
• Deployments: every publish, with a way to put an earlier one back. See How to see and manage your deployments.
• Unpublish: under Production, the line "Take this site offline. Your deployments are kept." Your production addresses and your custom domain stop showing the site, staging keeps working, and publishing again brings it back. See How to take your site offline (Unpublish).

6. Your live TeleportHQ site#

Your live TeleportHQ site is what visitors open. Some changes reach it only when you publish, and some things come back from it into the editor:

• Design and page changes reach the live site only after you click Publish to Production again.
• Blog posts, Help Center articles and database records go live without a publish, usually within seconds.
• Form submissions come back to Growth → Forms, orders to Growth → E-Commerce → Orders, and bookings to Growth → Bookings.
• Visitors show up in Growth → Analytics.
• The admins of a web app manage its data in the admin panel on the live site, at /admin/dashboard.

See Why don't my changes show on my live site? and What should I check after publishing my site?.

How the parts of TeleportHQ connect#

In TeleportHQ, one part often feeds another. The main links:

• A data source feeds lists and details pages. A list (Array Mapper) repeats one design for every row of a table, and a details page gives each row a page of its own, such as /products/blue-shirt. See How to show a list of items and How to create a page for each item.
• A form saves submissions and can start a workflow. Submissions land in Growth → Forms and can be emailed to you. A workflow attached to the form with On Form Submit can do more, such as save the message to a table or send a text message. See How to choose what happens after someone submits a form.
• Sign-in protects pages and gives the admin panel its users. With Authentication on, you can make a page members-only. The admin panel needs Authentication first, and only users with the admin role can open it. See How to make a page visible only to signed-in users.
• The store runs on the database, workflows and emails. E-commerce keeps products and orders in the TeleportHQ database (or a database you connect), runs the cart and checkout with ready-made workflows, and emails you and your customers. See Which emails does the store send?.
• The Blog and the Help Center are pages plus content. TeleportHQ builds the pages (a list, and a page for each post or article), and you write the posts and articles in the Blog or Help Center panel. See How to add a help center to your site.
• Growth reads your published site. Analytics and SEO & Performance start working after your first publish. See How to see who visits your site (Analytics).
• Saved styles and components update everywhere. Change a color or a text style in the Design Language and every element that uses it follows. Edit a component and every copy of it follows. See What is the Design Language panel?.
• The Issues window reads the project itself. It lists missing settings and links that lead nowhere, even before your first publish. See How to find and fix broken links on your site.

What turns a TeleportHQ website into a web app#

A TeleportHQ website becomes a web app when you add a feature that needs a server. TeleportHQ asks first, in a window titled Enable Web App features?, with the buttons Keep as a Presentation Website and Enable Web App features. These features ask:

• a workflow, from the Workflows panel or from an element's Workflows section;
• Authentication, E-commerce, Blog, Help Center, Bookings, Admin panel or AI assistant chat;
• the Marketing Studio;
• the Site Search, Newsletter Signup, Autocomplete and Upload Asset elements (the last one lets visitors upload files);
• Global state, values that every page can read;
• Cache results on a list;
• AI-built pages that use workflows or live data.

When you ask the AI Assistant for one of these features by name, or to turn on languages, your request counts as the confirmation and no window opens.

These keep a TeleportHQ website a website:

• connecting a data source, the TeleportHQ database included;
• forms that don't use a workflow;
• showing and hiding elements, states inside a page or component, tabs, pop-ups (modals) and collapsible text;
• widgets that run in the visitor's browser, such as calendars, countdowns, a kanban board, drag and drop, a language switcher and a cookie banner;
• turning on languages yourself, from the language button at the top left of the canvas.

There's no switch back from a web app: to make it a website again, restore the backup Before Web App features Enabled. A project that was still blank when it became a web app has no such backup, because there was nothing in it to keep. See What's the difference between a website and a web app? and How to turn a website into a web app.