✏️ Editing: chatway-setting.php Writable

<?php
$value = get_option('cht_social_'.$social['slug']);
$imageUrl = CHT_PLUGIN_URL."admin/assets/images/chaty-default.png";
if (empty($value)) {
    // Initialize default values if not found
    $value = [
        'value'      => '',
        'is_mobile'  => 'checked',
        'is_desktop' => 'checked',
        'image_id'   => '',
        'title'      => $social['title'],
        'bg_color'   => "",
    ];
}

$is_pro = false;
$disabled = "";
if(!$is_pro) {
    $disabled = "disabled";
}

if (!isset($value['value'])) {
    $value['value'] = "";
}

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($social['slug'] == "Twitter" && ($value['bg_color'] == "#1ab2e8" || $value['bg_color'] == "rgb(26, 178, 232)") ) {
    $value['bg_color'] = "#000000";
}
$value['bg_color'] = $this->validate_color($value['bg_color'], $social['color']);

if (!isset($value['image_id'])) {
    $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'])) {
    $value['fa_icon'] = "";
    // Initialize title if not exists. 2.1.0 change
}

$is_agent = 0;
$color = "";
if (!empty($value['bg_color'])) {
    $color = "background-color: ".esc_attr($value['bg_color']);
    // set background color of icon if exists
}

$value['value'] = esc_attr(wp_unslash($value['value']));
$value['title'] = esc_attr(wp_unslash($value['title']));

$svg_icon = $social['svg'];

$help_title = "";
$help_text  = "";
$help_link  = "";

$channel_type = "";
$placeholder  = $social['example'];

if (empty($channel_type)) {
    $channel_type = $social['slug'];
}

// Check if the 'value' field is not empty
if (!empty($value['value'])) {
    // Extract the social slug for readability
    $socialSlug = $social['slug'];
}

$chatwayIcons = $this->chatwayIcons;

$positions = [
    'above-chaty' => esc_html__("An icon above Chaty’s icon", "chaty"),
    'inside-chaty' => esc_html__("Show it as one of Chaty’s channel", "chaty"),
    'outside-chaty' => esc_html__("Place manually from the Chatway settings", "chaty"),
];

if(isset($_REQUEST['position']) && isset($positions[$_REQUEST['position']])) {
    $value['chatway_position'] = esc_attr($_REQUEST['position']);
} else {
    $addChatway = is_plugin_active('chatway-live-chat/chatway.php') ? true : false;
    $isChatwayAdded = get_option('cht_is_chatway_added', false);
    if ($addChatway && !$isChatwayAdded) {
        $value['chatway_position'] = 'outside-chaty';
    }
}

if(isset($_GET['chaty_action']) && $_GET['chaty_action'] == 'add_chatway') {
    if(isset($_REQUEST['chatway_position']) && isset($positions[$_REQUEST['chatway_position']])) {
        $value['chatway_position'] = esc_attr($_REQUEST['chatway_position']);
    }
}

$chtPosition = isset($value['chatway_position'])?$value['chatway_position']:'above-chaty';
if(!isset($positions[$chtPosition])) {
    $chtPosition = 'above-chaty';
}

$imgClass = '';
$imageId = $value['image_id'];
if (!empty($value['fa_icon'])) {
    $imgClass = "icon-active";
    $value['chatway_icon'] = 'custom-image';
} else if(!empty($imageId)) {
    $imageUrl = wp_get_attachment_image_src($imageId, "full")[0];
    // get custom image URL if exists
    if ($imageUrl == "") {
        $value['chatway_icon'] = 'icon_1';
        $imageUrl = CHT_PLUGIN_URL."admin/assets/images/chaty-default.png";
        // Initialize with default image if custom image is not exists
    } else {
        $imgClass = "img-active";
    }
}

