วิธีการติดตั้ง

1. Download css

ดาวน์โหลดไฟล์ zhat.css และ zhat-run.jsไปวางไว้ที่ไดเรกทอรีเดียวกับหน้าเว็บ

Download : zhat.css (3.7k)
Download : zhat-run.js (134 bytes)


2. ก้อปโค้ดไปติด

วางโค้ดนี้ตรงจุดที่จะแสดง ZhatChat
<div id="zhat"></div>

วางโค้ดนี้ไว้ก่อนจะถึง </body>เท่านั้น
<link rel="stylesheet" type="text/css" href="zhat.css" />
<script language="Javascript" charset="utf-8" src="http://nok9.paidoo.net/zhat.js"></script>
<script language="Javascript" charset="utf-8" src="zhat-run.js"></script>
Tips : ใครชำนาญ html จะย้าย <link rel= ... ไปไว้ที่ส่วน <head>...</head> ก็ได้นะจ๊ะ

ไฟล์ทั้งหมด ให้เซฟเป็น utf-8 และไม่ต้องแก้ไข charset="utf-8" ที่อยู่ใน <script ...> ข้างบน ZhatChat จะสามารถทำงานได้ดีทั้งเว็บที่เป็น utf-8 และ tis-620 หรือ windows-874

ปรับแต่งเพิ่มเติม

ภายในไฟล์ zhat-run.js จะมีคอนฟิกให้แก้ไขข้อความที่ส่วนหัวของ ZhatChat, ชื่อห้อง , และขนาดความกว้างของกล่องสนทนา

zhat({ title:"Truehits's ZhatChat",
room:["zhat","เล่นเกม","ฟังเพลง","หาเพื่อน"],
width:300
});

การเลือกห้องสนทนาหลักของเว็บไซต์

    Zhatchat เปิดกว้างให้เจ้าของเว็บไซต์สามารถ ตั้งชื่อห้องสนทนาได้เอง และสามารถสร้างห้องสนทนาหลายๆห้องสำหรับเว็บไซต์ของเราได้ด้วย แต่มีกติกาอยู่ว่า ถ้าชื่อห้องที่ตั้งขึ้นมา ซ้ำกับเว็บอื่น ก็จะมาพูดคุยในห้องเดียวกัน เพราะถือว่าคุยเรื่องเดียวกัน

    วิธีการตั้งห้องสนทนาของเว็บไซต์ ให้สังเกตุในโค้ด ที่ก้อปไปติดตั้ง ตรงบรรทัด room: ... ตอนนี้ตั้งค่าไว้ 4 ห้องคือ zhat ,เล่นเกม ,ฟังเพลง และ หาเพื่อน ให้เพื่อนๆ เปลี่ยนชื่อห้องเป็นอะไรก็ได้ ชื่อแรกที่ตั้งจะถูกใช้เป็น Default ส่วนชื่อห้องอื่นๆ จะปรากฎในเมนูของ Zhatchat
...
...
room:["zhat","เล่นเกม","ฟังเพลง","หาเพื่อน"],
...
...

วิธีการปรับแต่งขนาดและสีสัน

ความกว้างของ Zhatchat กำหนดที่บรรทัด width:... ในโค้ดที่ก้อปไปติดตั้ง ส่วนอื่นๆ แก้ไขในไฟล์ zhat.css ที่ดาวน์โหลดไปได้เลย อยาก เปลี่ยนสี หรือใส่ภาพพื้นหลัง ปรับขอบ อย่างไรก็ทำได้ ขณะนี้ทางทีมงาน ZhatChat กำลัง จัดทำเวทีให้เพื่อนๆส่ง Theme เข้ามาอวดกันด้วย เราจะได้แลกเปลี่ยน Theme สวยๆกันเร็วๆนี้