How to Add a Typed Text Effect to a Classic Builder Page

A typed text effect cycles through a list of words or phrases inside a headline, typing and deleting each one in turn. Use it when you want a single headline to highlight several features or audiences.

This is community code, not an official Unbounce feature. It relies on third-party code that Unbounce Support can't troubleshoot. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Before you start

The script and the optional cursor CSS are hosted on GitHub as Typed Text Effect.

Add the effect to your page

1. Add a text element with some default text. Make the element wide enough to fit the longest word or phrase you plan to type.

2. Open the text element's source view and wrap the default text in a span with the ID typed. You can use a different ID or class if you prefer.

3. Copy the script from typed.js and add it to the JavaScripts section with placement set to Before Body End Tag.
4. In the script, replace .element with the ID from step 2, for example #typed.
5. Add your words or phrases to the strings array.
6. (Optional) To add a blinking cursor, copy the CSS from animated_cursor.css into the page's Stylesheets.

Test the change

Run an A/B test with a small share of traffic to confirm the effect doesn't lower your conversion rate. See How to Run an A/B Test.