This can be easily done using omni toolkit. Here is sample code. Please note only aura can be used. You need to add the below component on the lightning page. Modify the code as needed.

<aura:component controller="RC_UserServicePresenceController" implements="flexipage:availableForAllPageTypes" access="global" >
    
    <aura:attribute name="isModalOpen" type="boolean" default="false"/>
    <aura:attribute name="reason" type="String"/>
    <aura:attribute name="statusName" type="String"/>
    <aura:attribute name="userId" type="String" />
    
    <lightning:omniToolkitAPI aura:id="omniToolkit" />  
    <aura:handler event="lightning:omniChannelStatusChanged" action="{! c.onStatusChanged }"/>
    <aura:if isTrue="{!v.isModalOpen}">
             
            <!-- Modal/Popup Box starts here-->
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- Modal/Popup Box Header Starts here-->
                    <header class="slds-modal__header">
                        <!--<lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>-->
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Status Change Reason</h2>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <lightning:textarea value="{!v.reason}" name="reason" label="Please provide a valid reason" placeholder="type here..."/>
                    </div>
                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <!--<lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>-->
                        <lightning:button variant="brand"
                                          label="Submit"
                                          title="Submit"
                                          onclick="{!c.submitDetails}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
</aura:component>


Controller. 
({
    onStatusChanged : function(component, event, helper) {
        console.log("Status changed.");
        var statusId = event.getParam('statusId');
        var channels = event.getParam('channels');
        var statusName = event.getParam('statusName');
        var statusApiName = event.getParam('statusApiName');
        console.log(statusId);
        console.log(channels);
        console.log(statusName);
        component.set("v.statusName", statusName);
        if(statusName == 'Break' || statusName == 'Escalation' || statusName == 'Feedback' || statusName == 'On Customer call' || statusName == 'Priority Task' || statusName == 'Team Meeting' || statusName == 'Travel' || statusName == 'Not Ready'){
            // need to open a pop-up
            component.set("v.isModalOpen", true);
            if(component.get("v.reason") != undefined && component.get("v.reason") !=''){
                component.set("v.reason", '');
            }
            console.log(statusName);
        }
        if(statusName == 'Feedback'){
            window.setTimeout(
                $A.getCallback(function() {
                    var omniAPI = component.find("omniToolkit");
                    var statusId;
                    omniAPI.getServicePresenceStatusId().then(function(result) {
                        statusId =  result.statusId;
                        if(statusId ==$A.get("$Label.c.RC_Feedback_Label") ){
                            alert('Changing Feedback to Available');
                            omniAPI.setServicePresenceStatus({statusId: $A.get("$Label.c.RC_Available_Label")}).then(function(result) {
                                console.log('Current statusId is: ' + result.statusId);
                                console.log('Channel list attached to this status is: ' + result.channels); 
                            }).catch(function(error) {
                                console.log(error);
                            });
                        }
                    }).catch(function(error) {
                        console.log(error);
                    });
                    
                }), 900000
            ); 
        }
        
            if(statusName == 'Team Meeting'){
            window.setTimeout(
                $A.getCallback(function() {
                    var omniAPI = component.find("omniToolkit");
                    var statusId;
                    omniAPI.getServicePresenceStatusId().then(function(result) {
                        statusId =  result.statusId;
                        if(statusId == $A.get("$Label.c.RC_TeamMetting_Label")){
                            alert('Changing Feedback to Available');
                            omniAPI.setServicePresenceStatus({statusId: $A.get("$Label.c.RC_Available_Label")}).then(function(result) {
                                console.log('Current statusId is: ' + result.statusId);
                                console.log('Channel list attached to this status is: ' + result.channels); 
                            }).catch(function(error) {
                                console.log(error);
                            });
                        }
                    }).catch(function(error) {
                        console.log(error);
                    });
                    
                }), 1800000
            ); 
        }
    },
    
    openModel: function(component, event, helper) {
        // Set isModalOpen attribute to true
        component.set("v.isModalOpen", true);
    },
    
    
    submitDetails: function (component, event, helper){
        console.log('submitDetails');
        var reason = component.get("v.reason");
        var statusName = component.get("v.statusName");
        if(reason == undefined || reason == ''){
         helper.showToast('Ooops !', 'Please fill up the reason for changing status.', 'error');
        }
        else{
            console.log('submitDetails1');
        //if everything is okey then make server call   
        var action = component.get("c.saveUserServicePresenceReason"); 
        action.setParams({
           reason : reason, 
           statusName : statusName,
           userId : $A.get("$SObjectType.CurrentUser.Id")
        }); 
        action.setCallback(this,function(response){
            var state = response.getState();
            console.log('submitDetails2'+response.getError().message);
            //if callback is Success then show toast message and close the modal popup
             if(state === "SUCCESS")
             {
                //pass parameters to helper showToast method  
                helper.showToast('Success !', 'Data Captured Successfully', 'success');
               component.set("v.isModalOpen", false);
             }
        });
         $A.enqueueAction(action);
      }  
    },
})