I'm new to making custom changes in wordpress. I have a script file, which needs to change its position and design, once the user clicks on the button.

<script>

(function (w,d,s,o,f,js,fjs) {
w['ReachifyLiveChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'rlc', 'https://s3-us-west-2.amazonaws.com/domain-live-chat/main.js'));

rlc({
"id": "dcms",
"name": "TOBB",
"primaryColor": "#6cc7ff",
"secondaryColor": "#9e86ff",
"popupDelay": 1000,
"requestDetailsDelay": 120000,
"requestDetailsOnStart": true,
"helloMessage": "Hello! How can I help you?"
});

    
</script>

Added this script file for a live chatbot from Reachify.io. The code was added to the header of the wordpress, using 'Insert Header and Footer' plugin.

Once I added it, the layout is breaking of the pop-up when is opened. I'd have to add the following style lines to the script code. Is this possible?

.dnwUpt {
position: inherit; 
margin-top: 100px;
};

This is how it looks now, without the style.

https://postimg.cc/zbdDWS3T

This is how I want it to appear like -

https://postimg.cc/q6JTmt64

Please help me with the script code edit.