[How to] Create a Typed Text Effect In Unbounce

  • 30 January 2017
  • 90 replies
  • 1285 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

Florian_Maroto
Badge

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

L

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

J

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

ulv

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…

Johanna_Lebowski

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 🙂

Hristian
Userlevel 7
Badge +3

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

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Elliott1

Screen Shot 2020-04-10 at 1.42.04 PM

Elliott1

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

Screen Shot 2020-04-10 at 1.41.44 PM

Devin

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

Tyler_Harris

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

M

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

TT_21

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

Thanks!

A

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

A

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

L

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

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 🙂

Agencia1x

Thank you @Noah … It works so good!!

Antoine_Bonicalzi

Works like charm! Thank you 🙂

M

Hey @Noah, I’m having an issue with the typed effect working while there is a form on the page. If I remove the form, the typed effect works perfectly. I tried changing the span id to something random instead of “typed” just incase there was something else calling “typed” in the form, but still it is not working. Is there a way to get this to work while still using a form on the page?

Thanks,
Mike

T

Does this work for PopUps?

E

@Noah Thanks for sharing! I got it to work but how can I increase the time each word is visible before it changes to the next?

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!

A

Hey! I’m having the same problem. Did you ever find a solution to change the cursor size and colour?

N

Thanks Noah! It works perfectly! Is there any possible way to have the text fade out after it has been typed rather than have the current backspace typing effect? Thanks for your help again!

Noah
Userlevel 7

Hey there, based on your screenshots it looks like you need to remove the # from your textbox source code. Hope this helps!

Reply


Terms & ConditionsCookie settings