$chtIcon = isset($value['chatway_icon'])?$value['chatway_icon']:'icon_1';
if($chtIcon != 'custom-image' && !isset($chatwayIcons[$chtIcon])) {
    $chtIcon = 'icon_1';
}
if($chtIcon != 'custom-image') {
    $svg_icon = $chatwayIcons[$chtIcon];
}

?>

<li data-id="<?php echo esc_attr($social['slug']) ?>" class="chaty-channel group <?php echo esc_attr($chtPosition) ?> <?php echo ($is_agent == 1) ? "has-agent-view" : "" ?>" data-channel="<?php echo esc_attr($channel_type) ?>" id="chaty-social-<?php echo esc_attr($social['slug']) ?>">
    
    <div class="channels-selected__item free 1 available">
        <div class="chaty-default-settings flex gap-3">
            <div class="flex relative">
                
                <div class="move-icon mt-2 mr-1 transition duration-200 self-start opacity-0 group-hover:opacity-100">
                    <img src="<?php echo esc_url(CHT_PLUGIN_URL."admin/assets/images/move-icon.png") ?>">
                </div>

<div class="icon chaty-icon icon-md active <?php echo esc_attr($imgClass) ?>" data-label="<?php esc_html_e("Chatway", "chaty"); ?>" 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>
                    <span class="default-chaty-icon chaty-main-svg" >
                        <?php echo $svg_icon; ?>
                    </span>
                    <span class="facustom-icon flex items-center justify-center" style="background-color: <?php echo esc_attr($value['bg_color']) ?>">
                        <i class="<?php echo esc_attr($value['fa_icon']) ?>"></i>
                    </span>
                    <span onclick="remove_custom_image('<?php echo esc_attr($social['slug']) ?>')" class="remove-icon-img"></span>
                    <input class="fa-icon" type="hidden" name="cht_social_<?php echo esc_attr($social['slug']); ?>[fa_icon]" value="<?php echo esc_attr($value['fa_icon']) ?>">
                </div>
            </div>

