Button, Image, and Linking Code

Ok, I'm going to keep this pretty simple. It's not rocket science, but if you've never worked with images or html code, it can look pretty confusing.

First you're going to need a Niteflirt button. You may have made one on the previous page of this tutorial, or you may have made some previously. The code as provided by Niteflirt looks something like this (a button of mine):

Now let's look at that button code. It breaks down into three parts.

1. The code for your button link, the one that makes the button work. <a href="http://www.niteflirt.com/messages/click_payment_button?id=44547265">


2. The code for the image, which happens to be the ugly gray Niteflirt mail button. Notice images start with "img src" which is code for "image source" <img src="http://www.niteflirt.com/niteflirt/images/D5_mail-mailbutton_V2.gif" border="0">


3. The end tag that closes the link to the button.
   </a>

In order to use a button image you have made or purchased, you need to host it on the web somewhere, then replace the ugly Niteflirt button image code with your button image code. If it's a jpeg (the file ends in .jpg), you can upload it to Keen. If it's a .gif (animated buttons are .gifs) or .png (as I am using here), you will need to host it off-Niteflirt, as Niteflirt converts all image formats to jpegs, and you lose your animation. Here's a little button image I've made to demonstrate.

This is hosted right here in this folder, but the full code I would need to have it show up on Niteflirt is

This is now a live payment mail button. If someone clicks it, it will try to send a mail, or if they are not logged in it will tell you to do so. You cannot click your own payment mail buttons. If you try you will get an error page.