رایچت بازی

رایچت رو میشناسید؟ یک ابزار گفتگوی آنلاین برای پشتیبان سایت که می تونه با بازدیدکننده ارتباط برقرار کنه. همان چیزی که الآن در گوشه پایین چپ این صفحه مشاهده می کنید.

در این صفحه فقط میخوایم با این ابزار چت آنلاین ایرانی یه کم ور بریم و بازی کنیم!

 

خب اول کار اینجا رو کلیک کنید تا من بهتون یک خوش آمد گرم بگم...

 

کلیک کردید؟ چطور بود. من وقتی می خواستم ابزار چت آنلاین روی سایتم بگذارم چند تا رو بررسی کردم. وقتی دیدم رایچت این امکان رو در API خودش گذاشته که من بتونم پیام آفلاین درج کنم شک نکردم که از رایچت استفاده کنم. نه اینکه بی ایراد هست. ایراد هم داره ولی تیم پیگیری دارند و هر وقت ایرادی گزارش می کنم با روی باز می پذیرند (به ویژه آقای آقاجانی که جا داره اینجا ازش تشکر کنم. بیشتر با ایشون چت داشتم)

خب بیاید بازی با رایچت رو شروع کنیم. فعلا دوست دارم تو این صفحه باشید. چند پاراگراف بخونید بعد خودم لینک سایت رایچت رو پایین تر گذاشتم میرید 14 روز تستش رو روی سایتتون پیاده می کنید.

 

 

مرحله اول بازی:

 

وقتی کدی  که رایچت به شما میده رو در سایتتون درج کنید، یک سری امکانات یا دستورات جاوااسکریپتی در صفحه شما فعال میشه. 

شما با درج کد رایچت فقط یک نماد چت آنلاین رو در گوشه سایتتون گذاشتید اما یک دستور هست که می خوام در این صفحه استفاده از اون رو خوب براتون جا بندازم.

دستور مورد نظر من این هست:

window.Raychat.sendOfflineMessage('متن مورد نظر شما');

اگر با کامپیوتر دارید این صفحه رو می خونید همین الآن F12 رو بزنید(تا کنسول مرورگر ظاهر بشه) در نیم پنجره توسعه کروم و فایرفاکس و Edge و (گلاب به روتون!) اینترنت اکسپلورر  یک تب وجود داره با عنوان Console. اون تب رو باز کنید و عبارت بالا رو به همین شکل یا با تغییر متن داخل کوتیشن کپی کنید و اینتر را بزنید.

اتفاقی که باید بیفته این هست که متن مورد نظر شما به صورت یک پیام آفلاین در پنجره رایچت درج بشه. اگر این اتفاق نیفتاد راه رو اشتباه رفتید! دوباره این پاراگراف رو خوب بخونید.

 

رایچت بازی

 

مرحله دوم بازی:

 

در صفحه اینترنتی که شما مشاهده می کنید کلی رویداد ممکنه اتفاق بیفته:

مثلا کاربر یک جایی, روی یک دکمه ای یا روی یک لینکی کلیک کنه.

یا با ماوس روی شکلی بایسته یا ازش دور بشه

یا توی یک کادری تایپ کنه.

کلیدی رو بزنه

و ... 

که کسانی که جاوااسکریپت بلد باشند می دونند که رویدادها زیاد هست. که هم میشه به صورت کد نسبتا طولانی و سخت جاوااسکریپت برای این رویدادها یک واکنشی رو برنامه نویسی کرد یا اینکه مثلا با جی کوئری برای یک رویداد به صورت راحت تر و ساده تر برنامه ریخت. خیلی نمی خوام فنی صحبت کنم. فقط یک مثال میزنم.

مثلا شما بیاید در کادر زیر اسمتون رو بنویسید:

 

کد مرحله دوم:

<input id="namefamily" placeholder="اسمت چیه؟" type="text" /><button>اجرا</button>
<script>
  var firstname = '', lastname = '';
  $('#namefamily').change(function(){
    if(firstname !== '') {
      lastname = $(this).val();
      window.Raychat.sendOfflineMessage(firstname + ' ' + lastname +' گرامی، امیدوارم از این مرحله بازی  خوشت اومده باشه.');
      firstname = lastname = '';
      $(this).val('') ;
    }else{
      firstname = $(this).val();
      $(this).val('') ;
      window.Raychat.sendOfflineMessage(firstname  + ' جان، حالا فامیلت رو وارد کن');
      $(this).attr('placeholder','فامیلت چیه؟');
    }
  })
</script>

 

 

مرحله سوم بازی: 

 

اگر مالک یا پشتیبان یک سایت باشید، احتمال زیاد برای شما هم چنین چیزی رخ داده که درباره یک محصول یا یک اتفاق یا در یک صفحه از سایت دائماً باید جواب یک سئوال پرتکرار کاربران را بدهید.

مثلا من یک فرم پرداخت در سایت دارم که کادر قیمتش به تومان هست گاهی کابران به ریال وارد می کنند و هزینه محصول را ده برابر پرداخت می کنند. :) و البته دردسر پاسخ به تماس و پیگیری برگشت پول و ... زمان از من میگیره. خب من در اون صفحه تنظیم کردم که به کاربر یک پیام آفلاین نمایش بده و اعلام کنه که مبلغ به تومان است. البته نه فوری که کاربر اومد بعد از چند ثانیه نمایش میدم که کاربر توجهش جلب بشه

بیاید اینجا با این روش با رایچت بازی کنیم.

در کادر اول زیر یک پیام دلخواه از خودتون تایپ کنید. و در کادر دوم یک عدد به ثانیه بگذارید مثلا درج کنید 3. 

