AI tools in the editor

How to generate a new section with AI

How to generate a new section with AI

To generate a new section with AI in TeleportHQ, open the Sections tab in the left sidebar, click Generate Section on the Generate using AI card, describe the section (for example, a testimonials strip), click Generate Section, then Import Section. You can also drop the AI Section element where you want it, or use Generate with AI on an empty component. The section matches your site's design.

Before you start

  • Generating a section uses AI tokens. If your balance is too low, TeleportHQ tells you before anything starts. See What uses AI tokens, and how much?.
  • The Generate using AI card in the Sections tab shows only in projects created with the AI Website Builder. In other projects, use the AI Section element or the AI Assistant.

Option 1: From the Sections tab

  1. In the TeleportHQ editor's left sidebar, click Elements (the first icon), then click the Sections tab (next to Primitives).
  2. On the Generate using AI card, click Generate Section. The Create Section Using AI window opens.
The Generate using AI card at the top of the TeleportHQ Sections tab, with its Generate Section button highlighted
  1. Under Describe Your Section, click an example such as Testimonials or FAQ Accordion, or type in Section Description. For example: A testimonials section with three customer quotes, photos and star ratings on a light background.
  2. Click Generate Section. A preview appears.
  3. Check the preview. Click Import Section to add it to your page, or Back to change the description.
The TeleportHQ Create Section Using AI window with the Testimonials example picked, its description filled in, and the Generate Section button highlighted

You see "Section imported successfully" when the section is on your page. With nothing selected on the canvas (press Esc first), the new section goes at the end of the page. It's also saved as a component in your Components list.

Option 2: With the AI Section element

Use the TeleportHQ AI Section element to place the new section exactly where you want it.

  1. In the left sidebar, click Elements, open the Primitives tab and find the AI group.
  2. Drag AI Section onto your page, where the section should go. Or click it: it goes inside the selected element, or at the end of the page when nothing is selected.
  3. The placeholder on the canvas shows an AI Section box. (When the placeholder is selected, the same box is also in the right panel.)
  4. In its Describe the section you want... field, type your description. For example: A pricing table with three plans; highlight the middle one.
  5. Press Enter. The status shows Generating section..., and the placeholder is replaced with the new section.
The AI Section placeholder on the TeleportHQ canvas, with a section description typed in its box

Option 3: In an empty component

  1. Open an empty component. The canvas shows Generate with AI and Add section.
  2. Click Generate with AI. The Generate Section with AI prompt opens on the canvas.
  3. Click an example, or describe your section.
  4. Click Generate.

On an empty page, the canvas shows Populate Page instead, which generates a whole page. See How to generate a new page with AI.

If you don't see Generate with AI, click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → View, and under Selection turn on Show the "add section below" button.

Check that it worked

The new section appears on your page, using your project's colors, fonts and spacing. Select it to edit it by hand, or ask the AI Assistant to change it.

Troubleshooting

"You do not have enough tokens to generate a section. Please purchase more tokens." Buy tokens or wait for your monthly allowance, then try again. See How to buy more AI tokens.

"Generation Error" Click Retry in the preview. If it keeps failing, shorten the description.

"Failed to generate section. Please try again.", "Failed to import section. Please try again." or "Failed to generate section content. Please try again." Try again. If it keeps failing, reload the editor.

I don't see the Generate using AI card The card shows only in projects made with the AI Website Builder. Use the AI Section element instead.

Good to know

  • On trial and paid plans, a description can be up to 50,000 characters. The counter under Section Description shows how many you've used.
  • The window shows your balance at the top right as {n} tokens remaining. Click it to buy more.
  • Ready-made sections written for your site: in a category of the Sections tab, or in its search results, turn on Use AI to generate content. The ready-made section you add then gets texts, figures and photos written and picked for your site, which uses AI tokens. See How to add ready-made sections.
  • Replaced a section and want the old AI version back? Find it in the AI Hub.
  • You can also ask the AI Assistant, for example Add a newsletter signup section below the hero.
Share

Related Articles

How to generate a new page with AI

In the TeleportHQ editor, click + next to Pages, choose New Page and then Generate Page with AI, pick a suggested page or describe the page you want, and click Generate to build it in your site's design, with your existing navigation and footer.

How to add ready-made sections

In TeleportHQ, you add a ready-made section such as a hero, pricing table or FAQ from Elements → Sections by opening a category or searching and clicking a design; it lands as ordinary elements in your site's style, and Replace Section swaps any block of the page for another design.

How to reuse pages and sections AI generated earlier (AI Hub)

In the TeleportHQ editor, click the project name and choose AI Hub to see the pages and sections AI generated in the project, click one to preview it, and click Add Page to Project or Add Section to Project to add a copy again, without using AI tokens.

How to get better results from TeleportHQ's AI

Get better results from TeleportHQ's AI by giving a detailed business description, attaching your brief or brand guidelines, naming your brand colors and fonts, working one section at a time, selecting what you want changed, starting a new chat per task and saving standing instructions for the AI Assistant.

How to edit your website by chatting with the AI Assistant

In the TeleportHQ editor, click AI Assistant above the canvas, select the element you want to change, type what you want in plain words and press Enter, and the assistant applies the change to your page.