[Mini-Tutorial] How to Integrate Typed.js in Webflow

Hey Guys,

Here’s a mini-tutorial on how to integrate Typed.js by Matt Boldt in Webflow.
You can find it here: http://type-effect.webflow.io/

If something isn’t clear or perhaps difficult to understand feel free to reach out to me I’m happy to help!

Lot’s of love


Cool! Thanks for the tutorial.
Seems pretty clear to me. :slight_smile:

1 Like

Beautiful tutorial! :slight_smile: thanks for sharing with the community. :heart:

1 Like


Better still. Skip Step 1 & 2 by changing Step 3 to this:

var Webflow = Webflow || [];
Webflow.push(function() {
  $.getScript('https://cdn.rawgit.com/mattboldt/typed.js/master/js/typed.js', function() {
      strings: ["How to integrate Typed.js"],
      typeSpeed: 50,
      startDelay: 250,

And while you are at it, might as well merge 3 & 4 as they can be pasted into either the header or footer code now (I recommend Footer Code).

Now that’s down to two steps instead of five.


The sign of an awesome web designer is someone who presents even a simple tutorial in a beautiful, custom-built website rather than a text post :100:

Thanks for the tutorial. I assure you this will be put to good use on at least 2 of my sites.



Thanks @SidneyOttelohe

Trying this out now and adding custom styling… Any reason why I might be having cursor alignment issues with multi-line text?


@samliew I was looking for a way to skip 1 & 2 thanks for pointing this out! I’m not very good at js (yet). :smile:


Hey @JFly,

Try moving your typed element into a div wrapper and make sure to set the typed element itself to display: inline-block.

Could you share me your read only link?

Let me know if this helps!

1 Like

Yep. Thanks!


@JFly Ok so what I’d recommend doing is remove all the styling you gave ‘typed’ and style ‘typed-wrapper’ instead.

I’ve also updated the tutorial covering a bit more how to use multiple strings etc.

okay - styling removed from the typed div (except inline-block), and instead applied to wrapper.

The cursor still jumps down to the bottom of the paragraph after the first line…


Ah yes, I’m sorry I misunderstood your problem.

Try adding line break like this ["Sentence with <br>line break."] where you want your line to break.

Oh, I need to manually break the sentence? That sorta works against my need for responsive text reflow…

Great work @SidneyOttelohe :slight_smile: It will come in handy on my next website. Thanks for sharing!

1 Like

Thank you so much. I made use of it on my website : www.kalpah.com :slight_smile:


Thank you first of all for posting this tutorial and I have tested the script and it worked… until today. The link https://cdn.rawgit.com/mattboldt/typed.js/master/js/typed.js seems to down therefore causing the text effect to not work. Anyone else having this problem?

Hey @funhyun, the author seems to have deleted the cdn, but here’s another you could try: https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js

You could also download the file and upload it to your own hosting provider like amazon aws etc, here’s the original project link: https://github.com/mattboldt/typed.js/


Thanks for the speedy reply! I wound up doing exactly that as you stated. Downloaded the js file and used my own hosting. Have a great day!

1 Like

Most libs are hosted on Github. You don’t even need to use your own hosting: How to embed files hosted on Github

@samliew – Whoa, thanks for this tip!