Design Your Chat Page in Wapka

Hi, in this tutorial I am going to show you how is possible to design your chat page and add some similes or some more features, its so simple to do..

I know every one of you wanted to add chat service in your site but don't know how, I wast requested to writ about chat page and here I am.. :) I will show you how to design your cha page, how add smilies, how to use wcode in your chat text and many other options will be introduced in this tutorial.. Lets do it..
  1. Login to your free wapka account
  2. Goto Admin Mode
  3. Add a chat page via ES > Chat
  4. Now goto ES > Wap2 > Click Styles for content in forum/chat link > Now under the text Set styles only for: you will find chat ID that we have added in step 3 just click on its ID (i.e. ch:41373) > Now under the text or set own form for: click Messages in chat link, this will send you to the chat style changer page..
  5. In chat style changer page you will see two text boxes.. These two textboxes have some different tags, explained below..
    1. In the first box you can change styles for your chat one message and all other messages will loop on the basis of this style.. Ooops, I mean that the other messages will have the same style as well.. Hope you got it:) In this box you can use following tags, explained below
      • ::date:: = This tag adds the date of the message when it was added, you can change its format, will tell you later in this tutorial.. You can add any HTML tag to design the tag.. i.e. can add div tags or more.
      • ::user:: = This tag will display user name who added the message.. You can make it bold with HTML..
      • ::msg:: = This is th text that user added.. You can set HTML p tags to make it paragraph or do whatever you like.. No restrictions from my side..
      • ::prvar-N:: = This tag helps to get info from user profile page, I know I have not explained about profile variables in wapkatutor.. Please ask if you wanna know more about it as comment to this tutorial..
      • ::url_pchat:: = This tag is helpful if you wanted to allow private chat between users.. You can also design private chat site page as you like.. This tag should be used in HTML a tag.. i.e.
      All above code can be added in first box only.. You can add any HTML tags and styles in the first box of chat styles page.. You can make it as stylish as you want with CSS or HTML and even Javascript can be used in it.. :)
    2. Now under this text Style of the chat site:** is the second box. This box contains text that will design our whole chat page, so here you will some useful options as well.. Following are the lists of available tags to be used in this box with explanations..
      • ::REPLY:: = This tag create or in other words adds the link or textarea form to the chat page that lets the user to add the new chat message.. You can select link or textarea form as you like.. It all depends on you.. You can design it with HTML and CSS as well..
      • ::REFRESH:: = The second tag that you can use in the second box is ::REFRESH:: , this tag adds the refresh link by which user can refresh the page easily.. Although chat site is refreshed automatically after set amount of time.. :)
      • ::MESSAGES:: = This is simple tag and is mandatory tag used to add all the data from the first box above..
    Above are all the tags thats helps you to make your chat site user friendly and awesome.. You can design it as you like and can add HTML with CSS or only HTML..
  6. If you are satisfied with the design just click the SET button and it will change the chat page in seconds..
  7. Now then, if you want to tweak your chat page more then you can do it in very simple way.. just Goto ES > GLOBAL SETTINGS > CHAT > you will have following options to edit/change/moderate..
    1. Count of messages on one page: set count of messages in chat site..
    2. Delete messages older than (in hours): Set te hours in numeric value to delete the old posts in the chat automatically..
    3. Refresh time (10-300 seconds): Set time to automatically refresh chat page.. You can set a time in seconds between 100 and 300 seconds..
    4. Maximal count of letters in one message: Set the maximam letters in one message, letters more than the limit will be deleted..
    5. Time format (syntax)*: Set time format used in ::DATE:: tag.. If you want to show 1 hours ago, 2 days ago etc.. just set time format as --
    6. Private message user name format (recipient): and Private message user name format (sender): are there to set the style of sender and receiver in private messages in chat, I don't know why admin has added it here in this form but anyways.... :)
    7. Allow smilies in messages is used to set smilies in forum, like :) :( :D etc..
    8. Allow icons in messages allows you to add icon in your chat page.. Click the SET link to add icons and set its text.. With this .happy. will be changed to the set picture whenever user used it in message..
    9. If you marked Display adding form at the top of site with messages: option you will see the new message form at the tp of your chat page..
    10. Enable WCODE option lets your users to include allowed wcodes in their chat messages, you can set allowed wcodes by clicking the link after the text..
    11. Enable SPAM black list (set): Allows you to set the spam message blocker system in your chat page, by clicking SET link you can modify the blacklist text..
    12. Enable chat private messages (select menu in front of message box): It will enable the chat private message in the chat page which allows user to see new private message in chat page..
    13. Enable welcome message: Whenever new user will enter or join the chat he/she will see the welcome text, you can set it by clicking the set link
    14. Allow change color of the text: User will be able to see the select box with your defined colors with the new message form to change the color of chat message if you marked this option, you can allow colors click the Set link..
    15. Hide messages from blocked users (blocked in priv. messages list): It allow you option to hide the messages by users from blocked users list.. So users that are blocked won't see any messages by whom he was blocked..
    Every time you end up setting, don't forget to click the SET button at the end of the form...
  8. Thats it, go and check your chat page..
You can do many more in your chat page, I will write more about them in future tutorials... But that's it for now, I hope this tutorial will help you to make your chat site best than all... Comment for quick reply..
Join our facebook page
Create your own free wapsite in minutes
Request New Tutorials


  1. Thanks sir.I like your every tutorial.

  2. 1. at d first box ar we goin to clear d ones inside n insert d codes u gave us?
    2. Any time i click d private chat it wil remain in d chatroom..
    3. Hw cn i add edith,delete etc at d bottom of d message wn posted..

  3. 1. its upto you I just explained the useable codes..
    2. In step 7 and sub step 12 i wrote about it to activate the private chat.. If you will not activate the private chat it won't work in chat page..
    3. Not possible to delete or edit the chat message in wapka

  4. how to show user name with pics on our site

    eg- picJASIL

  5. You can use :userlist: code for this purpose, do you want tutorial?

  6. my site didnt show user name with picture., like on chat site only display USER NAME only...
    what i can do for USER NAME with PICTURE of user have set on his avatar

  7. I don't know if its possible in chat pages, did you saw this anywhere in wapka?

  8. Yes i have..
    just look @

    i have found that user name with users avatar

  9. Ok, I tink he has used forums (simple) as chat room, in forums you can show avatars of users from profile..

  10. how to show?No... he using chatroom...and show users avatars...

  11. Ok, I will find any way and then post new tutorial

  12. Very Thankfull to your GREATE Service

  13. how to set usericon in every msg? Pls sir

  14. Thief@ User can set ICON in is profile settings if allowed and then you can use the tag to show it..

  15. why is it that my chatroom message alignment is like this:


    username:.... username:....

    not like this



  16. Nice one bro, ur d best!

  17. Nice one bro, ur d best!

  18. Thanks for the tutorial but i ve a query that how to use html codes in wapka because whenever i have inserted it wapka says syntax error but so many wapmasters have use html and javascript for designing there site . So i request you please tell me how do i use html in wapka . Thanks in advance .

  19. What I was looking is to add home page link and inbox below the messages. Bt still couldnt find it.

  20. Mayuresh@ You can use html tags that are supported by xhtml version.. like often you use <br> in html for line break but its not true in xhtml version. You should use <br/>

    asghar ali@ Where you wanna do this?

  21. Thank u so much, i av been searching for this tut, i av a little problem Pls bro hw do i create a chat page

    that the top of the chatroom will contain all d names of d people in d rum, to be in d center, but without link to thier profiles.

    E.G online chatters,


    .texarea i.E emptybox,,
    .post msg.

    Pls bro i need it ugrently, i av been searching 4 dis....

  22. You can use autocontent of chat page and can add :online: code to display the names or what ever you like

  23. @Ahmed Habib hey actually i have an wapka site and i want to design it and i know only html nd css . So whenever i insert html code the msg comes that syntax error . So is there any solution for it please tel me . I need it badly . Thanks

  24. K. Hw do i rename it from =>REFRESH to =>RELOAD

  25. i need some help i want create a my wapka site look just like on facebook. after login page ..... can someone help meeeeeeee.

  26. This article is amazing as it helps me to get the sort of information was needed by me. I am thankful to get your article when was searching site chat

  27. This comment has been removed by a blog administrator.

  28. helpfull!!!!
    what about the comment textbox, please.

  29. How do you get a text box instead of a link for ::REPLY::???

  30. This wapsite supports most mobile brands, including Nokia, Sony Ericsson, Samsung, LG, HTC, Apple iPhone, Blackberry, Motorola and most Android phones etc.

  31. Really how do you change it from link to text box?????????????????????

  32. earn money...

    visit blog....

  33. y show me after upload u dn't have permission for this function in wapka site?

  34. Please visit my wap

  35. Thanks for sharing, Nice article @

    New Latest Technology Tricks !!

    * Mobile Tricks
    * Computer Tricks
    * Online Jobs
    * Earn Money Online
    * Latest Technology News
    * Internet Tips

  36. is it possible to allow user to upload pictures in this chatroom. if not =, how can i create a chat room where user can upload picture of their choice


You are always welcome to add comments and suggestion about the tutoiral. Please note that, we do not allow misuse and if you have any questions write briefly so that our moderators can understand your message and reply as early as possible.