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
Example: Using custom code to create sticky navbar
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.

2. Example: Using custom code to create sticky navbar

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. The .navbar-fixed class should be defined like this:

.fixed-navbar {
   position: fixed;
   animation: slideInDown 1s both;
}

Create the slide down animation with custom code. Add the code snippet below in Project settings -> Custom code -> HEAD

<style>
@keyframes slideInDown {

        0% {
          -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
          visibility: visible;
        }
        100% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
        }
      }
</style>

Target the navbar and detect how much you scrolled in the page. Add the code snippet below in Project settings -> Custom code -> BODY

<script>
window.onload = () => {

      document.addEventListener('scroll', (e) => {
        const header = document.querySelector('.navbar')
        e.stopPropagation()
        const scrollTop = window.pageYOffset
        if (scrollTop > 400) {
          header.classList.add('fixed-navbar')
          header.style.backgroundColor = '#000'
        } else {
          header.classList.remove('fixed-navbar')
          header.style.backgroundColor = 'transparent'
        }
      })
    }
</script>

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.

For the animation to work you will need to create a class in your project

It can have any name, but it needs to have the following properties on it:

.animation-slide-in-down-2 {

   animation: slideInDown 1s both;

}

3. 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

Updated on: 08/03/2023