Embedding a Catalog on your Website

In order for your catalog to be accessible, you'll need to embed it onto your website. The following steps can be used to embed the catalog.

In your website's HTML code, place a link to the Kuali Catalog stylesheet at the top of the stylesheet, in-between the <head> and </head> tags on the page where the catalog will be displayed. Make sure that you add relevant meta tags to ensure proper mobile operation.

Example:

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://[your-domain].kuali.co/catalog/build/catalog.css">
</head>

Within the HTML, locate the specific location on the page you want the catalog to appear. This will likely be within the <body> and </body> tags in your content. Add <div id="kuali-catalog">

Example:

<!-- Your website header here -->
	<body>
	<div id="kuali-catalog"></div>
	</body>
<!-- Your website footer here -->

Set the subdomain from which to pull items (if you have more than one school, this will be the default subdomain). This can be in an inline <script> as shown below, or an externally loaded script.

Example:

<script>window.subdomain = 'https://[your-domain].kuali.co'</script>

Run the catalog.js script by adding a <script> tag as the very last item in your <body> section:

Example:

<body>
  <!-- Your website content here -->
  <script src="https://[your-domain].kuali.co/catalog/build/catalog.js"></script>
</body>

There are two ways that you can choose to display your catalogs on your site: you can either display a single catalog, or display multiple catalogs.

Note: If you find that your catalog does not display after installing the snippet, double check that:


<script>
      window.subdomain='https://monsters.kuali.co'
      window.catalogId='623e17717da9be51dfd27435'
    </script>

is entered without any additional spacing before or after the = and that catalogId is entered exactly as shown here - changing it to catalogID will not display correctly.

Articles in this section

Comments

Articles in this section

Related articles