• email marketing solution

Using Emoticons

Preamble

Many people don't seem to realise that you can easily use emoticons with sendcard. Sure, they may not be built into the script but it's an easy feature to add. This tutorial is designed to get your sendcard installation working with emoticons.

Please note: This tutorial assumes that you have installed sendcard in the location http://yoursite.com/sendcard/, and keep the images used in sendcard in http://yoursite.com/sendcard/images/. If you have changed these locations then please remember to alter the directory names below!

Stage 1: Add the emoticons

This is not strictly necessary, but I thought it easiest if the user could click on an emoticon and add it to the card, rather than just telling them "Enter ;-) and see what happens". So I added the following table into form.tpl down by the message box:

When placed in your document it should look like

Emoticons

You can find these images in the zip file at the end of this tutorial.

Stage 2: Add the javascript

Paste the following javascript into form.tpl:

<script langauge="javascript" type="text/javascript"> // This javascript was adapted from phpBB function addEmoticon(text) { text = ' ' + text + ' '; if (document.sc_form.message.createTextRange && document.sc_form.message.caretPos) { var caretPos = document.sc_form.message.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text; document.sc_form.message.focus(); } else { document.sc_form.message.value += text; document.sc_form.message.focus(); } } </script>

This javascript allows you to add an emoticon just by clicking on it.

Stage 3: Make sendcard recognize the emoticons

Open templates/replace.txt

Remove the following lines:
( (
) )
£ £

Add the following lines (remember there should be a tab between the emoticon and the image tab):
:-) <img src=images/emoticons/smile.gif width=15 height=15 border=0 alt=:-)> ;-) <img src=images/emoticons/wink.gif width=15 height=15 border=0 alt=;-)> :-D <img src=images/emoticons/biggrin.gif width=15 height=15 border=0 alt=:-D> :LOL: <img src=images/emoticons/lol.gif width=15 height=15 border=0 alt=:LOL:> :-O <img src=images/emoticons/eek.gif width=15 height=15 border=0 alt=:-O> :-( <img src=images/emoticons/cry.gif width=21 height=16 border=0 alt=:-(> :-X <img src=images/emoticons/mad.gif width=15 height=15 border=0 alt=:-X> :thumbs: <img src=images/emoticons/xyxthumbs.gif width=25 height=18 border=0 alt=:thumbs:> :!: <img src=images/emoticons/warning.gif width=15 height=15 border=0 alt=:!:> :thumbup: <img src=images/emoticons/good.gif width=15 height=15 border=0 alt=:thumbsup:> :thumbdown: <img src=images/emoticons/bad.gif width=15 height=15 border=0 alt=:thumbsdown:>

Save the changes.

Stage 3: Upload and test

That's all the modifications made - now upload the files and send yourself a card to check it works. Don't forget to upload the emoticons to the images directory!

You can download the files used in this tutorial for your own use if you want. Thanks to Tommy Heinig for creating and giving permission for me to redistribute these superb emoticons!