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

To add a script, style or tag to every page of a TeleportHQ site, click the Project settings cog at the bottom of the editor's left sidebar, open Custom code, choose Head or Body and paste the code. The code saves itself. Then publish your site: the code runs on your published site, in the preview and in downloaded code, but not on the editor canvas.

Before you start#

• You need permission to change project settings (Owner, Admin or Designer role).
• Get the full code snippet from the tool you're adding, including its opening and closing tags, for example <script> and </script>.
• Head or Body? Follow the tool's instructions. As a rule:
  • Head: <meta>, <link> and <style> tags, and scripts the tool says to put in the head (many analytics tools).
  • Body: scripts the tool says to put in the body, such as chat widgets.
• The settings list the tags you can add here: link, meta, style and script.
• For fonts, use Project settings → Fonts instead. See How to upload your own fonts.
• For Google Analytics or Google Tag Manager, use their own fields instead. See How to add Google Analytics or Google Tag Manager.

Steps#

1. In the editor, click the Project settings cog at the bottom of the left sidebar. The Project settings panel opens.
2. Under Data & code, click Custom code ("Code added to the head and body of every page."). The Custom code settings open next to the panel.

3. Click Head or Body.
4. Click inside the code box and paste your code. For example, a chat widget in Body:

   <script src="https://widget.example.com/chat.js" async></script>

5. Wait a moment. The code saves itself as you type: there's no Save button.

6. Close Custom code with the close button at its top right (tooltip Close).
7. Publish your site. See How to publish your site.

Check that it worked#

Open your published site in a new browser tab. The tool should work there, for example the chat bubble appears. To confirm the code is on the page, right-click the page, choose View page source, and search for part of your snippet. You can also test before publishing: the editor's preview includes your custom code. See How to preview your site before publishing.

Troubleshooting#

The code doesn't work in the editor That's expected. TeleportHQ doesn't run custom code on the editor canvas: "You will not be able to interact with the 3rd party code while editing your project in the playground, this will only work on your published websites." Test it in the preview or on the published site.

The code doesn't work on my live site

• Publish again. Saving the code doesn't update the live site by itself.
• Check you pasted the whole snippet, including opening and closing tags.
• Check the tag type: this box is meant for link, meta, style and script tags. To place visible HTML (a table, a form, an iframe) in one spot, use a Code Embed element instead.

My site layout broke after adding code The settings warn: "WARNING: Invalid code added here might break your website." Delete the code you added, publish again, and check the snippet with the tool's provider.

The browser console shows "A custom code script on this page failed:" One of your scripts throws an error. TeleportHQ catches it and writes it to the browser console as a warning, with the error after it. Read the error, then fix or remove that script and publish again.

Change custom code from the dashboard#

The project's settings page on the dashboard has the same code boxes, next to the Google Analytics and Tag Manager fields. There, changes only save when you click Save Changes.

1. On the dashboard, click ⋯ on the project's card, then Project Settings.
2. In the menu on the left, click Custom Code.
3. Scroll to Custom code, click Head or Body, and paste your code.
4. Click Save Changes. The message "The changes have been saved" appears.

Good to know#

• Custom code vs Code Embed: Custom code applies to every page and adds nothing visible. A Code Embed element puts code in one place on one page, like a booking calendar. See How to add your own HTML or JavaScript with Code Embed.
• Tracking pixels such as Meta or TikTok go in the Head box. See How to add a tracking pixel (Meta, TikTok, LinkedIn).
• Custom code is included when you download your site's code.