> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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-2-code-import-rules) | [2. How to import multiple HTML pages with a ZIP file](#2-2-how-to-import-multiple-html-pages-with-a-zip-file) | [3. How to import HTML pages using paste](#2-3-how-to-import-html-pages-using-paste) | | ---- | | [4. Where to add JS/CSS depending on scope](#2-4-where-to-add-jscss-depending-on-scope) | [5. Code import example](#2-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 ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/html-to-code-zip2_1hwjmwy.gif) ## 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/html-to-code-paste_1jkplu2.gif) ## 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 `` of all pages * **BODY**: injected near the end of the HTML, before closing `` * 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 ` ``` ### Check out the published version of the hero section above: ${frame}[Hero section code import](https://code-import-example.teleporthq.app/)