diff --git a/packages/site-builder/src/components/editor-components/book-a-valuation.tsx b/packages/site-builder/src/components/editor-components/book-a-valuation.tsx
index df0608c092..3d012b3fcc 100644
--- a/packages/site-builder/src/components/editor-components/book-a-valuation.tsx
+++ b/packages/site-builder/src/components/editor-components/book-a-valuation.tsx
@@ -38,7 +38,7 @@ export const initializeBookAValuationComponent = editor => {
 
             const initWidget = () => {
               container.innerHTML = ''
-              new window.ReapitAppointmentBookingComponent({
+              new window.ReapitBookValuationWidget({
                 theme: {
                   baseBackgroundColor: '#fff',
                   basefontSize: '16px',
@@ -64,14 +64,14 @@ export const initializeBookAValuationComponent = editor => {
               })
             }
 
-            if (!window.ReapitAppointmentBookingComponent) {
+            if (!window.ReapitBookValuationWidget) {
               const styles = document.createElement('link')
-              styles.href = 'https://web-components.reapit.cloud/appointment-bookings.css'
+              styles.href = 'https://web-components.reapit.cloud/book-valuation-widget.css'
               styles.rel = 'stylesheet'
               document.head.appendChild(styles)
 
               const script = document.createElement('script')
-              script.src = 'https://web-components.reapit.cloud/appointment-bookings.js'
+              script.src = 'https://web-components.reapit.cloud/book-valuation-widget.js'
               script.async = true
               script.defer = true
               script.onload = initWidget
diff --git a/packages/site-builder/src/components/editor-components/property-detail.tsx b/packages/site-builder/src/components/editor-components/property-detail.tsx
index 29ee7651ee..809d3ff20b 100644
--- a/packages/site-builder/src/components/editor-components/property-detail.tsx
+++ b/packages/site-builder/src/components/editor-components/property-detail.tsx
@@ -36,7 +36,7 @@ export const initializePropertyDetailComponent = editor => {
 
             const initWidget = () => {
               container.innerHTML = ''
-              new window.ReapitPropertyDetailComponent({
+              new window.ReapitPropertyDetailWidget({
                 theme: {
                   baseBackgroundColor: '#fff',
                   basefontSize: '16px',
@@ -62,14 +62,14 @@ export const initializePropertyDetailComponent = editor => {
               })
             }
 
-            if (!window.ReapitPropertyDetailComponent) {
+            if (!window.ReapitPropertyDetailWidget) {
               const styles = document.createElement('link')
-              styles.href = 'https://web-components.reapit.cloud/property-detail.css'
+              styles.href = 'https://web-components.reapit.cloud/property-detail-widget.css'
               styles.rel = 'stylesheet'
               document.head.appendChild(styles)
 
               const script = document.createElement('script')
-              script.src = 'https://web-components.reapit.cloud/property-detail.js'
+              script.src = 'https://web-components.reapit.cloud/property-detail-widget.js'
               script.async = true
               script.defer = true
               script.onload = initWidget
diff --git a/packages/site-builder/src/components/editor-components/search-widget.tsx b/packages/site-builder/src/components/editor-components/search-widget.tsx
index d7fc6aec28..79abddd25e 100644
--- a/packages/site-builder/src/components/editor-components/search-widget.tsx
+++ b/packages/site-builder/src/components/editor-components/search-widget.tsx
@@ -36,7 +36,7 @@ export const initializeSearchWidgetComponent = editor => {
 
             const initWidget = () => {
               container.innerHTML = ''
-              new window.ReapitSearchWidgetComponent({
+              new window.ReapitSearchWidget({
                 theme: {
                   baseBackgroundColor: '#fff',
                   basefontSize: '16px',
@@ -62,7 +62,7 @@ export const initializeSearchWidgetComponent = editor => {
               })
             }
 
-            if (!window.ReapitSearchWidgetComponent) {
+            if (!window.ReapitSearchWidget) {
               const styles = document.createElement('link')
               styles.href = 'https://web-components.reapit.cloud/search-widget.css'
               styles.rel = 'stylesheet'
diff --git a/packages/site-builder/src/styles/index.scss b/packages/site-builder/src/styles/index.scss
index 994e54c241..98abfb5802 100644
--- a/packages/site-builder/src/styles/index.scss
+++ b/packages/site-builder/src/styles/index.scss
@@ -28,6 +28,10 @@ html {
   box-sizing: content-box !important;
 }
 
+#root {
+  height: 100%;
+}
+
 /* Class names prefixes */
 $prefix: 'gjs-' !default;
 
@@ -38,7 +42,8 @@ $quaternaryColor: #7bc9eb;
 $fontName: 'Open Sans', Arial, Helvetica, sans-serif;
 
 .#{$prefix} {
-  @each $cnum, $ccol in (one, $primaryColor), (two, $secondaryColor), (three, $tertiaryColor), (four, $quaternaryColor) {
+  @each $cnum, $ccol in (one, $primaryColor), (two, $secondaryColor), (three, $tertiaryColor), (four, $quaternaryColor)
+  {
     &#{$cnum} {
       &-bg {
         background-color: $ccol;
@@ -55,5 +60,5 @@ $fontName: 'Open Sans', Arial, Helvetica, sans-serif;
   }
 }
 
+@import './vendor/grapesjs/main.scss';
 
-@import "./vendor/grapesjs/main.scss";
\ No newline at end of file
diff --git a/packages/site-builder/src/tests/badges/badge-branches.svg b/packages/site-builder/src/tests/badges/badge-branches.svg
new file mode 100644
index 0000000000..cc4646d04e
--- /dev/null
+++ b/packages/site-builder/src/tests/badges/badge-branches.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">49.06%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">49.06%</text></g></svg>
\ No newline at end of file
diff --git a/packages/site-builder/src/tests/badges/badge-functions.svg b/packages/site-builder/src/tests/badges/badge-functions.svg
new file mode 100644
index 0000000000..94b9b4f1c7
--- /dev/null
+++ b/packages/site-builder/src/tests/badges/badge-functions.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">65.22%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">65.22%</text></g></svg>
\ No newline at end of file
diff --git a/packages/site-builder/src/tests/badges/badge-lines.svg b/packages/site-builder/src/tests/badges/badge-lines.svg
new file mode 100644
index 0000000000..827a44bdae
--- /dev/null
+++ b/packages/site-builder/src/tests/badges/badge-lines.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#dfb317"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">83.81%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">83.81%</text></g></svg>
\ No newline at end of file
diff --git a/packages/site-builder/src/tests/badges/badge-statements.svg b/packages/site-builder/src/tests/badges/badge-statements.svg
new file mode 100644
index 0000000000..19d94c5d46
--- /dev/null
+++ b/packages/site-builder/src/tests/badges/badge-statements.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#dfb317"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">82.47%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">82.47%</text></g></svg>
\ No newline at end of file
diff --git a/packages/site-builder/src/types/global.d.ts b/packages/site-builder/src/types/global.d.ts
index 8af4edb09a..d6da77b8ac 100644
--- a/packages/site-builder/src/types/global.d.ts
+++ b/packages/site-builder/src/types/global.d.ts
@@ -13,8 +13,8 @@ declare global {
     reapit: {
       config: Config
     }
-    ReapitSearchWidgetComponent: any
-    ReapitPropertyDetailComponent: any
-    ReapitAppointmentBookingComponent: any
+    ReapitSearchWidget: any
+    ReapitPropertyDetailWidget: any
+    ReapitBookValuationWidget: any
   }
 }