I'm always on the lookout for tools, techniques or hacks to help automate something in my business.  This usually relates to Podio directory and this "hack" can certainly be used to improve a Podio process.  What I'm talking about is a Bookmarklet.

What is a Bookmarklet?

It is simply a bookmark that instead of having an Link (webpage address) behind it, it has JavaScript code that does something.  To me it's exactly like a Macro in Microsoft Office.  

Now, I did not come up with this myself. I need to give credit to Andreas over at the Pushing Podio blog.  It is a pretty new blog, but has some great tips for taking Podio to the next level. Andreas was the creator of Globiflow.

In this article I'm going to touch on a few of his suggested uses for Bookmarklets as well as explore a few other potential uses.

Here is a simple example that will show you how a bookmarklet works.  This is not very useful, but this example is more about what it takes to setup the bookmarklet.  

Change Webpage's Background Color

Step #1: Open Bookmark Manager. 

To do this you can click this link to open your Bookmark Manager, Press Ctrl+Shift+O on your keyboard or go into your Chrome's Bookmark menu and click Bookmark Manager.

Step #2: Click Add New Bookmark

This will bring up a window that contains 2 fields (1) Name and (2) URL

Step #3: Give Bookmarklet a Name

This can be anything you want.  I like to be fairly descriptive even if the name gets a little long.

Step #4: Enter the Javascript Code

This is done entered right into the URL field.  Now they don't give you a lot of room, so if you are writing your own script it's best to do it in a text editor of some kind (I use notepad).  If you are just copy and pasting, then you can just paste it in the url field.

The code we are going to use to change the background color is this...

javascript:(function(){document.getElementsByTagName('body')[0].style.setProperty('background-color', 'black', 'important');})();

To help explain what is going on here, I'll break it down for you..

javascript:( - this part is telling chrome that the bookmark contains javascript code.

function() - is used to create a procedure that will run when the bookmark is selected. 

{ - represents the start of the code within the function

document.getElementsByTagName('body')[0] - selects the body tag of the html page.  This is the outer most section of a webpage content area.

.style.setProperty(.background-color','black','important'); - is where we change the background color of the page to black.  Background-color is a property of the Body tag.  There are many properties that can be changed.

} - is the end of the function

) - just closes out the javascript code

(); - ends the bookmarklet

While this is confusing if you are not a javascript coder, the part you really have to only concern yourself with is the stuff inside the 

{...} 

The rest of it is the standard instructions for telling the browser this is a bookmarklet.  

 javascript:(function(){...})();

That is pretty much it!  Once you do it a few times the setup is a snap. 

Another good thing about Bookmarklets is that you can drag them up to your bookmark bar (in chrome) just like links.  See the link below, drag that up to your bookmark bar.  It's the bookmarklet from this example.

Change Webpage Background Color Bookmarklet

The last thing to figure out is how and when to use the bookmarklet.  The general idea is that what ever webpage you are on is where the bookmarklet code will run against.  So if you are on Google.com and click the Change Webpage Background Color bookmarklet, Google's background color will change to black.  Go ahead and give it a shot!

The reality is that depending on the webpage you are on and the code in the bookmarklet, it may not work.   That is not a bad thing, it just means if it's not working on the page you need it to, then you'll have to adjust the code to work with the specifics of that page.

A great use example for a bookmarklet is to call up a Lead Input Form.  I found a great example over at Pushing Podio (Chrome Bookmarklets for quick Podio Entries)to do this.

The cool part about this is it just pops up a window with your form inside.  It doesn't create a new browser tab.

The javascript to do this is 

javascript:(function(){ window.open("*** Your App's Webform Address***", "New ScratchPad Item", "height=500, width= 700") })();

You will have to replace the url with your desired App's webform url.  This can be found here..

So as a full example, this is what my bookmarklet code would look like...

javascript:(function(){ window.open("https://podio.com/webforms/19624869/1326747", "New Lead", "height=500, width= 700") })();

As a side note, you can adjust the height and with of the window that displays by changing the values (height=500, width=700) to fit your form better.

Let's say you have a weekly email that you want to send out to your buyers list that contains new properties.  How do you automate that?  Using this bookmarklet and a GlobiFlow process you can.

Your GlobiFlow process will pull in all new properties from your Lead App. Then it will send an email to each person in your buyers app.  Now how are you going to trigger this flow?  Using a bookmarklet.

The code to pull this off is as follows...

javascript:(function(){
    var webhook_url = "https://secure.globiflow.com/catch/xxxxxxxxxx";
    var request = new XMLHttpRequest();
    request.open("GET", webhook_url, true);
    request.onreadystatechange = function() {
        alert ("Webhook Triggered");
    };
    request.send(null);
})();

You'll need to grab the webhook url for your flow and enter it in here, but outside of that it is fairly easy to implement. 

To get a full guide on setting this up, go over to the article on Pushing Podio..

Chrome Bookmarklets to trigger GlobiFlow Webhooks

While bookmarklets are a simple concept, the use of javascript to execute the code can make this tough on non-technical people.  Javascript is not the easiest language to learn.  

On the positive side, there are TONS of examples of bookmarklets out there they can be easily adapted to what you might want to do.  Just take a look at Marklets.com.

In the end, this is just another useful tool that has endless possibilities.  It is really only limited to your imagination.  Andreas over at Pushing Podio seems to have a knack for coming up with these things. I am a big fan of his for sure!