فرم اطلاعات مهمان در چت بات
یکی از چالشهای اصلی در ارائه خدمات پشتیبانی آنلاین، تعامل با کاربران ناشناس (مهمان) است. زمانی که کاربری بدون ورود به حساب کاربری (Log in) قصد استفاده از چتبات هوش مصنوعی را دارد، شناخت هویت او برای پیگیریهای بعدی یا ارائه خدمات دقیقتر بسیار حیاتی است.
سیستم چتبات هوشمند همیار تولز، به صورت پیشفرض مجهز به یک فرم دریافت اطلاعات است که پیش از شروع گفتگو، نام و شماره موبایل کاربر را دریافت میکند. اما نیازهای کسبوکار شما ممکن است فراتر از این دو فیلد باشد؛ شاید نیاز داشته باشید کد ملی، ایمیل، واحد سازمانی یا شماره سفارش را نیز دریافت کنید.
در این مستندات، به شما نشان میدهیم که چگونه با استفاده از قلابهای (Hooks) قدرتمند تعبیه شده در هسته افزونه، این فرم را کاملا شخصیسازی کنید، فیلدهای جدید بیافزایید و یا فیلدهای پیشفرض را مدیریت کنید.
این قابلیت چگونه کار میکند؟
معماری فرم مهمان در چتبات همیار تولز بر پایه رویدادهای جاوااسکریپت بنا شده است. این معماری به توسعهدهندگان اجازه میدهد تا بدون ویرایش فایلهای اصلی افزونه و تنها با افزودن قطعه کدهای استاندارد در قالب سایت خود، رفتار فرم را تغییر دهند.
فرآیند کلی به شرح زیر است:
-
بررسی وضعیت کاربر: چتبات بررسی میکند که آیا کاربر لاگین کرده است یا خیر
-
نمایش فرم: اگر کاربر مهمان باشد، فرم دریافت اطلاعات نمایش داده میشود.
-
تزریق فیلدها: شما میتوانید با کدهای ساده، فیلدهای HTML دلخواه خود را به این فرم اضافه کنید.
-
رهگیری ارسال: زمانی که کاربر دکمه “شروع چت” را میزند، سیستم یک رویداد خاص را اجرا میکند. شما میتوانید این رویداد را گرفته، دادههای فیلدهای خود را به آن اضافه کنید و یا حتی جلوی ارسال فرم را بگیرید (مثلا برای اعتبارسنجی).
کاربردهای رایج
-
احراز هویت دقیق: دریافت کد ملی برای سایتهای بیمه، خدمات دولتی یا فروش اقساطی.
-
دستهبندی مشتریان: استفاده از لیست کشویی (Select) برای اینکه کاربر مشخص کند سوالش مربوط به “فروش”، “پشتیبانی فنی” یا “مالی” است.
-
اطلاعات تماس ثانویه: دریافت ایمیل یا شماره ثابت در کنار شماره موبایل.
-
قوانین و مقررات: افزودن چکباکس “قوانین را میپذیرم” که تا تیک نخورد، اجازه چت ندهد.
-
انعطافپذیری در UX: شاید بخواهید فیلد شماره موبایل را اختیاری یا حتی حذف کنید و به جای آن ایمیل نمایش دهید.
-
اعتبارسنجی پیشرفته: اتصال به API پیامک (OTP) و احراز هویت پیامکی قبل از شروع چت.
مستندات فنی و ساختار هوکها
سیستم چتبات یک رویداد اختصاصی به نام hmyt:guest-submit دارد که در لحظه کلیک روی دکمه “ثبت و شروع چت” فراخوانی میشود.
ساختار شیء ارسالی
زمانی که این رویداد را در کد خود دریافت میکنید، یک شیء data در اختیار شما قرار میگیرد که شامل متدها و پراپرتیهای زیر است:
guestInfo : حاوی دادههای ارسالی به سرور. هر کلیدی که به این آبجکت اضافه کنید (مثلا data.guestInfo['email']) در دیتابیس ذخیره میشود.
elements : دسترسی مستقیم به المانهای DOM فرم جاری. شامل:
container: دایو اصلی فرمsubmitBtn: دکمه کلیک شدهnameInput: فیلد نامmobileInput: فیلد موبایل
fail(message) : یک متد برای نمایش پیام توست خطا به کاربر و توقف ارسال فرم.
e.preventDefault() : متد استاندارد jQuery برای جلوگیری از ارسال فرم (مفید برای اعتبارسنجی یا توقف عملیات)
چند مثال کاربردی آماده
کدهای زیر را میتوانید مستقیما در زیرمنوی قلاب های همیار تولز قرار دهید.
مدیریت فیلدهای پیشفرض (حذف نام یا موبایل)
add_filter('hmyt_ai_guest_form_fields', function($fields) {
$fields['name_active'] = true;
$fields['mobile_active'] = false; //غیرفعالسازی فیلد موبایل
return $fields;
});
افزودن فیلد کد ملی
add_action('wp_footer', function() {
?>
<script>
jQuery(document).ready(function($) {
$('#hmyt-guest-mobile').closest('.hmyt-form-group').before('<div class="hmyt-form-group"><input type="number" id="custom-nid" placeholder="کد ملی" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;"></div>');
$(document).on('hmyt:guest-submit', function(e, data) {
const val = data.elements.container.find('#custom-nid').val();
if (!val || val.length !== 10) {
e.preventDefault();
data.fail('کد ملی باید دقیقاً ۱۰ رقم باشد.');
return;
}
data.guestInfo['کد ملی'] = val;
});
});
</script>
<?php
}, 99);
افزودن لیست کشویی واحد مربوطه
add_action('wp_footer', function() {
?>
<script>
jQuery(document).ready(function($) {
const selectHtml = `
<div class="hmyt-form-group">
<select id="custom-dept" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;background:#fff;">
<option value="پشتیبانی">پشتیبانی فنی</option>
<option value="فروش">واحد فروش</option>
<option value="مالی">امور مالی</option>
</select>
</div>`;
$('#hmyt-guest-name').closest('.hmyt-form-group').after(selectHtml);
$(document).on('hmyt:guest-submit', function(e, data) {
data.guestInfo['واحد'] = data.elements.container.find('#custom-dept').val();
});
});
</script>
<?php
}, 99);
فیلد شماره سفارش
add_action('wp_footer', function() {
?>
<script>
jQuery(document).ready(function($) {
$('#hmyt-guest-mobile').closest('.hmyt-form-group').after('<div class="hmyt-form-group"><input type="number" id="order-id" placeholder="شماره سفارش (اگر دارید)" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;"></div>');
$(document).on('hmyt:guest-submit', function(e, data) {
const oid = data.elements.container.find('#order-id').val();
if (oid) data.guestInfo['شماره سفارش'] = oid;
});
});
</script>
<?php
}, 99);
چکباکس اجباری قوانین و مقررات
add_action(‘wp_footer’, function() {
?>
<script>
jQuery(document).ready(function($) {
$(‘#hmyt-guest-submit-btn’).before(‘<div style=”display:flex;align-items:center;gap:5px;font-size:12px;”><input style=” width: auto; ” type=”checkbox” id=”custom-terms”> <label for=”custom-terms”>قوانین سایت را میپذیرم.</label></div>’);
$(document).on(‘hmyt:guest-submit’, function(e, data) {
if (!data.elements.container.find(‘#custom-terms’).is(‘:checked’)) {
e.preventDefault();
data.fail(‘لطفا ابتدا قوانین را بپذیرید.’);
}
});
});
</script>
<?php
}, 99);
مکانیزم ذخیرهسازی
هسته چتبات همیار تولز طوری طراحی شده که تمام اطلاعات ارسالی در آبجکت guestInfo را به صورت یک ساختار JSON در دیتابیس ذخیره میکند. بنابراین، چه شما ۲ فیلد پیشفرض را ارسال کنید و چه ۲۰ فیلد سفارشی جدید، سیستم بدون هیچ خطایی آنها را دریافت و ذخیره میکند.
نمایش خودکار در پنل مدیریت
بخش «مدیریت چتها» در پیشخوان وردپرس نیز کاملا داینامیک طراحی شده و به صورت خودکار دادههای ذخیره شده را پردازش کرده و نمایش میدهد.