Typed.js Help

I Need Help
1

I need help installing Typed.js, or building a custom bric for typed.js

I’ve inserted the CDN into the page header, but haven’t been able to get it working using the HTML Bric or a custom bric

Ideally I’d like to build a custom bric for it, which would allow me to edit the strings in a more user-friendly way - any help is appreciated

2

The string from static HTML feature for SEO looks brilliant.

You need more than just linking to the .js file. You have to use a script as well for it to work.

This page can help you with that

http://mattboldt.github.io/typed.js/

3

Hi @PeteSharp, I did see the demo site, but when I add the script to a bloc I don’t see anything populate when I run the preview.

I know I’m missing something super basic, I’m just not quite sure where to start…

4

Well a good place to start is post what you have tried, otherwise no one knows.

5

Fair enough lol.

I have the following in the HTML header in the page settings
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

Then, using the custom HTML bloc, I have
<script>
import Typed from 'typed.js';

var typed = new Typed("#typed", {
strings: ,
typeSpeed: ,
backSpeed: ,
backDelay: ,
smartBackspace: ,
shuffle: ,
loop: ,
});
</script>
<span id="typed"></span>

6

Put your script in the page footer, you can select this area in the code bric. Also your script is wrong I think, I’m not on my Mac sorry, but remove the import line.

1 Like
7

Thanks. I’m honestly not 100% sure what to do - I’m super green with all of this. Putting the script in the footer and removing the import line didn’t fix the problem, so I’m going to have to table this one until I can find a more basic tutorial on this.

Thanks anyways.

8

Hey @helius

To get their example working do the following… (I added the loop)

Page Header

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

Code Bric

<div id="typed-strings">
  <p>Typed.js is a <strong>JavaScript</strong> library.</p>
  <p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>

Page Footer

<script>
  var typed = new Typed('#typed', {
    stringsElement: '#typed-strings',
    loop: true,
  });
</script>
1 Like