Embedding a Catalog – Kuali

Display a Single Catalog
Display Multiple Catalogs

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://INSTITUTION.kualihub.com/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://INSTITUTION.kualihub.com'</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://INSTITUTION.kualihub.com/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.

Display a Single Catalog

If your catalogs should be presented through a different landing pages, you can direct the embed code to access a single catalog. This method is more common when an institution needs to publish both a Graduate and an Undergraduate catalog at the same time.

Note: When using this method, you will only be able to display a single catalog at a time. Each year when you publish a new one, you will need to update the embed code.

If you will be displaying catalogs on different pages, then you will need to first locate the catalog's ID. To find this ID, access Catalog and select the specific catalog you would like to display. The ID will be shown to the right of the catalog name, and you can click on it to copy it.

Catalog - Get Catalog ID

When you have copied the ID, add it into the embed code along with the text, window.catalogID='{{CATALOGID}}', and place it just below the line for window.subdomain.
When assembled, your embed code will now resemble this:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://INSTITUTION.kualihub.com/catalog/build/catalog.css">
  </head>
  <body>
   <!-- Your website header here -->
    <div> Check out this sweet catalog! </div>
    <div id="kuali-catalog"></div>
    <!-- Your website footer here -->
    <script>
      window.subdomain='https://INSTITUTION.kualihub.com'
      window.catalogId='{{CATALOGID}}'
    </script>
    <script src="https://INSTITUTION.kualihub.com/catalog/build/catalog.js"></script>
  </body>
</html>

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

<script>
      window.subdomain='https://INSTITUTION.kualihub.com'
      window.catalogId='{{CATALOGID}}'
    </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.

Display Multiple Catalogs

If all of your catalogs should be presented through a single landing page, a drop-down menu will be available to provide access to Archived catalogs. As each new catalog is published, the most recent catalog will be listed first. This type of display is common when an institution uses a 'General Catalog', for example.

Catalog - Drop down example

If you will be displaying all catalogs on a single page, then your sample embed code will resemble this when assembled:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://INSTITUTION.kualihub.com/catalog/build/catalog.css">
  </head>
  <body>
   <!-- Your website header here -->
    <div> Check out this sweet catalog! </div>
    <div id="kuali-catalog"></div>
    <!-- Your website footer here -->
    <script>
      window.subdomain='https://INSTITUTION.kualihub.com'
    </script>
    <script src="https://INSTITUTION.kualihub.com/catalog/build/catalog.js"></script>
  </body>
</html>

Related to

Display a Single Catalog

Display Multiple Catalogs

Related articles