Insites Docs Web Components Insites Component Installation Guide

Insites Component Installation Guide

Last updated on July 12, 2025.

To ensure your Insites web components render and function correctly on your web page, you need to include the core Insites component script files. These files contain the definitions and logic for all Insites components, allowing your browser to recognize and display custom tags like <ins-table>, <ins-button>, and <ins-card>.



Where to Place the Scripts

The recommended place to include these script and stylesheet links is within the <head> section of your HTML document. This ensures that the component definitions are loaded and parsed by the browser before it attempts to render any Insites custom elements in your <body>.



The Essential Script Tags

You will need to include several <link> tags for stylesheets and two <script> tags for JavaScript. These links point to the Insites component files hosted on our Content Delivery Network (CDN), ensuring fast and reliable delivery. For information on specific versions and their corresponding script links, please refer to our Component Versions documentation.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Font Icons -->
    <link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-font-icons.css">
    <!-- Insites Components Stylesheet -->
    <link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites.css" />
    <!-- Insites Components JavaScript (Module and No-Module versions) -->
    <script type="module" src="https://components.insites.io/v2/latest/insites.esm.js"></script>
    <script nomodule src="https://components.insites.io/v2/latest/insites.js"></script>
    <!-- Your custom page-specific styles can go here -->
    <style>
        /* ... your custom CSS ... */
    </style>
</head>
<body>
    <!-- Your Insites components and other HTML content go here -->
    <ins-table id="myTable"></ins-table>
    <ins-button variant="primary">Click Me</ins-button>
    <!-- Your page-specific JavaScript can go here, typically at the end of <body> or after DOMContentLoaded -->
    <script>
        // Example: Accessing an Insites component after the DOM is ready
        document.addEventListener('DOMContentLoaded', () => {
            const myTable = document.getElementById('myTable');
            // You can now interact with myTable properties and methods
        });
    </script>
</body>
</html>
```


Explanation of the Script Tags

  • Fonts (`Open Sans`, `Inter`): These `<link>` tags import the specified font families from Google Fonts. Using these fonts ensures a consistent and visually appealing typography across your application, aligning with Insites' design system.

  • Font Icons (`insites-font-icons.css`): This stylesheet provides access to a library of scalable vector icons. Including it allows you to use icons within your Insites components (e.g., on buttons) or anywhere else on your page, enhancing visual communication without relying on image files. You can view the icons available in the Insites font icon documentation.

  • insites.css: This stylesheet provides the default visual styling for all Insites components. Including it ensures that your components look consistent and branded right out of the box.

  • insites.esm.js (type="module"): This is the ES Module version of our component library. Modern browsers that support ES Modules will load and execute this file. It's the preferred way to deliver JavaScript modules for better performance and maintainability.

  • insites.js (nomodule): This is a fallback script for older browsers that do not support ES Modules. Browsers that do support type="module" will ignore this nomodule script, while older browsers will execute it. This ensures broad compatibility for your Insites-powered applications.

By including these lines in your HTML, you're effectively "bootstrapping" the Insites component library, making all its powerful features available for use on your page.

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.