<div class="flex-auto space-y-1">
                
                <div class="channels__input-box mb-1">
                    <div class="chatway-channel-setting">
                        <div class="font-primary text-sm text-cht-gray-150 pb-1"><?php esc_attr_e('Chatway Live Chat', 'chaty'); ?></div>
                        <div class="inline-flex chatway-icons p-2.5 border-[#c6d7e3] border-solid border rounded-lg gap-4">
                            <?php foreach($chatwayIcons as $key => $icon) { ?>
                                <label for="icon-<?php echo esc_attr($key) ?>">
                                    <span class="chatway-icon">
                                        <?php echo $icon ?>
                                    </span>
                                    <input class="sr-only" type="radio" <?php checked($chtIcon, $key) ?> value="<?php echo esc_attr($key) ?>" name="cht_social_<?php echo esc_attr($social['slug']); ?>[chatway_icon]" id="icon-<?php echo esc_attr($key) ?>" >
                                    <span class="radio-button"></span>
                                </label>
                            <?php } ?>
                            <input class="sr-only" type="radio" <?php checked($chtIcon, 'custom-image') ?> value="<?php echo esc_attr('custom-image') ?>" name="cht_social_<?php echo esc_attr($social['slug']); ?>[chatway_icon]" id="chatway-custom-image" />
                            <div class="chatway-custom-image <?php echo esc_attr($imgClass) ?> items-center inline-flex px-3 border-l border-solid border-[#c6d7e3]">
                                <div>
                                    <div class="font-primary text-sm text-cht-gray-150">
                                        Custom Image
                                    </div>
                                    <div class="custom-image-selector">
                                        <button id="chatway-custom-image" type="button" class="border border-solid border-[#c6d7e3] hover:bg-[#edf3f6] rounded px-2 py-0.5 mt-1">Select Image</button>
                                    </div>
                                    <div class="custom-image-preview items-center justify-center mt-1">
                                        <img class="w-8 h-8 object-cover rounded-full" src="<?php echo esc_url($imageUrl) ?>" />
                                        <button id="chatway-remove-custom-image" type="button" class="border border-solid border-[#c6d7e3] hover:bg-[#edf3f6] rounded px-2 py-0.5 ml-1.5">Remove</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chatway-outside-setting hidden text-sm text-cht-gray-150">
                        <div class="chatway-mail-logo">
                            <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="48" height="48" rx="24" fill="#F3F9FF"></rect> <rect x="0.5" y="0.5" width="49" height="49" rx="24.5" stroke="#0446DE" stroke-opacity="0.2"></rect> <path d="M21.4323 40.8939L23.6881 36.9504L25.3229 39.5109C25.3229 39.5109 24.2844 39.3259 23.3384 39.7783C22.3925 40.2307 21.4323 40.8939 21.4323 40.8939Z" fill="#0038A5"></path> <path d="M19.8166 39.0134C19.6387 38.6078 19.2713 38.3169 18.8359 38.2365L13.4717 37.2461C12.2047 37.0122 11.2852 35.9074 11.2852 34.619V18.6157C11.2852 16.6455 12.2507 14.8004 13.8694 13.6772L17.332 11.2746C18.7 10.3254 20.3863 9.95195 22.0271 10.2349L34.3999 12.3681C36.9627 12.81 38.8351 15.0328 38.8351 17.6334V29.7568C38.8351 31.1918 38.2579 32.5665 37.2334 33.5713L32.8267 37.8933C31.1557 39.5321 28.7773 40.2293 26.4861 39.7519L23.9259 39.2186C23.4695 39.1235 22.9966 39.2732 22.6781 39.6136L21.6016 40.7642C21.2739 41.1144 20.695 41.0154 20.5023 40.5762L19.8166 39.0134Z" fill="#0446DE"></path> <path d="M17.1588 15.6094C14.4688 15.0628 11.9531 17.1187 11.9531 19.8637V33.5345C11.9531 34.8223 12.8719 35.9268 14.1382 36.1613L19.4524 37.1455C19.8966 37.2277 20.2691 37.529 20.4426 37.9461L20.9194 39.0931C21.0638 39.4406 21.5256 39.5106 21.7666 39.2216L22.6864 38.1184C22.9629 37.7867 23.3827 37.6092 23.8132 37.6418L28.0387 37.9619C30.1706 38.1235 31.9895 36.4372 31.9895 34.2991V20.8063C31.9895 19.536 31.0949 18.4413 29.85 18.1883L17.1588 15.6094Z" fill="#0038A5"></path> <path d="M16.8715 15.5962C15.2228 15.2764 13.6914 16.5393 13.6914 18.2188V32.2758C13.6914 33.6035 14.6665 34.7297 15.9805 34.9198L19.6259 35.447C20.0697 35.5112 20.4516 35.7938 20.6429 36.1994L21.1551 37.2859C21.2968 37.6342 21.7574 37.708 22.0008 37.4215L22.7724 36.5261C23.0703 36.1805 23.524 36.0108 23.9755 36.0761L28.9365 36.7937C30.5473 37.0266 31.9904 35.7773 31.9904 34.1497V20.7314C31.9904 19.452 31.0834 18.3523 29.8275 18.1087L16.8715 15.5962Z" fill="white"></path> <path d="M26.3149 29.7134L18.6034 28.3615C18.0423 28.2631 17.5858 28.7119 17.8029 29.2386C18.5079 30.9493 20.4771 33.6386 23.9658 32.7419C24.6842 32.5573 26.3091 31.6233 26.7669 30.3793C26.8813 30.0685 26.6411 29.7706 26.3149 29.7134Z" fill="#0446DE"></path> <ellipse cx="18.8634" cy="23.3408" rx="1.36726" ry="2.34388" transform="rotate(-4.90348 18.8634 23.3408)" fill="#0446DE"></ellipse> <ellipse cx="26.0899" cy="24.6755" rx="1.36726" ry="2.34388" transform="rotate(-4.90348 26.0899 24.6755)" fill="#0446DE"></ellipse> </svg>
                        </div>
                        <div class="chatway--message">
                            <b>Please note</b> all position-related changes to the Chatway widget should be made through the Chatway dashboard only
                        </div>
                    </div>
                    <div class="mt-4 flex items-center chatway--buttons">
                        <button id="change-chatway-position" class="chaty--button border font-primary text-sm text-cht-gray-150 border-solid border-[#c6d7e3] hover:bg-[#edf3f6] rounded px-2.5 py-1 mr-2.5" type="button">
                            <?php esc_attr_e("Change View Method", "chaty"); ?>
                            <svg data-v-7dab8964="" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-7dab8964="" d="M4 6L8 10L12 6" stroke="#83A1B7" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                        </button>
                        <a target="_blank" href="<?php echo admin_url("admin.php?page=chaty-live-chat") ?>" class="plugin-add--chatyway border font-primary text-sm text-[#3549fc] border-solid bg-white border-[#3549fc] hover:text-[#3549fc] focus:text-[#3549fc] rounded px-2.5 py-1 hover:bg-[#edf3f6]" type="button">
                            <svg class="h-5 w-auto mr-1" width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1">
                                <path d="M7.367 22.703l1.638-2.863L10.19 21.7s-.754-.134-1.44.194c-.687.328-1.384.81-1.384.81z" fill="#0038A5"></path><path d="M6.193 21.342a.97.97 0 00-.712-.564l-3.894-.72A1.94 1.94 0 010 18.153V6.534c0-1.43.7-2.77 1.876-3.585L4.39 1.205A4.606 4.606 0 017.798.45l8.982 1.548A3.879 3.879 0 0120 5.821v8.8c0 1.043-.42 2.04-1.163 2.77l-3.199 3.138a5.091 5.091 0 01-4.603 1.349l-1.858-.387a.97.97 0 00-.906.286l-.782.836a.485.485 0 01-.798-.137l-.498-1.134z" fill="#0446DE"></path><path d="M4.264 4.353a3.152 3.152 0 00-3.78 3.089v9.924a1.94 1.94 0 001.587 1.907l3.858.714a.97.97 0 01.719.582l.346.832c.105.253.44.303.615.094l.668-.801a.97.97 0 01.818-.346l3.067.232a2.667 2.667 0 002.868-2.659V8.126a1.94 1.94 0 00-1.553-1.9L4.264 4.352z" fill="#0038A5"></path><path d="M4.055 4.34a1.94 1.94 0 00-2.309 1.905v10.204a1.94 1.94 0 001.662 1.92l2.646.383a.97.97 0 01.739.546l.371.789a.364.364 0 00.614.098l.56-.65a.97.97 0 01.874-.327l3.601.521a1.94 1.94 0 002.217-1.92V8.07a1.94 1.94 0 00-1.57-1.904L4.055 4.34z" fill="#fff"></path><path d="M10.91 14.59L5.31 13.61c-.407-.072-.738.254-.58.636.511 1.242 1.94 3.195 4.473 2.544.522-.134 1.701-.812 2.034-1.715.083-.226-.092-.442-.329-.484z" fill="#0446DE"></path>
                                <ellipse cx="5.503" cy="9.962" rx=".993" ry="1.702" transform="rotate(-4.903 5.503 9.962)" fill="#0446DE"></ellipse>
                                <ellipse cx="10.749" cy="10.931" rx=".993" ry="1.702" transform="rotate(-4.903 10.749 10.93)" fill="#0446DE"></ellipse>
                            </svg>
                            <?php esc_attr_e("Add Live Chat", "chaty"); ?>
                        </a>
                        <a target="_blank" href="<?php echo admin_url("admin.php?page=chatway") ?>" class="plugin-manage--chatway border font-primary text-sm text-cht-gray-150 border-solid border-[#c6d7e3] hover:bg-[#edf3f6] rounded px-2.5 py-1" type="button">
                            <?php esc_attr_e("Chatway Dashboard", "chaty"); ?>
                            <svg data-v-7dab8964="" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-7dab8964="" d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333" stroke="#83A1B7" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path><path data-v-7dab8964="" d="M10 2H14V6" stroke="#83A1B7" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path><path data-v-7dab8964="" d="M6.66797 9.33333L14.0013 2" stroke="#83A1B7" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                        </a>
                    </div>

