Articles on: FAQ

How to import HTML code to TeleportHQ

Here' a quick guide to import HTML, CSS and Javascript in TeleportHQ.

You can use the methods described here to import code created manually, generated by ChatGPT, Claude or other LLM's and even to import projects created in TeleportHQ.

1. Code import rules	2. How to import multiple HTML pages with a ZIP file	3. How to import HTML pages using paste
4. Where to add JS/CSS depending on scope	5. Code import example

You can only import HTML, CSS and Javascript. Do not try to add code for Next, React or other frameworks.

1. Code import rules

Before importing any code to TeleporHQ make sure to follow these rules:

✅ Import only HTML + CSS + JavaScript (vanilla). Don’t paste React/Next/etc as the import will fail.

✅ Set up responsiveness: default breakpoints are 991px / 767px / 479px (editable in the editor).

Setting up the correct breakpoints is not mandatory but it is recommended for a more compatible import.

2. How to import multiple HTML pages with a ZIP file

You can easily import multiple HTML pages into TeleportHQ by using the ZIP file method. To do this:

Create a new blank project
In the editor, go to the Toolbar at the bottom of the Canvas
Click on the Import project (ZIP) button
Select the ZIP file from your device
Click the Import button from the newly opened window that breaks down the imported files

3. How to import HTML pages using paste

You can upload single pages by pasting the code directly in TeleportHQ. To do this:

Copy the code from ChatGPT, Claude or any other source
Open the Code import widget from Toolbar at the bottom of the Canvas
Paste the code into the Import widget (* Alternatively you can Paste the code directly in root of the page or in a container)
Click Save

Once the code is imported, you can use the visual editor to make fine-grain edits.

4. Where to add JS/CSS depending on scope

1) Project-wide scripts/styles (all pages)

Use Project Settings → Custom Code:

HEAD: injected first into the <head> of all pages
BODY: injected near the end of the HTML, before closing </body>
And important gotcha: custom code here does not affect the Design canvas — only deployed/downloaded output.

2) Per-section embeds

Use the Code Embed element for small chunks (widgets, tables, small scripts).

JS added via Code Embed works only after publishing.

“Supported code” in practice (what usually trips people up)

Your JS might look “broken” in the editor because scripts don’t run in-canvas; validate on a published build.
Keep imports “scoped” by prefixing classes (e.g. .my-widget__…) so your <style> doesn’t accidentally restyle other TeleportHQ elements (best practice).

Bonus: forms (if your imported code includes one)

TeleportHQ can manage submissions natively, and it also supports sending to an external endpoint by setting the form’s action, method=POST, and enctype=application/x-www-form-urlencoded.

If you paste an example snippet you’re trying to import, I can quickly “TeleportHQ-proof” it (strip bad tags, wrap CSS/JS correctly, and avoid class collisions).

5. Code import example

Copy the code below and paste it into a blank project to see how a hero section that we build is imported into TeleportHQ:

<section class="hero">
  <div class="hero__wrap">
    <p class="hero__kicker">New • Simple landing</p>
    <h1 class="hero__title">Build your next page fast.</h1>
    <p class="hero__subtitle">
      A minimal hero section you can paste into TeleportHQ to showcase structure and styling.
    </p>
    <div class="hero__actions">
      <a class="btn btn--primary" href="#get-started">Get started</a>
      <a class="btn btn--ghost" href="#features">See features</a>
    </div>
  </div>
</section>
<style>
  .hero {
    padding: 64px 20px;
    background: #0B1020;
    color: #FFFFFF;
  }
  .hero__wrap {
    max-width: 900px;
    margin: 0 auto;
  }
  .hero__kicker {
    margin: 0 0 12px;
    opacity: 0.8;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .hero__title {
    margin: 0 0 12px;
    font-size: 44px;
    line-height: 1.1;
  }
  .hero__subtitle {
    margin: 0 0 20px;
    max-width: 640px;
    opacity: 0.85;
    line-height: 1.6;
    font-size: 18px;
  }
  .hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
  }
  .btn--primary {
    background: #6EE7FF;
    color: #0B1020;
  }
  .btn--ghost {
    border: 1px solid rgba(255,255,255,0.25);
    color: #FFFFFF;
  }
  @media (max-width: 767px) {
    .hero__title { font-size: 34px; }
  }
</style>

Check out the published version of the hero section above:

Updated on: 26/05/2026

Was this article helpful?

Thank you!