Add custom code scripts

Add interactive elements to your project: mobile menu, accordion, carousel or learn how to create scroll animations.

Add scripts in Project Settings
Use the predefined TeleportHQ Custom Scripts

1. Add scripts in Project Settings

You can add interactive features to your static site right in the platform, without leaving it.

Embed JavaScript code

Whenever you need to add interactive elements to your website JavaScript comes in handy.

In order to embed JavaScript into your project, click on your project name to open the Project Settings view and then select the Custom Code tab.

There are 2 available sections: Head and Body in which you can embed your custom code.

The Head section can be used to inject any script or custom styling instructions which are not currently supported in the visual editor. Everything that you insert here will be injected first thing in the head tag of all the pages of your project.

Everything that you insert in the Body section, generally scripts, will be added at the end of your html structure, just before closing the body tag.

Please note that everything that you inject here will only be injected in the deployed/downloaded version of your project and won't have any effect in the Design canvas.

How to add custom code to your project

If you want to create a sticky navbar that appears after you scroll over a certain threshold (e.g. 400px), you can do the following actions:

Create the .navbar and .navbar-fixed classes in the visual editor
Create the slide down animation with custom code (you can see the code snippet example below in the Head box)
Target the navbar and detect how much you scrolled in the page (you can see the code snippet example in the Body box)
Add the animation to the navbar when it has passed the threshold and remove it when it is under it (you can see the code snippet example in the Body box).
Publish your project.

How to create sticky navbar

HEAD

Sticky navbar code for the HEAD

BODY

Sticky navbar code for the BODY

2. Use the predefined TeleportHQ Custom Scripts

We have created an open source GitHub repository where you can find the TeleportHQ custom scripts, with out of the box interactions. We will continue to add more examples in the near future.
The custom scripts can be used together with the Predefined Sections, by making sure of the following:

Add the below custom script link in Project Settings, in Custom code tab, in the Body.
<script src='https://unpkg.com/@teleporthq/teleport-custom-scripts'></script>

0. Go to Elements panel in the left menu, click on Sections tab and add a predefined section

How to add a Mobile Menu with Custom Scripts

The headers from the Predefined sections, can all be used together with the TeleportHQ custom scripts. The interaction will be visible and can be tested only after you publish your project.

Adding mobile navbar using custom scripts

Check out how the mobile menu works after the publish.

Publish and preview the mobile navbar
Was this article helpful?
Cancel
Thank you!