<div id="chatway-position-settings" class="mt-4 border-solid border-[#c6d7e3] border rounded-lg hidden">
                        <div class="p-4 pb-2.5">
                            <div class="text-sm font-medium pb-3 text-cht-gray-150"><?php esc_attr_e('How would you like to show the Live Chat icon?', 'chaty'); ?></div>
                            <ul class="chatway-positions" data-value="<?php echo esc_attr($chtPosition); ?>">
                                <?php foreach($positions as $key=>$position) { ?>
                                    <li>
                                        <input class="sr-only" type="radio" id="position-<?php echo esc_attr($key) ?>" name="cht_social_<?php echo esc_attr($social['slug']); ?>[chatway_position]" value="<?php echo esc_attr($key) ?>" <?php checked($chtPosition, $key) ?> />
                                        <label class="text-base relative text-cht-gray-150 flex items-center gap-1.5 cursor-pointer" for="position-<?php echo esc_attr($key) ?>">
                                            <span class="inline-flex w-4 h-4 rounded-full border border-solid border-[#83a1b7]"></span>
                                            <?php echo esc_attr($position); ?>
                                        </label>
                                    </li>
                                <?php } ?>
                            </ul>
                        </div>
                    </div>
                    <div class="mt-4 pt-0 border-t border-solid border-[#eaeff2]"></div>
                </div>
            </div>
        </div>

