Soy nuevo en hacer cambios personalizados en wordpress. Tengo un archivo de secuencia de comandos, que necesita cambiar su posición y diseño, una vez que el usuario hace clic en el botón.

 <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>

Se agregó este archivo de script para un chatbot en vivo de Reachify.io. El código se agregó al encabezado de wordpress, usando el complemento 'Insertar encabezado y pie de página'.

Una vez que lo agregué, el diseño se rompe de la ventana emergente cuando se abre. Tendría que agregar las siguientes líneas de estilo al código del script. es posible?

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

Así es como se ve ahora, sin el estilo.

https://postimg.cc/zbdDWS3T

Así es como quiero que se vea como:

https://postimg.cc/q6JTmt64

Por favor, ayúdenme con la edición del código del script.