[How to] Create a Typed Text Effect In Unbounce

7 years ago
30 January 2017
90 replies
1300 views

Userlevel 7

Noah
Former Unbouncer
126 replies

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

90 replies

Page 4 / 4

(Edited) I couldn’t get this to work, but it turned out I just didn’t have jQuery enabled. Thanks to LeeAnn from the Unbounce team for figuring that out! Leaving this here in case someone else gets stuck for that same reason.

Same here. Can you update this effect while we have a form on the page?

Same here. It would be great to have this js running smoothly on a page with a form

Hi, were you ever able to get the two to work simultaneously?

Thanks!

Hello!
First of all, thank you very much Noah for all your scripts!

My question is: does anybody know why when I use this script along with other animation scripts (like this “onScroll Animations”: [Tips & Scripts] On-Scroll Animations), the onScroll animation script stops working? Is it because this typed text effect script somehow prevent the other from working because there is something interfering? No idea 😅

Thank you!
Miriam

Same thing happened to me. Did you figure out a way to get around this?

Remove the Jquery from the typed-text effect. See if that works. It worked for me.

Hey unbounce community! I am having issues implementing this to my page.
Can someone tell me where I’m going wrong?

Userlevel 7

Hey @Elliott1,

The placement of the script is wrong and you are also missing jQuery by the looks of it.

Start with these two things and if you are still running into issues, I would download the template from the original post above and compare it piece by piece to your own page, until you find out what’s missing.

Best,
Hristian

OMG thank you Noah, i´ve been trying to make this work for quite a while now, and this finally fixed it. I was just about to give up. The problem in my case was, that while the effect worked, it would not show up in the right font/size/color. Exchanging the ID finally did the Trick 🙂

Hi,
Would love to implement this script.
But can’t find how to “view source” for the text box or any other element on the page.
This button doesn’t exist…

To remove the Jquery just remove this entire line from the typed.Js code:

script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type=“text/javascript”></script

Anyone have a clue how to get this function to execute on the scrolling of a specific div?

Hello all 🙂
Can we change the color of the cursor? Thank you 🙂