* @author : Premio <contact@premio.io>
if (defined('ABSPATH') === false) {
$value = get_option('cht_social_'.$social['slug']);
// get setting for media if already saved
$imageUrl = plugin_dir_url("")."chaty/admin/assets/images/chaty-default.png";
// Initialize default values if not found
'is_mobile' => 'checked',
'is_desktop' => 'checked',
'title' => $social['title'],
if (!isset($value['bg_color']) || empty($value['bg_color'])) {
$value['bg_color'] = $social['color'];
// Initialize background color value if not exists. 2.1.0 change
if (!isset($value['image_id'])) {
// Initialize custom image id if not exists. 2.1.0 change
if (!isset($value['title'])) {
$value['title'] = $social['title'];
// Initialize title if not exists. 2.1.0 change
if (!isset($value['fa_icon'])) {
// Initialize title if not exists. 2.1.0 change
if (!isset($value['value'])) {
// Initialize title if not exists. 2.1.0 change
$imageId = $value['image_id'];
$imageUrl = wp_get_attachment_image_src($imageId, "full")[0];
// get custom image URL if exists
$imageUrl = plugin_dir_url("")."chaty/admin/assets/images/chaty-default.png";
// Initialize with default image if custom image is not exists
if($social['slug'] == "Twitter" && ($value['bg_color'] == "#1ab2e8" || $value['bg_color'] == "rgb(26, 178, 232)") ) {
$value['bg_color'] = "#000000";
if (!empty($value['bg_color'])) {
$value['bg_color'] = $this->validate_color($value['bg_color'], $social['color']);
$color = "background-color: ".esc_attr($value['bg_color']);
if ($social['slug'] == "Whatsapp") {
// $val = $value['value'];
// $val = str_replace("+", "", $val);
// $value['value'] = $val;
} else if ($social['slug'] == "Facebook_Messenger") {
$val = str_replace("facebook.com", "m.me", $val);
// Replace facebook.com with m.me version 2.0.1 change.
$val = str_replace("www.", "", $val);
// Replace www. with blank version 2.0.1 change.
$valArray = explode("/", $val);
$total = (count($valArray) - 1);
$lastValue = $valArray[$total];
$lastValue = explode("-", $lastValue);
$totalText = (count($lastValue) - 1);
$totalText = $lastValue[$totalText];
if (is_numeric($totalText)) {
$valArray[$total] = $totalText;
$value['value'] = implode("/", $valArray);
$value['value'] = esc_attr(wp_unslash($value['value']));
$value['title'] = esc_attr(wp_unslash($value['title']));
$svgIcon = $social['svg'];
if ((isset($social['help']) && !empty($social['help'])) || isset($social['help_link'])) {
$helpTitle = isset($social['help_title']) ? $social['help_title'] : "Doesn't work?";
$helpText = isset($social['help']) ? $social['help'] : "";
if (isset($social['help_link']) && !empty($social['help_link'])) {
$helpLink = $social['help_link'];
$placeholder = $social['example'];
if ($social['slug'] == "Link" || $social['slug'] == "Custom_Link" || $social['slug'] == "Custom_Link_3" || $social['slug'] == "Custom_Link_4" || $social['slug'] == "Custom_Link_5") {
if (isset($value['channel_type'])) {
$channelType = esc_attr(wp_unslash($value['channel_type']));
if (!empty($channelType)) {
foreach ($this->socials as $icon) {
if ($icon['slug'] == $channelType) {
$placeholder = $icon['example'];
if ((isset($icon['help']) && !empty($icon['help'])) || isset($icon['help_link'])) {
$helpTitle = isset($icon['help_title']) ? $icon['help_title'] : "Doesn't work?";
$helpText = isset($icon['help']) ? $icon['help'] : "";
if (isset($icon['help_link']) && !empty($icon['help_link'])) {
$helpLink = $icon['help_link'];
if (empty($channelType)) {
$channelType = $social['slug'];
// Check if the 'value' field is not empty
if (!empty($value['value'])) {
// Extract the social slug for readability
$socialSlug = $social['slug'];
// Check if the social slug is one of the specified values
if ($socialSlug == "Whatsapp" || $socialSlug == "Phone" || $socialSlug == "SMS") {
// Clean the 'value' field for numbers
$value['value'] = $this->cleanStringForNumbers($value['value']);
// Check if the social slug is "Whatsapp"
if ($socialSlug == "Whatsapp") {
// Remove leading '+' and then prepend '+'
$value['value'] = "+" . ltrim($value['value'], "+");
// Social slugs that require numeric formatting
$numericSocials = ["Whatsapp", "Viber"];
// Social slugs that require username formatting
$usernameSocials = ["Telegram", "Snapchat", "TikTok"];
// Check if the current social slug requires numeric formatting
if (in_array($socialSlug, $numericSocials)) {
// Remove unwanted characters and prepend '+'
$val = str_replace(["+", "-", " "], "", $value['value']);
$value['value'] = "+" . $val;
// Check if the current social slug requires username formatting
elseif (in_array($socialSlug, $usernameSocials)) {
// Remove '@' if present and prepend '@'
$value['value'] = "@" . trim($value['value'], "@");
// No special formatting required for other social slugs
<!-- Social media setting box: start -->
<li data-id="<?php echo esc_attr($social['slug']) ?>" class="chaty-channel <?php echo ($isAgent == 1) ? "has-agent-view" : "" ?>" data-type="<?php echo esc_attr($social['slug']) ?>" data-channel="<?php echo esc_attr($channelType) ?>" id="chaty-social-<?php echo esc_attr($social['slug']) ?>">
<!-- channel default settings start -->
<div class="channels-selected__item <?php echo esc_attr(($status) ? "img-active" : "") ?> free 1 available">
<!-- icon and input field start -->
<div class="chaty-default-settings space-x-3 flex items-center">
<!-- drag icon and channel icon start -->
<div class="flex space-x-2 items-center relative">
<div class="move-icon opacity-0 transition duration-150 hover:opacity-100 cursor-grab">
<img src="<?php echo esc_url(CHT_PLUGIN_URL."admin/assets/images/move-icon.png") ?>">
<div class="icon icon-md active" data-label="<?php echo esc_attr($social['title']); ?>" id="chaty_image_<?php echo esc_attr($social['slug']) ?>">
<span style="" class="custom-chaty-image custom-image-<?php echo esc_attr($social['slug']) ?>" id="image_data_<?php echo esc_attr($social['slug']) ?>">
<img src="<?php echo esc_url($imageUrl) ?>" />
<span onclick="remove_chaty_image('<?php echo esc_attr($social['slug']) ?>')" class="remove-icon-img"></span>
<span class="default-chaty-icon <?php echo (isset($value['fa_icon'])&&!empty($value['fa_icon'])) ? "has-fa-icon" : "" ?> custom-icon-<?php echo esc_attr($social['slug']) ?> default_image_<?php echo esc_attr($social['slug']) ?>">
<span class="facustom-icon" style="background-color: <?php echo esc_attr($value['bg_color']) ?>"><i class="<?php echo esc_attr($value['fa_icon']) ?>"></i></span>
<?php if(isset($social['header_help']) && !empty($social['header_help'])) { ?>
<span class="header-tooltip header-icon-tooltip">
<span class="header-tooltip-text text-center"><?php echo esc_attr($social['header_help']) ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.00004 14.6654C11.6819 14.6654 14.6667 11.6806 14.6667 7.9987C14.6667 4.3168 11.6819 1.33203 8.00004 1.33203C4.31814 1.33203 1.33337 4.3168 1.33337 7.9987C1.33337 11.6806 4.31814 14.6654 8.00004 14.6654Z" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8 10.6667V8" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8 5.33203H8.00667" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path>
<!-- drag icon and channel icon end -->
<!-- input field start-->
<?php if ($social['slug'] != 'Contact_Us') { ?>
<?php if (($social['slug'] == "Whatsapp" || $channelType == "Whatsapp") && !empty($value['value'])) {
// $value['value'] = trim($value['value'], "+");
// $value['value'] = "+".$value['value'];
if($value['value'][1] == "0") {
$value['value'][1] = " ";
$value['value'] = str_replace(' ', '', $value['value']);
<div class="channels__input-box flex-auto">
<div class="p-relative test-btn <?php echo esc_attr($social['slug']) ?>-input">
<input data-label="<?php echo esc_attr($social['title']) ?>" placeholder="<?php echo esc_attr($placeholder); ?>" type="text" class="channels__input custom-channel-<?php echo esc_attr($channelType) ?> <?php echo isset($social['attr']) ? esc_attr($social['attr']) : "" ?>" name="cht_social_<?php echo esc_attr($social['slug']); ?>[value]" value="<?php echo esc_attr(wp_unslash($value['value'])); ?>" data-gramm_editor="false" id="channel_input_<?php echo esc_attr($social['slug']); ?>" />
<?php if($social['slug'] == 'Whatsapp' || $social['slug'] == 'Facebook_Messenger') { ?>
<button type="button" class="wf-test-button <?php echo !empty($value['value']) ? "active" : "" ?>" data-slug="<?php echo esc_attr($social['slug']) ?>"><?php esc_html_e('Test', 'chaty') ?></button>
<!-- icon and input field end -->
<!-- example and help text start -->
<div class="flex items-center flex-wrap gap-3 pl-20 ml-1">
<?php if ($social['slug'] != 'Contact_Us') { ?>
<!-- checking for extra help message for social media -->
<div class="help-section inline-block relative">
<?php if ((isset($social['help']) && !empty($social['help'])) || isset($social['help_link'])) { ?>
<?php if (isset($helpLink) && !empty($helpLink)) { ?>
<a class="help-link" href="<?php echo esc_url($helpLink) ?>" target="_blank"><?php echo esc_attr($helpTitle); ?></a>
<?php } else if (isset($helpText) && !empty($helpText)) { ?>
<span class="help-text"><?php echo wp_kses($helpText, $allowedHTML); ?></span>
<!-- $helpText contains HTML -->
<span class="help-title"><?php echo esc_attr($helpTitle); ?></span>
<!-- example and help text end -->
<!-- whatsapp settings start -->
<?php if ($social['slug'] == "Whatsapp" || $social['slug'] == "Link" || $social['slug'] == "Custom_Link" || $social['slug'] == "Custom_Link_3" || $social['slug'] == "Custom_Link_4" || $social['slug'] == "Custom_Link_5") { ?>
<div class="Whatsapp-settings sm:pl-20 ml-1 mt-2 font-primary text-cht-gray-150 advanced-settings extra-chaty-settings">
<?php $embeddedWindow = isset($value['embedded_window']) ? $value['embedded_window'] : "no"; ?>
<div class="chaty-setting-co">
<input type="hidden" name="cht_social_<?php echo esc_attr($social['slug']); ?>[embedded_window]" value="no">
<label class="flex mt-1 items-center chaty-switch full-width chaty-embedded-window" for="whatsapp_embedded_window_<?php echo esc_attr($social['slug']); ?>">
<input type="checkbox" class="embedded_window-checkbox" name="cht_social_<?php echo esc_attr($social['slug']); ?>[embedded_window]" id="whatsapp_embedded_window_<?php echo esc_attr($social['slug']); ?>" value="yes" <?php checked($embeddedWindow, "yes") ?>>
<div class="chaty-slider round"></div>
<?php esc_html_e("Enable WhatsApp Chat Widget", "chaty") ?> 💬
<div class="html-tooltip top">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M8.00004 14.6654C11.6819 14.6654 14.6667 11.6806 14.6667 7.9987C14.6667 4.3168 11.6819 1.33203 8.00004 1.33203C4.31814 1.33203 1.33337 4.3168 1.33337 7.9987C1.33337 11.6806 4.31814 14.6654 8.00004 14.6654Z" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 10.6667V8" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8 5.33203H8.00667" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path>
<span class="tooltip-text top">
<?php esc_html_e("Engage visitors with a WhatsApp-style chat window with a welcome message. Visitors can start conversations by typing messages and clicking on 'Send' will redirect them to WhatsApp.", "chaty") ?>
<img src="<?php echo esc_url(CHT_PLUGIN_URL) ?>/admin/assets/images/chaty-wa-widget-ez.gif" loading="lazy"/>
<!-- advance setting for Whatsapp -->
<div class="whatsapp-welcome-message mt-4 <?php echo ($embeddedWindow == "yes") ? "active" : "" ?>">
<div class="chaty-setting-col">
<label style="display: block; width: 100%" for="cht_social_embedded_message_<?php echo esc_attr($social['slug']); ?>"><?php esc_html_e("Welcome message", "chaty") ?></label>
<?php $unique_id = uniqid(); ?>
<?php $embeddedMessage = isset($value['embedded_message']) ? $value['embedded_message'] : esc_html__("How can I help you? :)", "chaty"); ?>
<textarea class="chaty-setting-textarea chaty-whatsapp-setting-textarea" data-id="<?php echo esc_attr($unique_id) ?>" id="cht_social_embedded_message_<?php echo esc_attr($unique_id) ?>" type="text" name="cht_social_<?php echo esc_attr($social['slug']); ?>[embedded_message]"><?php echo esc_textarea($embeddedMessage) ?></textarea>
<div class="chaty-setting-col">
<?php $isDefaultOpen = isset($value['is_default_open']) ? $value['is_default_open'] : "no"; ?>
<input type="hidden" name="cht_social_<?php echo esc_attr($social['slug']); ?>[is_default_open]" value="no">
<label class="chaty-switch" for="whatsapp_default_open_embedded_window_<?php echo esc_attr($social['slug']); ?>">
<input type="checkbox" name="cht_social_<?php echo esc_attr($social['slug']); ?>[is_default_open]" id="whatsapp_default_open_embedded_window_<?php echo esc_attr($social['slug']); ?>" value="yes" <?php checked($isDefaultOpen, "yes") ?>>
<div class="chaty-slider round"></div>
<?php esc_html_e("Open the chat widget on page load", "chaty") ?>
<span class="icon label-tooltip" data-label="<?php esc_html_e("Open the WhatsApp chat popup on page load, after the user sends a message or closes the window, the window will stay closed to avoid disruption", "chaty") ?>" >
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M8.00004 14.6654C11.6819 14.6654 14.6667 11.6806 14.6667 7.9987C14.6667 4.3168 11.6819 1.33203 8.00004 1.33203C4.31814 1.33203 1.33337 4.3168 1.33337 7.9987C1.33337 11.6806 4.31814 14.6654 8.00004 14.6654Z" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8 10.6667V8" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8 5.33203H8.00667" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path>
<div class="sm:flex sm:items-center sm:space-x-3 mt-4">
<?php $wp_popup_headline = isset($value['wp_popup_headline']) ? $value['wp_popup_headline'] : esc_html__("Let's chat on WhatsApp","chaty") ?>
<div class="chaty-setting-col inline-options">
<label class="font-primary text-base text-cht-gray-150 sm:w-44">
<?php esc_html_e("Headline", "chaty") ?>
<input type="text" id="wp_popup_headline" name="cht_social_<?php echo esc_attr($social['slug']); ?>[wp_popup_headline]" value="<?php echo esc_attr($wp_popup_headline) ?>">
<div class="chaty-setting-col inline-options">
$wp_popup_head_bg_color = isset($value['wp_popup_head_bg_color']) ? $value['wp_popup_head_bg_color'] : "#4AA485";
$wp_popup_head_bg_color = $this->validate_color($wp_popup_head_bg_color, "#4AA485");
<label class="font-primary text-base text-cht-gray-150 sm:w-44">
<?php esc_html_e("Header Background", "chaty") ?>
<input type="text" name="cht_social_<?php echo esc_attr($social['slug']); ?>[wp_popup_head_bg_color]" class="chaty-color-field button-color" value="<?php echo esc_attr($wp_popup_head_bg_color) ?>" />
<?php $wp_popup_nickname = isset($value['wp_popup_nickname']) ? $value['wp_popup_nickname'] : "" ?>
<div class="sm:flex sm:items-center sm:space-x-3 mt-4">
<div class="chaty-setting-col inline-options">
<label class="font-primary text-base text-cht-gray-150 sm:w-44">
<?php esc_html_e("Nickname", "chaty") ?>
<input type="text" id="wp_popup_nickname" placeholder="Micheal" name="cht_social_<?php echo esc_attr($social['slug']); ?>[wp_popup_nickname]" value="<?php echo esc_attr($wp_popup_nickname) ?>">
<?php $wp_popup_profile = isset($value['wp_popup_profile']) ? $value['wp_popup_profile'] : "" ?>
<div class="chaty-setting-col sm:flex sm:items-center sm:space-x-3 mt-4">
<div class="chaty-setting-col">
<label class="font-primary text-base text-cht-gray-150 sm:w-44">
<?php esc_html_e("Add a profile image", "chaty") ?>
<div class="sm:flex sm:items-center custom-img-upload <?php echo esc_attr(!empty($wp_popup_profile)?"active":"") ?>" id="<?php echo esc_attr($social['slug']); ?>-custom-image-upload">
<?php if(!empty($wp_popup_profile)) { ?>
<img src="<?php echo esc_url($wp_popup_profile) ?>" alt="<?php esc_html_e("Profile image", "chaty"); ?>" />
<a href="#" class="upload-chaty-icon flex items-center px-2 upload-wp-profile img-upload-btn" data-for="<?php echo esc_attr($social['slug']); ?>">
<?php esc_html_e('Upload Image', 'chaty') ?>
<a href="#" class="remove-custom-img" data-for="<?php echo esc_attr($social['slug']); ?>">
<?php esc_html_e('Remove', 'chaty') ?>
<input class="img-value" type="hidden" id="wp_popup_profile" name="cht_social_<?php echo esc_attr($social['slug']); ?>[wp_popup_profile]" value="<?php echo esc_attr($wp_popup_profile) ?>">
<?php $input_placeholder = isset($value['input_placeholder']) ? $value['input_placeholder'] : esc_html__("Write your message...","chaty") ?>
<div class="sm:flex sm:items-center sm:space-x-3 mt-4">
<div class="chaty-setting-col inline-options">
<label class="font-primary text-base text-cht-gray-150 sm:w-44">
<?php esc_html_e("Text input placeholder", "chaty") ?>
<input type="text" class="whatsapp-placeholder" id="input_placeholder_<?php echo esc_attr($social['slug']); ?>" name="cht_social_<?php echo esc_attr($social['slug']); ?>[input_placeholder]" value="<?php echo esc_attr($input_placeholder) ?>">
<div class="chaty-setting-col mt-4">
<?php $emoji_picker= isset($value['emoji_picker']) ? $value['emoji_picker'] : "yes"; ?>
<input type="hidden" name="cht_social_<?php echo esc_attr($social['slug']); ?>[emoji_picker]" value="no" >
<label class="chaty-switch text-base font-primary text-cht-gray-150" for="whatsapp_emoji_picker_<?php echo esc_attr($social['slug']); ?>">
<input type="checkbox" class="whatsapp-emoji" name="cht_social_<?php echo esc_attr($social['slug']); ?>[emoji_picker]" id="whatsapp_emoji_picker_<?php echo esc_attr($social['slug']); ?>" value="yes" <?php checked($emoji_picker, "yes") ?> >
<div class="chaty-slider round"></div>
<span class="text-cht-gray-150">
<?php esc_html_e("Enable emoji picker", "chaty") ?>
<div class="html-tooltip top">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M8.00004 14.6654C11.6819 14.6654 14.6667 11.6806 14.6667 7.9987C14.6667 4.3168 11.6819 1.33203 8.00004 1.33203C4.31814 1.33203 1.33337 4.3168 1.33337 7.9987C1.33337 11.6806 4.31814 14.6654 8.00004 14.6654Z" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 10.6667V8" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 5.33203H8.00667" stroke="#72777c" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
<span class="tooltip-text top">
<?php esc_html_e("Allow visitors to pick emoji from the emoji picker and enter them into the message input field", "chaty") ?>
<img alt="chaty" src="<?php echo esc_url(CHT_PLUGIN_URL) ?>/admin/assets/images/chaty-emoji.png" loading="lazy"/>
<!-- whatsapp settings end -->
<!-- device, agent and settings button start -->
<div class="flex items-center sm:pl-20 ml-1 mt-2">
<?php if ($social['slug'] == 'Contact_Us') { ?>
'title' => esc_html__("Name", "chaty"),
'placeholder' => esc_html__("Enter your name", "chaty"),
'title' => esc_html__("Email", "chaty"),
'placeholder' => esc_html__("Enter your email address", "chaty"),
'title' => esc_html__("Phone", "chaty"),
'placeholder' => esc_html__("Enter your phone number", "chaty"),
'title' => esc_html__("Message", "chaty"),
'placeholder' => esc_html__("Enter your message", "chaty"),
echo '<div class="form-field-setting-col">';
foreach ($fields as $label => $field) {
$saved_value = isset($value[$label]) ? $value[$label] : [];
'is_active' => (isset($saved_value['is_active'])) ? $saved_value['is_active'] : 'yes',
'is_required' => (isset($saved_value['is_required'])) ? $saved_value['is_required'] : 'yes',
'placeholder' => (isset($saved_value['placeholder'])) ? $saved_value['placeholder'] : $field['placeholder'],
'field_label' => (isset($saved_value['field_label'])) ? $saved_value['field_label'] : $field['title'],
<div class="field-setting-col <?php echo ($field_value['is_active'] == "yes") ? "" : "hide-label-setting" ?> mb-2.5">
<input type="hidden" name="cht_social_<?php echo esc_attr($social['slug']); ?>[<?php echo esc_attr($label) ?>][is_active]" value="no">
<input type="hidden" name="cht_social_<?php echo esc_attr($social['slug']); ?>[<?php echo esc_attr($label) ?>][is_required]" value="no">
<div class="label-flex mb-4">
<label class="chaty-switch chaty-switch-toggle text-cht-gray-150 text-base" for="field_for_<?php echo esc_attr($social['slug']); ?>_<?php echo esc_attr($label) ?>">
<input type="checkbox" class="chaty-field-setting" name="cht_social_<?php echo esc_attr($social['slug']); ?>[<?php echo esc_attr($label) ?>][is_active]" id="field_for_<?php echo esc_attr($social['slug']); ?>_<?php echo esc_attr($label) ?>" value="yes" <?php checked($field_value['is_active'], "yes") ?>>
<div class="chaty-slider round"></div>
<span class="field-label"><?php echo esc_attr($field_value['field_label']) ?>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8719_30645)">