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]' ) ;
}
Customer View in Messaging
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;
}
}
Pingback: Using BuddyBoss Icons in Elementor and GeoDirectory – CKMSWP