<div class="device-agent-settings mt-2">
            <div class="channels__device-box ml-2 chaty-setting-col sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-3 mr-2">
                <label class="font-primary text-base text-cht-gray-150"><?php esc_html_e("Show on", "chaty") ?></label>
                <div class="device-box">
                    <?php
                    $slug       = esc_attr($this->del_space($social['slug']));
                    $slug       = str_replace(' ', '_', $slug);
                    $is_desktop = isset($value['is_desktop']) && $value['is_desktop'] == "checked" ? "checked" : '';
                    $is_mobile  = isset($value['is_mobile']) && $value['is_mobile'] == "checked" ? "checked" : '';
                    ?>
                    
                    <label class="device_view cursor-pointer" for="<?php echo esc_attr($slug); ?>Desktop">
                        <input type="checkbox" id="<?php echo esc_attr($slug); ?>Desktop" class="channels__view-check sr-only js-chanel-icon js-chanel-desktop" data-type="<?php echo esc_attr(str_replace(' ', '_', strtolower(esc_attr($this->del_space($social['slug']))))); ?>" name="cht_social_<?php echo esc_attr($social['slug']); ?>[is_desktop]" value="checked" data-gramm_editor="false" <?php echo esc_attr($is_desktop) ?> />
                        <span class="device-view-txt">
                            <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.3333 10.0001C14.0667 10.0001 14.6667 9.40008 14.6667 8.66675V2.00008C14.6667 1.26675 14.0667 0.666748 13.3333 0.666748H2.66667C1.93333 0.666748 1.33333 1.26675 1.33333 2.00008V8.66675C1.33333 9.40008 1.93333 10.0001 2.66667 10.0001H0.666667C0.3 10.0001 0 10.3001 0 10.6667C0 11.0334 0.3 11.3334 0.666667 11.3334H15.3333C15.7 11.3334 16 11.0334 16 10.6667C16 10.3001 15.7 10.0001 15.3333 10.0001H13.3333ZM3.33333 2.00008H12.6667C13.0333 2.00008 13.3333 2.30008 13.3333 2.66675V8.00008C13.3333 8.36675 13.0333 8.66675 12.6667 8.66675H3.33333C2.96667 8.66675 2.66667 8.36675 2.66667 8.00008V2.66675C2.66667 2.30008 2.96667 2.00008 3.33333 2.00008Z" />
                            </svg>
                        </span>
                        <span class="device-tooltip">
                            <span class="on"><?php esc_html_e("Hide on desktop", "chaty") ?></span>
                            <span class="off"><?php esc_html_e("Show on desktop", "chaty") ?></span>
                        </span>
                    </label>

