Elements

How to add your own HTML or JavaScript with Code Embed

September 15, 2026
How to add your own HTML or JavaScript with Code Embed

In TeleportHQ, the Code Embed element puts your own HTML, CSS or JavaScript in one place on a page, for example a review widget or a social media post. Drag Code Embed from Elements → Primitives → Media onto the canvas (or click it), paste your code into the Code Embed (HTML+CSS+JS) window, and click Save. To add code to every page instead, use Custom code in Project settings.

Before you start

  • Copy the embed code from the service you want to add, for example the "Embed" code of a Trustpilot or Instagram widget.
  • Scripts from other services can slow down or break your page. Only add code from sources you trust.

Add the code

  1. In the left sidebar, click Elements.
  2. On the Primitives tab, scroll to the Media group.
  3. Drag Code Embed onto the canvas, where the widget should appear. Or select that spot's container and click Code Embed. The Code Embed (HTML+CSS+JS) window opens.
  4. Paste your code into the window.
  5. Click Save, or press Cmd+S (Mac) or Ctrl+S (Windows). The Code Embed element is added to the page with your code.
The TeleportHQ Code Embed (HTML+CSS+JS) window, with its Save button highlighted

If you close the window, or click Save with nothing in it, no element is added.

See the code running in the editor

On the TeleportHQ canvas, a Code Embed shows your HTML and styles, but its scripts may not run while you edit. A widget can look empty or unfinished there.

  1. Select the Code Embed element.
  2. In the right panel, find Code Embed Settings.
  3. Click Preview. The code runs in place, and a banner says "You are in live preview mode."
  4. Click Exit Preview to go back to editing.

Change the code later

  1. Select the Code Embed element.
  2. In Code Embed Settings, click Edit Content. The Code Embed (HTML+CSS+JS) window opens with your code.
  3. Change the code.
  4. Click Save.

Check that it worked

After Save, the element shows on the canvas in the spot you chose. Use Preview in Code Embed Settings to see the result, then preview your whole site or publish it to test the widget for real.

Troubleshooting

The widget doesn't show on the canvas Its scripts don't run on the canvas while you edit. Click Preview in Code Embed Settings.

The widget works in preview but not on the published site Some services only work on domains you registered with them. Add your TeleportHQ web address or custom domain in that service's settings.

The widget needs code in the page <head> Code Embed places code in the page body, where you drop it. Put the head part in your project's custom code:

  1. At the bottom of the left sidebar, click the Project settings cog.
  2. Under Data & code, click Custom code.
  3. Click Head and paste the code. It saves as you type.

See How to add code to every page (head and body).

The Code Embed is empty after I saved an empty window Saving the window with no code removes the code from the element. Press Cmd+Z or Ctrl+Z to undo.

Good to know

  • Code Embed vs custom code: Code Embed shows in one place on one page. Project custom code (head and body) runs on every page and is invisible. See How to add code to every page (head and body).
  • Advanced Embeds: an advanced feature that turns code embeds from other services into native page code when you publish, which can make pages faster. Turn it on in Project settings (cog, bottom left) → Editor → Preferences → Advanced features. See How to turn on Advanced Features.
  • Animations with code: see How to add CSS keyframes or animation libraries with custom code.
  • A Code Embed can show content from your blog or store. When it does, Code Embed Settings shows Edit Blog Post or Edit Product instead of Edit Content and Preview.
  • Code Embed works in websites and web apps.
Share

Related Articles

How to add code to every page (head and body)

In the TeleportHQ editor, click the Project settings cog at the bottom of the left sidebar, open Data & code → Custom code, choose Head or Body and paste your script, style, meta or link tags; the code saves itself and runs on every page of your published site, but not on the editor canvas.

How to embed another web page with an iframe

In TeleportHQ, you show another website's page inside yours by adding an Iframe element from Elements → Primitives → Media and pasting the page's address into its src field in the Attributes section; the other site must allow embedding.

How to turn on Advanced Features

In the TeleportHQ editor, click the Project settings cog at the bottom of the left sidebar, open Editor → Preferences → Advanced features and flip the switch next to a feature; each switch saves at once, and there are five features, including Advanced Embeds and Private Folder.

How to add CSS keyframes or animation libraries with custom code

To use your own CSS animation in TeleportHQ, click the Project settings cog, open Data & code → Custom code, paste a style block with your @keyframes under Head (it saves as you type), then add an animation property (for example, animation: softPulse 2s infinite) to an element in the right panel's Advanced tab; it plays in Preview and on the published site, not on the editor canvas.

How to preview your site before publishing

In the TeleportHQ editor, click Preview in the toolbar at the bottom of the screen to open a working copy of your whole site in a new tab, where you can click links, try interactions and switch between desktop, tablet and mobile views.