Для того чтобы скрипт не занимал всю страницу, можно использовать асинхронную загрузку скрипта или выполнить скрипт после загрузки контента страницы.
Ниже приведен пример асинхронной загрузки скрипта с использованием атрибута `async`:
```
<script async src="your_script.js"></script>
```
Или можно выполнить скрипт после загрузки контента страницы, поместив код внутрь события `DOMContentLoaded`:
```
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// Ваш скрипт здесь
});
</script>
```
Чтобы изменить скрипт виджета, чтобы он открывался на всю ширину экрана и растягивался вниз на необходимую высоту, можно применить CSS-стили к виджету.
Ниже приведен пример CSS, который растянет элемент с классом "widget" на всю ширину экрана и задаст ему высоту "300px":
```css
.widget {
width: 100%;
height: 300px;
}
```
Примените этот класс к вашему виджету, чтобы он открывался на всю ширину экрана и имел заданную высоту.
Например, если у вас есть элемент `<div id="widget">...</div>`, вы можете применить класс "widget" следующим образом:
```html
<style>
.widget {
width: 100%;
height: 300px;
}
</style>
<div id="widget" class="widget">
<!-- Код виджета -->
</div>
```
Таким образом, виджет будет открываться на всю ширину экрана и иметь высоту 300 пикселей. Остальные элементы страницы будут оставаться видимыми как сверху, так и снизу виджета.