[How to] Create a Typed Text Effect In Unbounce

  • 30 January 2017
  • 90 replies
  • 1284 views
Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

community tips scripts banner

Have you ever been asked to make a landing page “pop”? Don’t you just love that? Well here’s a way you can really WOW some folks with this nifty new script!

Introducing: Typed Text Effect in Unbounce :spinbounce:

Gone are the days of having to choose just one adjective, or just one feature to display on your landing page. Rejoice!

You can check out the demo page built in Unbounce here:
http://landingpage.noahmatsell.ca/typed-js/

How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Optional: Download the .unbounce file

Download the .unbounce template here.

Download the latest version of the script

https://gist.github.com/noahub/59f4bb0db7c6ec353709efdcbe1761dc

Step 1.

Create a new text element for your ‘typed’ text and add some default text. Make this text element wide enough to accommodate your ‘typed’ text.

Step 2.

Click ‘view source’ and create a new innermost span around your default text. Give this span an id of ‘typed’ (or another ID/class of your choosing)

Step 3.

Copy the script from ‘typed.js’ and add to your page Javascripts with placement ‘Before Body End Tag’

Step 4.

Replace ‘.element’ with the ID from step 2.

Step 5.

Add your ‘typed’ words or phrases to the strings array

Step 6.

Optional: for blink cursor effect, copy CSS from ‘animated_cursor.css’ and add to your page Stylesheets

Testing

Like any other feature that you implement onto your page, you’ll want to see what effect it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page, just to be safe. Documentation on A/B testing can be found here.

Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below! 🙂


Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

90 replies

Ashwin_Satyanarayana

You continue to spoil me like this 🙂 What have I done to you? Why? Why all this goodness?

Noah
Userlevel 7

@Andy2 + @Andy_Walker + @MPatterson22 , increasing the typeSpeed value will slow down the typing of the letters. You can also set the time before the typing starts by adding a startDelay variable with a value, and the backspacing speed with the backSpeed variable.

All together, your script might look something like this:

$(function(){
        //Replace .element with the class or ID of your target text
        $("#typed").typed({
            //Replace placeholder text with your own text
            strings: ["test", "test2"],
            //change speed
            typeSpeed: 100,
            // time before typing starts
            startDelay: 100,
            // backspacing speed
            backSpeed: 100,
            //loop the animation
	        loop: true
        });
    });

You can see all the custom options here: https://github.com/mattboldt/typed.js/.

I hope that helps!

Z

Hello @Noah,

I’m not sure if anyone else has noticed this. But it seems that the typed text effect does not work with many other javascripts. It appears that many of the other javascripts on the forum compete with the typed text effect and the typed text effect stops working. Just thought I would point this out. I’m no programmer, so maybe I’m wrong. But I’ve tried the typed text effect in combination with several effects, all of which work but stop the typed text effect. Then I’ve also tried several effects together without the typed text effect, and all of those seem to work in harmony (even in separate variants, I’ve tried adding typed text within the same variant javascript but it doesn’t help).

Anyways, if someone has a solution, that would be awesome because the typed text effect is really cool!

Noah
Userlevel 7

Dammit Tim! 😋 I’ve made a screencast to illustrate how this is done: https://www.screencast.com/t/ZyjyyPlrP1r

Basically, double click on your default textbox, click view source, find your default text and surround it with <span id="typed">YOUR DEFAULT TEXT</span>

Hope this helps!

Jess
Rank
Userlevel 7
Badge +1

Hey @Andy2!

Never apologize for n00b questions, I love 'em! Here’s a clip to give you an idea of where to plug in some of those scripts:

Feel free to chime in if you have any other questions, n00b-level or otherwise 🙂

Ashwin_Satyanarayana

So, I went ahead and did just that. Themed and style to suit my landing page, of course. Take a look at this and tell me what you think?

http://fetchprofits.com/wordpress/

Now, this works on mobile too. I might have had two versions (A and B) so you might not have got a chance to see it.

This perfectly works now.

OzTREKK

So fun!

Noah
Userlevel 7

😀 looks awesome!

Noah
Userlevel 7

Hey @Mark_H, it does! My demo page wasn’t optimized for mobile but it is now 😅 Take a look!

Noah
Userlevel 7

@Zoltan nice catch!

@Timothy_Hatch my apologies, the js snippet was actually referencing a ‘.element’ class whereas the the instructions reference the ID ‘typed’. I think this may have been causing your issue. I’ve updated the js snippet to correctly reference the ‘typed’ ID. Take a look here: https://gist.github.com/noahub/59f4bb0db7c6ec353709efdcbe1761dc24

Noah
Userlevel 7

hey @Oleksandr_Ponomarenk, can you try using the ID ‘#typed’ in your script as opposed to the ID of your textbox?

Noah
Userlevel 7

my pleasure :dealwithitparrot:

Zoe_Tattersall
Userlevel 6
Badge +3

One of the best scripts yet! 🙌🏾

Did I go overboard?! ➡️ http://www.detoxcleansenourish.com/webinar/call/

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
MMachi

Hi to all!
It’s seems that the link to the unbouce page template is broken.
Can you provide a new one?

Thank you so much 🙂

Jess
Rank
Userlevel 7
Badge +1

Yaaaass!! Look at all those wonderful buzzwords!

digibomb
Userlevel 6
Badge +1

🙂

Jess
Rank
Userlevel 7
Badge +1

Hey Ashwin! First off, great page! I love the way you’ve personalized it, and it doesn’t waste any time and cuts to the chase. I don’t see any of the typed text effect though! Did you republish your page after you made the changes?

It might be an effective tool used on your hashtags #wordpresssecurity, #webhostingtowin etc. but that’s just an idea 🙂

Can’t wait to see how it looks!

Ashwin_Satyanarayana

Hey @Jess , I think I was republishing the page when you might have visited it. Please click again and see if you can see it?

M

Thanks for this!
Does it work on Mobile?

Timothy_Hatch

I want to do this…and I’m givin’ her all I’ve got, but I don’t have the power captain!

Jess
Rank
Userlevel 7
Badge +1

I wish I could like this more than once, and I know it’s a Star Trek reference but I can’t help but think of this:

😂

Z

Hey Tim, I was having the same issue and I too am not a coder. I finally ended up using Noah’s original source code that had a span class=“element” instead of span id=“typed” for the text box and keeping everything else in the script the same (except the changing sentences of course).

O

@Noah Hey, it looks great when it works 😉

Here’s a link to how it does it on my end - http://offer.teensafe.com/blank-page/

Following all your steps I got the text “typed” but here’s the issue. For some reason it doesn’t type with the same font specs and uses default paragraph text.

Any chance you could take a look into this? It seems that I’m doing everything right?


Timothy_Hatch

So, how do I get to Tashi Station and get those Type Text Effect Power Converters?

"Whaddah you think you’re some kinda Jedi waving your hand around…?

Timothy_Hatch

I am totally Han Solo when talking into the comlink to the Empire Guards in Ep. IV when they are rescuing Princess Leia…“Uh, everything’s ok, situation normal…we’re fine here, how’ve you been…?” I am totally out of my element. I’ve read this entire thread, twice…anybody willing to send me a screen shot video walkthrough? I’ll buy you a drink at the Mos Eisley Cantina!

Reply


Terms & ConditionsCookie settings