Skip to main content

Display modes

We have added a lot of flexibility to how the widget is displayed, so you can provide a seamless experience for your users as much as possible.

The widget is built mobile first, so should scale down gracefully to the smallest of devices. You can display the Business Score widget in three modes; popup, in-line and full screen.

Full screen mode​

To use the widget in full screen mode, instantiate your widget with the following parameters.

index.html
<body id="body" style="margin: 0">
  // Ensure you have an html element with an element id you can pass to the
  widget, setting margin to 0 as some browers add a margin to the body tag
</body>
index.html
<script>
  BusinessScoreWidget({
    elementId: 'body',
    publicKey: ...,
    width: '100vw',
    height: '1000px', // This is the height of your screen in px
  }).show()
</script>

Finally ensure you call the widget.show() method on window unload.

Pop up mode​

To use the widget as a pop up, instantiate your widget with the following parameters.

Ensure the popup parameter is set to true

index.html
<script>
  var widget = BusinessScoreWidget({
    elementId: ...,
    publicKey: ...,
    popup: true,
    height: "700px",
    width: "500px",
  });
</script>

Finally call the widget.show() method on an HTML element.

index.html
<button type="button" onclick="widget.show()">Show Widget</button>

In place mode​

To display the widget in-place, instantiate your widget with the following parameters.

index.html
<script>
  var widget = BusinessScoreWidget({
    elementId: ...,
    publicKey: ...,
    height: "700px",
    width: "100vw",
  });
</script>

Finally call the widget.show() method on an HTML element.

index.html
<button type="button" onclick="widget.show()">Show Widget</button>
index.html
<button type="button" onclick="widget.hide()">Hide Widget</button>