<label class="device_view cursor-pointer" for="<?php echo esc_attr($slug); ?>Mobile">
                        <input type="checkbox" id="<?php echo esc_attr($slug); ?>Mobile" class="channels__view-check sr-only js-chanel-icon js-chanel-mobile" data-type="<?php echo esc_attr(str_replace(' ', '_', strtolower(esc_attr($this->del_space($social['slug']))))); ?>" name="cht_social_<?php echo esc_attr($social['slug']); ?>[is_mobile]" value="checked" data-gramm_editor="false" <?php echo esc_attr($is_mobile) ?> >
                        <span class="device-view-txt">
                            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.33301 0.666748H1.99967C1.07967 0.666748 0.333008 1.41341 0.333008 2.33341V13.6667C0.333008 14.5867 1.07967 15.3334 1.99967 15.3334H7.33301C8.25301 15.3334 8.99967 14.5867 8.99967 13.6667V2.33341C8.99967 1.41341 8.25301 0.666748 7.33301 0.666748ZM4.66634 14.6667C4.11301 14.6667 3.66634 14.2201 3.66634 13.6667C3.66634 13.1134 4.11301 12.6667 4.66634 12.6667C5.21967 12.6667 5.66634 13.1134 5.66634 13.6667C5.66634 14.2201 5.21967 14.6667 4.66634 14.6667ZM7.66634 12.0001H1.66634V2.66675H7.66634V12.0001Z" />
                            </svg>
                        </span>
                        <span class="device-tooltip">
                            <span class="on"><?php esc_html_e("Hide on mobile", "chaty") ?></span>
                            <span class="off"><?php esc_html_e("Show on mobile", "chaty") ?></span>
                        </span>
                    </label>
                </div>
            </div>

