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

You can add interactive features to your static site right in the platform, without leaving it.
* Event props for components are coming soon.

Embed JavaScript code

Whenever you need to add interactive elements to your website, JavaScript can quickly become the fast answer.
In order to embed JavaScript into your project, go to Project Settings -> Custom code tab.
There are 2 available tabs: Head and Body, where we can embed your custom code.

The Head section can be used for any custom styling :before, :after, .some-class:hover .another-class, keyframe animations), which are not currently supported in the visual editor.
The Body section is the place where we handle the JavaScript code and where you can add the scripts.
How to access Custom Code in Project Settings
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:
1. Create the .navbar and .navbar-fixed classes in the visual editor
2. Create the slide down animation with custom code (you can see the code snippet example below in the Head box)
3. Target the navbar and detect how much you scrolled in the page (you can see the code snippet example in the Body box)
4. 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).
5. Publish your project.
Custom code injection for making the navbar slide down when scrolling down the page

HEAD

Adding animations through custom code

BODY

Adding scripts through custom code

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>
-
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.
Headers with mobile menu functionality
Check out how the mobile menu works after the publish.
Deployed header with mobile menu interaction
made-with-teleport