How to import code from ChatGPT to TeleportHQ
Here' a quick guide to help you generate code that works perfectly if imported to TeleportHQ.
Prompt configuration
How to add the code to TeleportHQ
This is the prompt that we used at the start of the project to make sure that the code is responsive and follows the set up for max-width and media queries that we have in the editor.
Hey. I need you to be my HTML and CSS expert. I'll ask you to give me pieces of websites and I want you to respond to me in the following way:
- I want you to give me the HTML structure of the UI that I'm asking for, without the <html>, <head> or <body> tags (just give me directly the elements that I'm asking for) and I want you to use CSS classes for the styling of the elements
- I want you to give me the CSS classes for the structure inside a <style> ... </style> tag, after the html structure
- please keep in mind that the structure that I want has to ALWAYS be responsive. If you need to add media query styling for CSS classes in order to achieve responsiveness use the @media(max-width: ...) rule. The breakpoints that I have defined in my project are at 991, 767 and 479.
- my max content width is 1400px and I normally make my sections full width
- if you need to use Javascript in any way, I want you to give me code snippet inside a <script> ... </script> tag at the end, in the same way you give me the css classes. Only give me the script tag if it's needed. There is no need to bind the code to a DOMContentLoaded event
Do you understand what I ask for? Can we start?
If you have different settings for media queries or max-width, make sure you change them in the prompt as well.
To add the code that was generated:
Copy the code from ChatGPT
Open the Code import widget from the Left panel
Paste the code into the Import widget
Alternatively you can Paste the code directly in root of the page
Once the code is imported, you can use the visual editor to make fine-grain edits.
Prompt configuration
How to add the code to TeleportHQ
1. Prompt configuration
This is the prompt that we used at the start of the project to make sure that the code is responsive and follows the set up for max-width and media queries that we have in the editor.
Hey. I need you to be my HTML and CSS expert. I'll ask you to give me pieces of websites and I want you to respond to me in the following way:
- I want you to give me the HTML structure of the UI that I'm asking for, without the <html>, <head> or <body> tags (just give me directly the elements that I'm asking for) and I want you to use CSS classes for the styling of the elements
- I want you to give me the CSS classes for the structure inside a <style> ... </style> tag, after the html structure
- please keep in mind that the structure that I want has to ALWAYS be responsive. If you need to add media query styling for CSS classes in order to achieve responsiveness use the @media(max-width: ...) rule. The breakpoints that I have defined in my project are at 991, 767 and 479.
- my max content width is 1400px and I normally make my sections full width
- if you need to use Javascript in any way, I want you to give me code snippet inside a <script> ... </script> tag at the end, in the same way you give me the css classes. Only give me the script tag if it's needed. There is no need to bind the code to a DOMContentLoaded event
Do you understand what I ask for? Can we start?
If you have different settings for media queries or max-width, make sure you change them in the prompt as well.
2. How to add the code to TeleportHQ
To add the code that was generated:
Copy the code from ChatGPT
Open the Code import widget from the Left panel
Paste the code into the Import widget
Alternatively you can Paste the code directly in root of the page
Once the code is imported, you can use the visual editor to make fine-grain edits.
Updated on: 10/02/2025
Thank you!