<div class="chaty-settings active" data-nonce="<?php echo esc_attr(wp_create_nonce($social['slug']."-settings")) ?>" id="<?php echo esc_attr($social['slug']); ?>-close-btn" onclick="toggle_chaty_setting('<?php echo esc_attr($social['slug']); ?>')">
                <a class="flex items-center space-x-1.5" href="#">
                    <span>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12.9332 9.99984C12.8444 10.2009 12.818 10.424 12.8572 10.6402C12.8964 10.8565 12.9995 11.056 13.1532 11.2132L13.1932 11.2532C13.3171 11.377 13.4155 11.5241 13.4826 11.6859C13.5497 11.8478 13.5842 12.0213 13.5842 12.1965C13.5842 12.3717 13.5497 12.5452 13.4826 12.7071C13.4155 12.869 13.3171 13.016 13.1932 13.1398C13.0693 13.2638 12.9223 13.3621 12.7604 13.4292C12.5986 13.4963 12.4251 13.5309 12.2498 13.5309C12.0746 13.5309 11.9011 13.4963 11.7392 13.4292C11.5774 13.3621 11.4303 13.2638 11.3065 13.1398L11.2665 13.0998C11.1094 12.9461 10.9098 12.843 10.6936 12.8038C10.4773 12.7646 10.2542 12.7911 10.0532 12.8798C9.85599 12.9643 9.68782 13.1047 9.56937 13.2835C9.45092 13.4624 9.38736 13.672 9.3865 13.8865V13.9998C9.3865 14.3535 9.24603 14.6926 8.99598 14.9426C8.74593 15.1927 8.40679 15.3332 8.05317 15.3332C7.69955 15.3332 7.36041 15.1927 7.11036 14.9426C6.86031 14.6926 6.71984 14.3535 6.71984 13.9998V13.9398C6.71467 13.7192 6.64325 13.5052 6.51484 13.3256C6.38644 13.1461 6.20699 13.0094 5.99984 12.9332C5.79876 12.8444 5.57571 12.818 5.35944 12.8572C5.14318 12.8964 4.94362 12.9995 4.7865 13.1532L4.7465 13.1932C4.62267 13.3171 4.47562 13.4155 4.31376 13.4826C4.15189 13.5497 3.97839 13.5842 3.80317 13.5842C3.62795 13.5842 3.45445 13.5497 3.29258 13.4826C3.13072 13.4155 2.98367 13.3171 2.85984 13.1932C2.73587 13.0693 2.63752 12.9223 2.57042 12.7604C2.50332 12.5986 2.46879 12.4251 2.46879 12.2498C2.46879 12.0746 2.50332 11.9011 2.57042 11.7392C2.63752 11.5774 2.73587 11.4303 2.85984 11.3065L2.89984 11.2665C3.05353 11.1094 3.15663 10.9098 3.19584 10.6936C3.23505 10.4773 3.20858 10.2542 3.11984 10.0532C3.03533 9.85599 2.89501 9.68782 2.71615 9.56937C2.53729 9.45092 2.32769 9.38736 2.11317 9.3865H1.99984C1.64622 9.3865 1.30708 9.24603 1.05703 8.99598C0.80698 8.74593 0.666504 8.40679 0.666504 8.05317C0.666504 7.69955 0.80698 7.36041 1.05703 7.11036C1.30708 6.86031 1.64622 6.71984 1.99984 6.71984H2.05984C2.2805 6.71467 2.49451 6.64325 2.67404 6.51484C2.85357 6.38644 2.99031 6.20699 3.0665 5.99984C3.15525 5.79876 3.18172 5.57571 3.14251 5.35944C3.10329 5.14318 3.00019 4.94362 2.8465 4.7865L2.8065 4.7465C2.68254 4.62267 2.58419 4.47562 2.51709 4.31376C2.44999 4.15189 2.41545 3.97839 2.41545 3.80317C2.41545 3.62795 2.44999 3.45445 2.51709 3.29258C2.58419 3.13072 2.68254 2.98367 2.8065 2.85984C2.93033 2.73587 3.07739 2.63752 3.23925 2.57042C3.40111 2.50332 3.57462 2.46879 3.74984 2.46879C3.92506 2.46879 4.09856 2.50332 4.26042 2.57042C4.42229 2.63752 4.56934 2.73587 4.69317 2.85984L4.73317 2.89984C4.89029 3.05353 5.08985 3.15663 5.30611 3.19584C5.52237 3.23505 5.74543 3.20858 5.9465 3.11984H5.99984C6.19702 3.03533 6.36518 2.89501 6.48363 2.71615C6.60208 2.53729 6.66565 2.32769 6.6665 2.11317V1.99984C6.6665 1.64622 6.80698 1.30708 7.05703 1.05703C7.30708 0.80698 7.64621 0.666504 7.99984 0.666504C8.35346 0.666504 8.6926 0.80698 8.94264 1.05703C9.19269 1.30708 9.33317 1.64622 9.33317 1.99984V2.05984C9.33402 2.27436 9.39759 2.48395 9.51604 2.66281C9.63449 2.84167 9.80266 2.98199 9.99984 3.0665C10.2009 3.15525 10.424 3.18172 10.6402 3.14251C10.8565 3.10329 11.056 3.00019 11.2132 2.8465L11.2532 2.8065C11.377 2.68254 11.5241 2.58419 11.6859 2.51709C11.8478 2.44999 12.0213 2.41545 12.1965 2.41545C12.3717 2.41545 12.5452 2.44999 12.7071 2.51709C12.869 2.58419 13.016 2.68254 13.1398 2.8065C13.2638 2.93033 13.3621 3.07739 13.4292 3.23925C13.4963 3.40111 13.5309 3.57462 13.5309 3.74984C13.5309 3.92506 13.4963 4.09856 13.4292 4.26042C13.3621 4.42229 13.2638 4.56934 13.1398 4.69317L13.0998 4.73317C12.9461 4.89029 12.843 5.08985 12.8038 5.30611C12.7646 5.52237 12.7911 5.74543 12.8798 5.9465V5.99984C12.9643 6.19702 13.1047 6.36518 13.2835 6.48363C13.4624 6.60208 13.672 6.66565 13.8865 6.6665H13.9998C14.3535 6.6665 14.6926 6.80698 14.9426 7.05703C15.1927 7.30708 15.3332 7.64621 15.3332 7.99984C15.3332 8.35346 15.1927 8.6926 14.9426 8.94264C14.6926 9.19269 14.3535 9.33317 13.9998 9.33317H13.9398C13.7253 9.33402 13.5157 9.39759 13.3369 9.51604C13.158 9.63449 13.0177 9.80266 12.9332 9.99984V9.99984Z" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                    <span><?php esc_html_e("Settings", "chaty") ?></span>
                </a>
            </div>
        </div>

