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

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?

Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Page 1 / 4

Yaaaass!! Look at all those wonderful buzzwords!

This is -> 🔥

🙂

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

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 so you might not have got a chance to see it.

This perfectly works now.

So fun!

😀 looks awesome!

Thank you so much @Noah , this really makes that landing page get some life of its own 🙂

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!

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?

Thanks for this!

Does it work on Mobile?

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

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

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:

😂

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!

Hmmm…I know I can do this but, Dammit Noah, I’m a marketing strategist not a coding master!

Perhaps I should be using the Force? I must unlearn what I have learned.

Do I have to shut down all the garbage mashers on the detention level here? IN other words, after the text is surrounded, do I have to add the script from your original post?

Okay, I know this should be easy, but I’m gettin’ nowhere. I can do the first step, but nothing happens. The steps 3-6 are to infinity and beyond for me right now…I’d love to be able to offer this feature on my landing pages…another day perhaps. Thanks for your efforts to bring this padewan further into the jedi coding space.

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

@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 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?