Extend HighLevel Websites with JavaScript

ghl, javascript, highlevel

Main product image

Extend HighLevel Websites with JavaScript

See how I found a useful JavaScript library to extend a HighLevel webpage with a typing effect.

Did you know that you can easily extend your HighLevel webpages with JavaScript, even with third-party libraries? It could look something like this:

Demo typing effect - a smooth, animated text that types out your content automatically.

Let me show you how I did this. I was just typing “JavaScript typing effect” into Google, and a page like this came up from GitHub. I clicked on it, and here we go - you have the library for typed JavaScript. But all we need is the manual and the installation.

Installation

The installation is very simple. You just have this line of code:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.js"></script>

Let’s just copy it and then we go into the page builder. I made here a new blank page, make a new column, make a new row (oops, I made two, never mind), and then I click on “ADD element” and I pick the code element. I always double-click, I’m sorry.

So inside the code element, we have here the open code editor. We open it and here we paste our just copied line of code inside this editor, and that’s it for the installation.

Implementation

Next, we want to use the script. Let’s see in the manual - we scroll a bit down and there is something like this: “Zero-friendly strings”. So we copy the first one, go back into our code editor, paste it in, and then the second line - being the code in order, but this time I’m going to paste it here in.

Now let’s see if it works. I save it, I save the page, and then I click on review, and here we go - it works! Let’s make it a bit prettier like in the example.

For this, I’m going to use the pre-built sections. They’re really awesome. Let’s paste one in and here I changed text to “demo typing”, and the code element I’m going to put it here, but right now it just looks the same. It’s just typed in here, but we want to have it in the same font and the same styling like the heading here.

For this, I’m going to use a little trick. I’m going to right-click on it and click “inspect” on my browser, and then we’re going to see the Styles and the structure of the page. So it’s a div container, then another div container, and H1 like a heading one, and then a strong, and here we see a class. Let’s copy this class.

We go back to our code editor and we’re going to change this into our heading, and it should be strong. If you don’t know HTML, never mind - I’m going to copy the code in the description. You can just copy it and here we want “typing one”, I’m going to copy this line, then “typing this”, then we want to put here a div container, and here we want to have the class like we copied before. I’m going to paste it here in, and the div ends over here.

Let’s see if it works, and it works! It’s a bit fast, but it works. Let’s see how we can tweak this a little bit more to not be so fast.

Customization

I go back to the documentation and I scroll a bit down, and here we find the speed: typing speed, the back speed, maybe even the loop. Let’s pick first the typing speed. I copy this, go back to the code editor, and here over here you make a comma, you put the typing speed. Let’s put them in 100, then the back delay, now the back speed, let’s put them in 50, and let’s loop it. Of course, you can look at the documentation and tweak it for yourself to see what’s going on here. It’s all documented.

Let’s paste this one here, then we need to make the loop with the true statement, and the back speed we wanted 50, save it, and check how it looks. So good enough for me and it works - it loops!

Styling

Lastly, let’s make the font color outstanding like any example. For this, I’m going to go to the code editor. I’m going to put here in the class, I’m going to put another one - I just say “my-color”, and of course we need to define this color. Here in the custom CSS, I’m going to say for the dot for the class “my-color” and there were strong elements (parentheses). Let’s make it orange and important - that’s just so it overrides it. Save it and let’s see, and here it is in orange!

If it doesn’t work, you need to save it double times because it’s sometimes in the cache - you’ll never know.

Complete Code Example

Here’s the complete code you can use in your HighLevel page builder:

HTML Structure

<div class="container">
  <div class="content">
    <h1>Welcome to <strong class="typing-text"></strong></h1>
  </div>
</div>

JavaScript Implementation

var typed = new Typed('.typing-text', {
  strings: ['HighLevel', 'JavaScript', 'Typing Effect'],
  typeSpeed: 100,
  backSpeed: 50,
  loop: true
});

Custom CSS Styling

.my-color {
  color: orange !important;
}

.typing-text {
  font-weight: bold;
}

Final Result

This is how it looks. You can see the typing effect working perfectly with your HighLevel website. You can use it for you, for your clients, and in the same way you would put all the JavaScripts that you find inside the code editor, and you can just simply use it, figure it out.

If you have questions, write me in a comment. This was, by the way, my very first YouTube video, so it just can get better. Thanks for watching, see you in the next one!

Resources