Advanced Loading¶

By default, the embed displays a "Loading…" message while data and styles are being fetched. With additional configuration, you can customise this experience to show a bespoke loading message, a full loading screen, or a skeleton loader.

If you’d like to explore these options, please contact our team.

Manually Include CSS¶

The embed stylesheet is normally injected automatically once the embed has loaded. However, if you want your custom loading HTML to render correctly before that point, you’ll need to include the stylesheet manually.

To do this you'll need to know the siteRef for your site in Spec Check Lite - this can be found via the admin interface by looking at the example code for a machine embed. The format of the CSS URL is as follows: https://lite.speccheck.com/resources/<siteRef>/css

For example:

<link
  href="https://lite.speccheck.com/resources/6a85701d-a120-474b-a31d-2b84d652e2bf/css"
  rel="stylesheet"
/>

Lite Configuration¶

To enable custom HTML, set the usePreloadHtml option in your inital configuration. When enabled, Lite loads your custom HTML before completing the rest of the setup.

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    const container = document.getElementById("jsEmbed");

    new SpecCheckLite({
      knockout: ko,
      container,
      // ... embed specific configuration
      usePreloadHtml: true
    }).create();
  });
</script>

Further Assistance¶

If you have any questions at all then please contact our support team by emailing [email protected]