Support » Plugin: WP Live Chat Support » Proposed Feature / Customization: Quick Name & Email Field Entry

  • Resolved KZeni

    (@kzeni)



    I had a site where the name field should remain as the default as needed, but then clicking the name field then instantly removes the default value for the visitor to instantly be able to start typing. Also, the fields weren’t immediately obvious what they were with them having data pre-populated (removing the placeholder for the field [which was the only way the field was being labelled previously]) so I added some basic labels which fit into the modern styling of the chat box.

    Here’s what I added to implement this additional functionality / customization.

    Added to the site’s JavaScript:

    
    // WP Live Chat Customization
    var defaultChatName;
    // Add labels to the text boxes & save what the original name value was
    $(document).on('wplc_open_chat',function(){
    	$('#wplc_name').before('<label for="wplc_name">Name</label>');
    	$('#wplc_email').before('<label for="wplc_email">Email</label>');
    	defaultChatName = $('#wplc_name').val();
    });
    // Clear the name field if the value is currently the default value
    $(document).on('focus','#wplc_name',function(){
    	if($('#wplc_name').val() === defaultChatName){
    		$('#wplc_name').val('');
    	}
    });
    // Re-apply the default value on the name field if the value was left blank
    $(document).on('blur','#wplc_name',function(){
    	if($('#wplc_name').val() === ''){
    		$('#wplc_name').val(defaultChatName);
    	}
    });
    

    Added to the site’s CSS:

    
    /* WP Live Chat Styling */
    #wplc_message_div {
        label[for="wplc_name"],label[for="wplc_email"] { display:block; margin:0.5em 0 0.1em; padding:0 0.5em; font-size:0.86em; text-align:left; }
        label[for="wplc_name"]:after,label[for="wplc_email"]:after { content:':'; display:inline; }
    }
    

    I would imagine anyone looking to accomplish this as well could use these code snippets and save some time. You can see how the name field is implemented, and this can be replicated to also make the email field behave the same way. My implementation only needed the name field to act this way so the email & other fields were left as-is. Also, I’m certainly open to seeing if there’s a better way to accomplish this.

    It might be nice if this were officially implemented in some way (ex. allow for labels to be shown on fields as an appearance option, automatically have the default value blank-out on focus & return if left blank, etc.) That said, I’m sure the official implementation would be implemented differently (no need to add the labels after the fact, etc.)

    Thanks,
    Kurt

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author DylanAuty

    (@dylanauty)

    Hi Kurt,

    Dylan here from the development team.

    Thank you so much for your time, and for sharing your implementation with us. This is definitely very interesting, and I am eager to run a few tests on this from my side.

    I have added this to our development log, for official consideration in a future release. Our development team will then take a look at the code implementation, and the possibility of adding this as an option within the core.

    Please see out official logged enhancement here: https://github.com/CodeCabin/wp-live-chat-support/issues/963

    Thank you again for taking the time to share this with us!

    Sounds good! Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.