Articles on: Code snippets & Interactions

How to copy paste custom HTML

Find out how to add HTML code to your project and how it can be edited as any other element in TeleportHQ.



Copy code to clipboard
Paste code to project
Validation
Editing copied elements
Limitations

Copy code to clipboard



Select the code that you want to copy from your source and use CTRL/CMD-C to copy it to your clipboard.

Copying the code to clipboard

Paste code inside the project



Select the container in which you want to paste your code to.

Use CTRL/CMD-V to paste the copied code to the project. You will then be prompted with an HTML IMPORT modal.

To finalize the code import, simply, click the Save button.

If the code passes the validation, then the Save button will be enabled in the top down corner.

Pasting the code from the clipboard

Validation



When the copied code does not pass the validation, there will be displayed an orange circle with the number of conflicts in your code, right at the bottom of the modal.

You can further investigate and choose to expand the list of code conflicts from the right side of the modal.

Click on each item from the list to take you to the line with the conflict.

Not all conflicts will prevent the code to be imported. Some are simply warnings, not breaking conflicts.

Code import validation

Edit the copied elements



After clicking the Save button you will immediately see copied HTML elements in the container that you’ve selected and in the treeview of the Layers & Files tab.

To edit elements you can just select them and edit using the options available in the Right panel, just like you would for any other element.

Being able to select and edit individual elements is the difference between copy pasting code and using the Code embed element.

Editing copied elements

Limitations



Here is a list of elements that you cannot copy using copy paste in TeleportHQ:

Scripts
Complex CSS selectors (e.g. ::before, ::after, .a.b)
Id selectors (#id)
Any non-<path> elements in SVGs
Elements not in the elements panel OR tag list of elements in elements panel (e.g. <table>, <sup>, <sub>)
RTE:
More than two layers of nested text elements
Tags other than <span> and <br> in text elements

Updated on: 17/01/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!