Getting Feedback on Codepen Demos

At the software company where I work, we’ve started using Codepen as a way of producing interactive demos or prototype pages. It’s slowly replacing the use of static images or mock-ups. We’ve started sharing the URLs for these with customers to get their feedback on new features.

This could be done by sending them 2 URLs, one for the pen and one for the feedback form, but it’s not as good as being able to complete the form whilst viewing the demo content at the same time. I came up with a way of requesting feedback within the pen.


I embedded a SurveyMonkey survey tracking script within the pen. I amended the pen design slightly to add a sidebar div and then added the SurveyMonkey embed JavaScript block within this, in the HTML pane of the pen. The script had to be here so that it rendered in the right place. I gave this sidebar a fixed width so that we could control how the survey contents appeared. We then had to write the survey in such a way that it didn’t require much screen width and that all questions would fit into a sensible minimum screen height. In short, we kept questions short, no lists of 10 radio buttons.


I decided to also embed CrazyEgg. If you don’t know it, it’s a tool that allows you to track mouse clicks. It’s a very useful way of knowing which parts of your screen get the most interaction. We added this script into the head content, within the HTML settings. This is a paid service but you can get a free trial for a short time.

Debug Mode

The 2 scripts seemed to get blocked when we tried using the pen in Editor or Full Screen modes but Debug mode, which runs the code as it is without any header or validation, worked like a dream. You need a PRO account to use this mode. Well worth it anyway in my view.

Feedback Ready

I’m now looking at building this out as a template ready for future feedback gathering.

Online ways to launch a website

3... 2... 1... lift off!In the offline world when you create a new publication, like a brochure or catalog, you need to plan its distribution. You need to get it in front of your potential customers. Online is no different.

Too many people out there still seem to think that having a website built is the job done. Get a website and then sit back and wait for people to visit it. Wrong. The offline equivalent is having your brochures printed and then leaving them in their boxes. Just building a website is not enough.

So, what can you do to distribute it and get it in front of your online customers? Here are some simple steps that should help.

Firstly, you need to change the way you view the website compared with a more traditional printed brochure. The website is not equalivalent to a brochure. Your website in isolation is not worth anything. No, really. It’s completely worthless. Without any way to reach it it may as well not be there.

The way to get it out there is by creating links to your site. These can be links in emails, on other website’s pages or on search engine results pages, like Google.

To get your site to appear in the search engine results you need to let the search engines know that it exists. You can either submit it to the search engines manually or just create links to it from other sites and they will find it and do the rest.

For more information on building links please see my other article Links, link exchanges and strategies.

It takes time to build links and get found through the search engine results pages so what else can you do? Well, this may be stating the obvious but tell people. Tell everyone. And I mean everyone. Even the people who you don’t think will be interested may know someone who is.

Ask for feedback. Approach people and say you need their help and value their opinion. We all love to feel important, valued and that we can help someone else. Send them a link and ask for their feedback. Most of them will take a look and if they’ve had a quick look it will increase their chances of remembering your site in the future.

Win win win! One of the easiest ways to get people to visit a web page is to incentivise them, put something in it for them. Running a competition is good. This will not only pull people in but may also have a viral effect as people forward links to your web page to friends and family. It also provides an opportunity to capture their data (only with their permission, of course) and approach them again in future.

Use social networks. By posting a link on facebook or twitter you can reach huge numbers of people in minutes and if they like what they see it can really snowball.

In short, when you’re budgeting for a new website like Click here to read more about Carlson Knives you should add in some budget to launch it or it may not provide you with any value.