University Catalog Widget

The University Catalog now includes an API widget that allows you to add a link or a list of links, or pull content from the catalog and display it on your website. The widget keeps your links and information up-to-date by always pulling the latest information from the catalog. This means that when the catalog is updated, the links and content on your website are also updated. To use the widget, perform the following two steps.

Step One - Request the Code

Complete the following steps to request the HTML code from the University Catalog Webmaster.

  1. Visit the University Catalog and locate the content that you want to add to your website.
  2. Send an email with the subject "API Access" to the Univerity Catalog Webmaster and include a link to the catalog page that contains your desired content. If the catalog page contains multiple sections of content and you only want access to a specific section, provide the heading of that section in the email. Also indicate whether you want to link to the content or pull the content onto your website. Once your request is processed, the catalog webmaster will reply with the HTML code that you will need for step two below.

Step Two - Add the Code

Once you receive the HTML code from the University Catalog Webmaster, you can add a link or pull content from the University Catalog by completing the following steps.

  1. Edit the webpage where you want to add the catalog link or content.
  2. Below the WYSIWYG editor, select Full HTML with Scripts from the Text format drop-down list. If you don't see this option, email the Web Administrator.
  3. On the WYSIWYG editor toolbar, click the Source button to view the page's source code.
  4. Insert the following line as the first line of code in your source code.
    <link rel="stylesheet" href="http://ecatalog.calstatela.edu/widget-api/widget-api.min.css">
  5. Insert the following line as the last line of code in your source code.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  6. Locate the position where you want the catalog link or content to appear and paste the HTML code you received from the catalog webmaster.

    Note: If you are not familiar with HTML or are not sure where to paste the HTML code, you can do the following. Switch back to rendered view by clicking the Source button and type multiple consecutive X's in the location that you want to add the catalog code. Then switch back to the source code, locate the X's, and replace them with the catalog HTML code.

Place curser where you want catalog content or link to appear, type multiple X characters, switch to code view, locate the X characters and replace them with the HTML code you got from the eCatalog Webmaster

  1. Save and publish your webpage. You should now see the catalog link or content on your page.

 

If you need additional assistance with using the University Catalog Widget, please email the Web Administrator.