با زدن دکمه اجرا بعد از تعداد ثانیه ای که شما درج کردید پیام کادر اول در رایچت به نمایش در میاد.

کد مرحله سوم:

<p><input id="customtext" placeholder="متن دلخواه" type="text" /><input id="customdelay" placeholder="میزان تاخیر در نمایش پیام به ثانیه" type="text" /><button id="custom-run">اجرا</button></p>
<script>
$('#custom-run').click(function(){
  var customtext = $('#customtext').val();
  var customdelay= $('#customdelay').val();
  if(customtext == '') {window.Raychat.sendOfflineMessage('لطفاً متنی را در کادر متن دلخواه وارد کنید.'); $('#customtext').focus();return;}
  if(customdelay== '') {window.Raychat.sendOfflineMessage('لطفا تعیین کنید که بعد از چند ثانیه پیام آفلاین نمایش داده شود.'); $('#customdelay').focus(); return;}
  setTimeout(function(){ 
    window.Raychat.sendOfflineMessage(customtext);
  }, customdelay*1000);
})
</script>

 

مرحله چهارم بازی:

با استفاده از دستوراتی که در مرحله سوم نمایش داده شد، می خوام یک دستور جاوااسکریپت ایجاد کنم که نمایش پیام بعد از زمان خاص خیلی راحت تر بشه. حتماً شما در سایتتون یک فایل جاوااسکریپت با پسوند js دارید که در همه صفحات سایت لود میشه. می خوام یک ایده ارائه کنم. من دستور زیر رو در یکجایی از اون فایل قرار می دم:

function raychat_offline_message(message,delaytime = 0){
   setTimeout(function(){
      window.Raychat.sendOfflineMessage(message);
   }, delaytime*1000);
}

 

بعد از این در هر جای فایل های اسکریپت قالب سایت یا دستورات میان <script> صفحه می تونم با درج عبارتی مثل زیر پیامی را فوری یا بعد از چند ثانیه به کاربر نمایش بدم:

raychat_offline_message('از اینکه در سایت ما هستید خوشحالیم. در صورت نیاز به راهنمایی با من چت کن.Rangine.ir', 5);

لازم به توضیح دیگه نیست که دستور بالا بعد از 5 ثانیه یک پیام در صفحه نمایش میده. برای تمرین همین الآن F12 بزنید کل خط بالا رو کپی کنید بعد در تب Console درج کنید و اینتر بزنید. اگر عدد خط بالا را تغییر ندادید بعد از 5 ثانیه پیام داخل کوتیشن رایچت می شود.(فعل سازی هم بلدیم!)

بنابراین با تلفیق مراحل قبل میشه خیلی کدها رو ساده تر کرد. مثلا شما دستور raychat_offline_message را در سایت خودتون تعریف کردید. بعد می خواهید هر کسی روی دکمه ای یا لینکی از سایت شما کلیک کرد فوری بهش یک پیام در رایچت نمایش داده بشه. خیلی ساده هست. به کد زیر توجه کنید:

<button onClick="raychat_offline_message('برای اطلاع از قیمت این محصول کد آن را در جواب من بفرست و منتظر باش تا کارشناس پاسخ بده')">قیمت محصول</button>

 

اگر فرصت تست نمونه کد بالا رو در سایتتون ندارید خب من همین کد رو در زیر درج کردم کلیک کنید تا نتیجه رو ببینید:


 

 

مرحله پنجم بازی:

یکی از ایده هایی که برای بازی با رایچت دارم این هست که ارورهایی که در سایت نمایش داده میشه رو در کادر رایچت نمایش بدم. اینطوری هم هنگام نمایش ارور یک صدایی از طرف رایچت پخش میشه و هم به شکل خیلی زیبایی ارور رو نشون میدم. به عنوان نمونه فرض کنید فرم زیر رو داریم که بازدید کننده باید فرم رو پر کنه. یادتون باشه که داریم مرحله به مرحله از دستورات مراحل قبل هم استفاده می کنیم. در کدهای این مرحله از دستوری که در مرحله چهارم پیشنهاد دادم استفاده کردم. 

در فرم زیر نام کاربری یا پسوورد خالی باشه پیام مناسب میده هر دو اگر پر باشه یک پیام خطای تستی نشون میده. دکمه ورود رو کلیک کنید:

 



کد مرحله پنجم:

<div id="raychat-form-1" style="width:80%;text-align:center;margin:auto">
<input id="raychat-username" placeholder="نام کاربری" type="text" /><br />
<input id="raychat-password" placeholder="پسوورد" type="password" /><br />
<button>ورود</button></div>
<script>
$('#raychat-form-1 button').click(function(){
  if($('#raychat-form-1 #raychat-username').val() == '') {
    raychat_offline_message('نام کاربری را وارد کنید!');
  }else if($('#raychat-form-1 #raychat-password').val() == '') {
    raychat_offline_message('رمز عبور را وارد کنید!');
  } else {
    raychat_offline_message('نام کاربری و رمز عبور شناخته شده نیست!');
    raychat_offline_message('البته مهم نیست این یک فرم تستی هست. ناراحت نباش!',4);
  }
 
})
</script>

 

 

 

امیدوارم از این محتوا که تجربه شخصی خودم بود کمال استفاده رو کرده باشید.

بسته به اینکه شما چه امتیازی به این صفحه بدید و یا در دیدگاه های این صفحه سهیم باشید مراحل دیگه ای رو به این بازی اضافه خواهم کرد.

اگر شما علاقه مند به رایچت شدید می تونید با کلیک بر روی تصویر زیر به توضیحات بیشتر و ثبت نام در رایچت برسید.

 

 

رایچت بازی

تعداد امتیازدهندگان: 3763
مسیر کوتاه: rangine.ir/node/1245