This is the Asana Bookmarklet. Drag the “Send to Asana” link onto your browser’s bookmark tab to save it.

Send to Asana

(Read the Delicious guide to installing a bookmarklet if you’re not sure how, but if you’re using Asana I’m sure you won’t need to).

To see the rest of our bookmarklets, visit our Code page.

Bookmarklet Code:

Here is the raw code (scroll down to see how to customize the code for extra users or specific projects):

javascript:location.href='mailto:x@mail.asana.com?SUBJECT='+location.href+'&BODY='+encodeURIComponent(window.getSelection());

What the Asana Bookmarklet Does & How it Does it:

It is currently designed to create an Asana task with the URL of the current page you’re viewing as the task title, and any highlighted text on the page as the task notes.

At this point in time (12/29/2011) Asana doesn’t have an API, but they do allow tasks to be created via email. This bookmarklet creates an email that opens automatically using the mailto: format. You’ll then hit send on the email to create the task.

Note: if you’re using Gmail, click here to find out how to make gmail your default email client for mailto: links.

What the Email Looks Like:

Email Format:

To: x@mail.asana.com
Subject: http://www.page-youre-currently-reading.com/
Body: This content will be highlighted text on the page. If you don’t highlight any text, the email body will be empty (aside from your email signature)

Example: If you’re reading our article about halloween link building, and you want to add a task to Asana based on one of our recommendations at the end of the article, you could highlight the desired text, click the bookmarklet, and have the following:

To: x@mail.asana.com
Subject: http://www.hoodwebmanagement.com/853/great-examples-of-halloween-linkbuilding/
Body: 2) Think Long Term:
Holiday content is evergreen content, so be sure to follow best practices for evergreen content so you can keep promoting it year after year (That means no “Halloween 2011″ in the title unless the content is actually 2011 specific).

So, you can copy content on the page as basic text, with minimal formatting aside from link breaks. Images and non-text will not be added to the email body.

Here is how the above example looks in Asana:

Asana Bookmarklet Task

How the Task looks in Asana after it’s created.

Careful: If you try and highlight too much page content (like an entire article) you can get a URL error if you’re using Gmail or other browser based email clients. I don’t know if it will cause issues in desktop email clients.

Assigning the Task to a Project:

Currently the bookmarklet will assign the task to your general tasks, not to a specific project. If you’d like to assign it to a specific project (for example a project titled “Bloggers to Target” or “Directories to Submit to”), you’ll have to edit the x@mail.asana.com email in the bookmarklet. To do so, you’ll need to read this guide on how to find out your project id and add it to the email: email tasks into a specific Asana project.

Here is an example of how it might look if your project id is 298234734563:

javascript:location.href='mailto:x+298234734563@mail.asana.com?SUBJECT='+location.href+'&BODY='+encodeURIComponent(window.getSelection());

Assigning the Tasks to Other People:

If you’d like to assign the task to another Asana user, use the following javascript code, and edit the part that says “email@email.com” to the email of the user you’d like to assign the task to:

javascript:location.href='mailto:email@email.com?CC=x@mail.asana.com
&SUBJECT='+location.href+'&BODY='+encodeURIComponent(window.getSelection());

If you’d like to add other users as followers, just add them as a &CC= or &BCC= like this:

javascript:location.href='mailto:email@email.com?CC=x@mail.asana.com&CC=
email2@email.com&BCC=email3@email.com&SUBJECT='+location.href+'&BODY
='+encodeURIComponent(window.getSelection());

Notice that only the first CC has a question mark ? before it – the rest should have an ampersand &CC= or &BCC=.

Miscellaneous Notes:

Someday, when Asana has an API, I imagine they will create one bookmarklet to rule them all that allows a logged in user to have much more functionality (full user control, tags, project dropdown menu – I’m thinking of an implementation that is visually similar to the Pinterest “Pin it” bookmarklet).

Testing:

It has currently been tested in Chrome and Firefox on a Mac computer.

Currently it is known to break when trying to highlight too much text on a page. You should be able to highlight a few paragraphs in most cases, but your mileage may vary.

Disclaimer:

I’m not responsible for anything this bookmarklet does to your computer – use it at your own risk. It is provided without warranty and free of charge. Please feel free to hack it up, and please feel free to link back to this page if you create something awesome using this code as a template.