How to add a pop-up (modal)
In TeleportHQ, you add a pop-up (a modal) from the left sidebar under Elements → Primitives → Modals. Pick a type, such as Confirmation or Form, then click Select trigger element and choose the button that opens it. TeleportHQ wires the close button (✕), the dark backdrop and the dismiss buttons for you. Pop-ups work in websites and web apps alike: adding one doesn't turn a website into a web app.
Before you start
- Add the element that should open the pop-up first, for example a Book a table button.
- Your role must allow creating components. Otherwise you see "Your current role does not have permission to edit components".
The five modal types in TeleportHQ
| Card | What it contains |
|---|---|
| Confirmation | Title "Confirm Action", a question, Confirm and Cancel buttons |
| Information | Title "Information", a message and an OK button |
| Details | Title "Details", an area for any content and a Close button |
| Form | Title "Form", Name and Email fields, Submit and Cancel buttons |
| Slider | Title "Gallery", an image slider, no footer buttons |
Steps
1. Add the modal
- Open the page where the pop-up should appear.
- In the left sidebar, click Elements, then open the Primitives tab.
- Scroll to the Modals group.
- Click a card, for example Form.
TeleportHQ adds the modal to the top level of the page and selects it. The modal shows on the canvas so you can design it.
2. Choose what opens it
- The window Choose what opens this modal appears. Click Select trigger element. TeleportHQ hides the modal on the canvas so you can see your page.
- On the canvas (or in the layers tree), click the element visitors will click, for example your Book a table button.
- Click Confirm.
If you click Later, visitors can't open the modal yet. The yellow issues chip at the top left of the editor (for example 1 issue) then counts it. Click the chip: in the Issues window, under Missing Page / Element Selections, the line An Element is Clicked for Open Form Modal (the name follows the modal type) lets you choose the element. See What do the warnings at the top of the editor mean?
3. Design and hide it on the canvas
- Edit the modal's title, text and fields like any other element.
- Select the modal. In the right panel, find Modal settings.
- Next to Visibility, click Hide so the modal stops covering your page while you work ("Hidden on canvas"). Click Show to see it again.
Check that it worked
Open Preview or your published site and click the trigger element. The pop-up opens. Click the ✕, the backdrop or the dismiss button (Cancel, OK or Close). The pop-up closes.
Troubleshooting
"Modals can only be placed at the root level. The modal has been added to the root of the page/component." You added the modal inside another element. TeleportHQ moved it to the top level of the page, which is where modals must be. Nothing else to do.
The pop-up never opens on my site No trigger element was chosen (you clicked Later). Click the yellow issues chip at the top left of the editor (for example 1 issue) and choose the element in the Issues window, under Missing Page / Element Selections.
Confirm or Submit does nothing TeleportHQ leaves these buttons for your own action, because only you know what should happen. To save the form, send an email or call another service, attach a workflow to the button. Workflows need a server, so in a website this first opens the Enable Web App features? window. See How to run a workflow when a button is clicked.
"Your current role does not have permission to edit components" Your workspace role can't add elements that create components. Ask the workspace owner or an admin.
Good to know
- Each modal gets its own on/off value (a state), named like
isFormModalOpen. You can bind Visibility to a different state from Modal settings. See How to store and use values with States. - Opening and closing a pop-up runs in the visitor's browser, so a modal never makes a website a web app and needs no Web App slot.