Why would you want this?

Remember the email where the customer mentioned the latest set of changes? Yeah, neither do we.

Having all design-related comments in one place saves you time. Time you can spend working.

All it takes is a Disqus account, and a couple of lines of code anyone can copy and paste.

Encourage feedback, don't look for it.

Superawesome design discussion is a very simple widget for your website that embeds a Disqus comment box, enabling your team or customers to leave feedback on your designs.

The main advantage of using this widget is that it encourages all design-related conversations to reside in a single place, directly on the mockup page.

The idea came about when we got tired of discussing designs with our customers in project management apps, or through email. Chasing down discussion threads and email messages was a waste of time, and we wanted our customers to be able to provide feedback right on the mockup itself.

Disqus comments seemed like a perfect solution to this as they are easily embeddable, and allow image attachments which are indispensable when you are trying to get your point across.

We simply enhanced the presentation and behavior of Disqus comments with some simple jQuery code so that it's out of the way most of the time, but you can bring it up whenever you want to post a thought, or see what others wrote.

Of course the use of this little widget isn't limited to design discussions. Feel free to use it however you see fit.

Enough explaining. Let's set it up!

First of all, you will need a Disqus account. We recommend opening a separate account tied to your company email.

Next thing you need to do is to register a site with them, which basically means you are setting up the comments backend for the project you want to include the comments in. You only need to register one site, and you can use the same embed code on as many pages as you'd like.

Feel free to name the site however you'd like, we usually go with “[project_name] Design Discussion”. This is totally up to you.

Then you will get a chance to choose your site's Disqus URL, which is very important and you need to remember it. The Disqus folks also call it “site shortname”. You are also able to choose a category but that's largely irrelevant for this use case.

At this point you are pretty much all set since all we really need is the site shortname, but let's check out some other settings of the newly created Disqus site.

We suggest you take notice of the following options (all in the General category):

Set the default sorting to newest first

to newest first Uncheck the discovery option (you probably don't want people finding your discussions randomly)

option (you probably don't want people finding your discussions randomly) Check the guest commenting so your customers don't neet to register for a Disqus account in order to comment on your mockups

so your customers don't neet to register for a Disqus account in order to comment on your mockups Make sure media attachments are enabled

Than make sure that your profile has the “Keep my profile activity private” option checked, so that your profile doesn't leek out potentially confidential information about the project.

We also think it's a good practice to create a completely separate Disqus account for this purpose.

The Code

Getting the comments into your mockup pages is really easy. We are going to assume that you are using this for an HTML mockup/template, but if you'd like to use it for image-based mockups all you need to do is create a web page containing your mockup as an image, than embed the code into that page.

There are two ways you can do this:

Download the package or clone it from GitLab (look for the “Download ZIP” button). Go this route if you want to modify the code or restyle the widget. Use our hosted version of the code (recommended).

Before we move to the embed code, you need to make sure you have the latest version of jQuery included. If you don't, feel free to paste this line of code directly before the closing body tag of your mockup HTML page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Next thing you need to do is take the following code and paste it into your mockup HTML page also right before the closing body tag, but after the jQuery include:

<script type="text/javascript" src="https://s3.amazonaws.com/sprawsm/sprawsm-discussion/jquery.sprawsm-discuss.min.js"></script> <script type="text/javascript"> // Your Disqus site shortname var disqus_shortname = 'yourshortname'; // Unique discussion ID var disqus_identifier = 'yourdiscussionid'; // Path to stylesheet // If you are using a relative path, make sure it's relative to // jquery.sprawsm-discuss.js file and not this document var sd_path = 'https://s3.amazonaws.com/sprawsm/sprawsm-discussion/sprawsm-discuss.css' </script>

Let's take a moment to analyze the lines you will need to edit:

<script type="text/javascript" src="https://s3.amazonaws.com/sprawsm/sprawsm-discussion/jquery.sprawsm-discuss.min.js"></script>

Make sure to input the correct path to the file jquery.sprawsm-discuss.min.js , depending where you have uploaded it on your webserver or hard drive. The example above includes the hosted version of the file.

var disqus_shortname = 'yourshortname';

This is your Disqus site shortname, and you can get it from your Disqus profile.

var disqus_identifier = 'yourdiscussionid';

This is the part that tells Disqus how to link up your page with the appropriate comment thread. Just make sure that you have a unique identifier per mockup, and you will be fine.

var sd_path = 'https://s3.amazonaws.com/sprawsm/sprawsm-discussion/sprawsm-discuss.css'

This is the style sheet that adds the design to the whole thing. It's important to note that this path should be either absolute, or if you're using a relative path, make sure it is relative to the jquery.sprawsm-discuss.min.js file, and not your HTML page.

If you've done everything correctly, you should be able to see the comment icon in the lower right corner of your browser widow, and the discussion should load without a problem.