How to add cool, dynamic testimonials to your carrd website for free

Testimonials are key for a good landing page, as they build trust and create social proof.

That is why I decided to add testimonials to my carrd landing page.

I've seen some nice looking interactive testimonials online, so I thought why not get this for my carrd page too?

As you can add custom code on carrd you can basically include (more or less) anything you find online which is written in html/css/js.

So, here is my take on how you can add your own cool testimonials on carrd without spending money.

🔍 1. Google your design

Your search query should run on the lines of html, testimonial, ui, template.

Before checking the normal search results I prefer to go through the image search, to see some designs I like.

Pro tipp: If you add "notepen" to your search query you can find results from codepen.io that have the code copy-paste ready

🍕 2. Copy & Pasta Time

Now you can copy and paste the code into your carrd page.

Go to

Add Element -> Embed -> Select Type 'Code'*

It's helpful to label your code so you know what it is when you continue working on your page.
In my case I named it 'html-testi'

Important
The html-code has to be Style inline and you should add it at the place of your website where you want to see your testimonials.

The css part is hidden and in the Head
Don't forget the <style> - Tag at the beginning of css and </style> at the end.

The js part (if the code has javascript) is hidden and in the Body End
Don't forget the <script>-Tag at the beginning of css and </script> at the end.

Now Publish and check, whether it's working.

Working? Yey! 🎉

Now, for the final part

3. 🎨Individualize it

The easiest and most basic way to individualize the code is by searching for the 'color' part of the (css-part) code.

Here, you can add custom colours to make it suit your page.

If you are able to read a bit of code you can even change things a bit, the nice thing about codepen is, you can make changes online and see them directly.
This way you can first individualize your code on the pin and then add it to your carrd page.

Try it out on here

CodePen Home Testimonials Sample 1

If you "broke" something you can simply refresh the page and start over, lol 😇 .

I recommend creating a codepen account and saving your individual codepen code so you can make changes later, but this is totally optional.

I individualized the colors and size of the arrows of the design I found you can see the final result here

before

after

That's it!
Now you have your cool, custom testimonials on your carrd page.

You can look at how it went for me on twitter

Show me your cool custom testimonials, or ask me anything in case a part of this article is unclear!