<div class="chaty-advance-settings not-is-pro" style="<?php echo (empty($close_class) && $social['slug'] == 'Contact_Us') ? "display:block" : ""; ?>">
            <div class="chaty-channel-setting space-y-4">
                
                <div class="chaty-setting-col sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-3">
                    <label class="font-primary text-base text-cht-gray-150 sm:w-44"><?php esc_html_e("Icon Appearance", "chaty") ?></label>
                    <div class="flex items-center">
                        
                        <input type="text" name="cht_social_<?php echo esc_attr($social['slug']); ?>[bg_color]" class="chaty-color-field chaty-bg-color" value="<?php echo esc_attr($value['bg_color']) ?>" />

<div class="flex items-center space-x-2">
                            
                            
                            <input id="cht_social_image_<?php echo esc_attr($social['slug']); ?>" type="hidden" name="cht_social_<?php echo esc_attr($social['slug']); ?>[image_id]" value="<?php echo esc_attr($imageId) ?>" />
                        </div>
                    </div>
                </div>
                <div class="clear clearfix"></div>

<div class="chaty-setting-col sm:flex sm:items-center sm:space-x-3">
                    <label class="font-primary text-base text-cht-gray-150 sm:w-44"><?php esc_html_e("On Hover Text", "chaty") ?>
                        <span class="header-tooltip">
                        <span class="header-tooltip-text text-center"><?php esc_html_e('The text that will appear next to your channel when a visitor hovers over it', 'chaty');?></span>
                        <span class="ml-1">
                            <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>
                            </svg>
                        </span>
                    </span>
                    </label>
                    <div>
                        
                        <input type="text" class="chaty-title" name="cht_social_<?php echo esc_attr($social['slug']); ?>[title]" value="<?php echo esc_attr($value['title']) ?>">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <button type="button" class="is-chatway btn-cancel absolute right-2 top-2 text-cht-gray-150 hover:text-red-500" data-social="<?php echo esc_attr($social['slug']); ?>">
        <svg class="pointer-events-none" data-v-1cf7b632="" width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" focusable="false" tabindex="-1">
            <path d="M2 4h12M5.333 4V2.667a1.333 1.333 0 011.334-1.334h2.666a1.333 1.333 0 011.334 1.334V4m2 0v9.333a1.334 1.334 0 01-1.334 1.334H4.667a1.334 1.334 0 01-1.334-1.334V4h9.334z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </button>
    
</li>

🔐 Sid Gifari File Manager Pro