Skip to content

A Sitewide Customer Care Messaging Button for BuddyBoss

Customer Care Help Button Initial Output

PHP:

/**
 * Produces Message Customer Care Button 
 * Added automatically sitewide via WP Footer 
 * Some custom styling in theme style
 */
add_shortcode( 'message-customer-care', 'message_customer_care_handler' ) ; 
function message_customer_care_handler( $atts ) {
	
	$a = shortcode_atts( array( 
		
			'receiver_id' => '', //user id, like 180025
			
			), $atts ) ; 
	
	if ( ! isset( $atts['receiver_id'] ) ) { //if user id not set, look for "customercare" username
		
		$receiver = get_user_by( 'login', 'customercare' ) ;
		if ( is_object( $receiver ) && ! is_wp_error( $receiver ) ) {
			
			$receiver_id = $receiver->ID ; 
			
		} else {
			
			$receiver_id = $a['receiver_id'] ; 
			
		}
		
		if ( $receiver_id ) {
		
			$button_args = array(
					'id'                       => 'private_message',
					'component'                => 'messages',
					'must_be_logged_in'        => true,
					'block_self'               => false,
					'parent_attr'               => array( 
						'id' => 'customer-care__send-private-message',
						'class' => 'button-wrapper' 
					),
					'link_text'                => '<i class="bb-icon-l buddyboss bb-icon-life-ring" aria-hidden="true"></i><span>' . esc_html__( 'CustomerCare', 'buddyboss' ) . '</span>',
					'link_class'               => 'send-message button',
					'is_tooltips'              => true,
					'data-balloon-pos'         => 'up',
					'data-balloon'             => esc_html__( 'Message CustomerCare', 'buddyboss' ),
					'prefix_link_text'         => '',
					'postfix_link_text'        => '',
					'button_attr'              => array(
						'hover_type'           => false,
						'data-title'           => '',
						'data-title-displayed' => '',
					),
				);

			$button_args['message_receiver_user_id'] = $receiver_id ;
			
			$button_args['link_href'] = wp_nonce_url( bp_loggedin_user_domain() . bp_get_messages_slug() . '/compose/?r=' . bp_members_get_user_nicename( $receiver_id ) ) ;
				
			return bp_get_button( $button_args ) ;
			
		}
		
	}
	
	return '' ;
	
}

add_action( 'wp_footer', 'footer_message' ) ;
function footer_message() {
	
	echo do_shortcode( '[message-customer-care]' ) ;
	
}
Show fixed on mobile as reduced “life-ring” button.

CSS:

#customer-care__send-private-message {
    bottom: 0;
    display: block;
    left: 80px;
    position: fixed;
    z-index: 1000;
}
#customer-care__send-private-message a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    letter-spacing: 1px;
    line-height: 40px;
    padding: 0 16px 0 8px;
}
#customer-care__send-private-message i {
    font-size: 2rem;
    margin-left: 0;
    margin-right: 4px;
    vertical-align: middle;
}
@media( min-width: 1025px ) {
    .buddypanel-open #customer-care__send-private-message {
        left: 242px;
    }
)
@media (max-width: 1024px) {
    #customer-care__send-private-message {
        left: -2px;
    }
}
@media (max-width: 600px) {
    #customer-care__send-private-message {
        bottom: 25%;
        left: auto;
        right: -2px;
    }
    #customer-care__send-private-message a {
        border-bottom-left-radius: 8px;
        margin: 0;
        padding: 0;
        width: 40px;
    }
}

1 thought on “A Sitewide Customer Care Messaging Button for BuddyBoss”

  1. Pingback: Using BuddyBoss Icons in Elementor and GeoDirectory – CKMSWP

Leave a Reply