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.