How to import code to TeleportHQ
Here' a quick guide to help you generate code that works perfectly if imported to TeleportHQ.
1. Code import rules
When you paste into Code import widget (or directly into a page/container), your snippet must be only the page content, not a full document:
✅ Only HTML + CSS + JavaScript (vanilla). Don’t paste React/Next/etc.
❌ Do not include <html>, <head>, or <body> tags (TeleportHQ already provides them).
✅ Put CSS inside a <style> tag.
✅ Put JS inside a <script> tag.
✅ Responsiveness: default breakpoints are 991px / 767px / 479px (editable in the editor).
2. 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).
3. How to import code to TeleportHQ
To import code to TeleportHQ:
- Copy the code from ChatGPT
- 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. 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/01/2026
Thank you!