How to customize a Patapage button

In the Patapage demo we present functionalities through docked buttons; this is a way to make them visible, but it is not necessarily so: services may be activated by clicking any kind of link – actually, they may even be activated when the page simply loads (this will also be an option in a Patapage upgrade we are preparing). In this post we’ll see how to create custom links activating patapage.

The Patapage buttons can be drawn at least in two ways:

1. As docked buttons
2. As inline links

1. As docked buttons

The docked button is the default and it will appear vertically on the left side of the page; this is injected by the Patapage script itself (one for each functionality you paste into the page body); in this case you can customize the label and the color of each docked button.

2. As inline links

This option will add a link tag to the Patapage generated code; you can manage and adapt its appearance to your page design. For example you can put the link into your menu bar, or you can have a clickable image instead of a textual link, or you can add your custom CSS class, or you can apply any JavaScript effect to show and manipulate its appearance…

To make this clearer I’m going to explain how to customize a PataWiki button in your page:

1. Go to the back office of your Patapage account; choose PataWiki from the left bar:

2. Write your label and check the “button as simple textual link” check box:

3. Customize the appearance of the overlay and the screen window:

4. Generate the code and paste it into your page:

As you can see at the top of the pasted code there’s an <A> tag that you can place wherever you need on your page; for example you can move it to your page menu or inside your text, you can add special CSS classes or manipulate it via JavaScript. The only important thing is not to remove the ID, needed to attach the correct behavior to the click action.

Here is a screen of a custom Patapage button bar:

This is the code inserted for the menu:

Notice that there are four links referring to Patapage buttons (the one with the ID) and one pointing to an external link (“about me”). The patapage buttons action is defined in the part of the script you pasted at the bottom of your page.

You can see this example at: http://patapage.com/demo/indexIntegrated.jsp